Flutter自定义进度按钮插件custom_progress_button的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter自定义进度按钮插件custom_progress_button的使用

CustomProgressButton 是一个用于 Flutter 的可定制按钮小部件，允许根据 ButtonState 枚举显示不同的状态。它支持带有可选进度指示器的加载状态。按钮的外观和行为可以通过各种属性进行自定义。

安装

在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  custom_progress_button: ^2.0.1

然后运行 flutter pub get 来安装该包。

使用

在 Dart 文件中导入包：

import 'package:custom_progress_button/custom_progress_button.dart';

基本用法

要使用 CustomProgressButton，提供一个不同按钮状态的 widget 映射和一个不同状态的颜色映射。然后，设置 state 属性以控制按钮的当前状态。

CustomProgressButton(
  stateWidgets: {
    ButtonState.idle: Text('提交'), // 空闲状态 widget
    ButtonState.loading: CircularProgressIndicator(), // 加载状态 widget
    ButtonState.success: Icon(Icons.check), // 成功状态 widget
    ButtonState.fail: Icon(Icons.close), // 失败状态 widget
  },
  stateColors: {
    ButtonState.idle: Colors.blue, // 空闲状态颜色
    ButtonState.loading: Colors.grey, // 加载状态颜色
    ButtonState.success: Colors.green, // 成功状态颜色
    ButtonState.fail: Colors.red, // 失败状态颜色
  },
  state: ButtonState.idle, // 初始状态
  onPressed: () {
    // 处理按钮点击事件
  },
),

高级用法

自定义按钮属性

你可以自定义 CustomProgressButton 的各种属性：

CustomProgressButton(
  // 其他属性...
  minWidth: 200.0, // 按钮的最小宽度
  maxWidth: 400.0, // 按钮的最大宽度
  radius: 20.0, // 按钮的圆角半径
  height: 48.0, // 按钮的高度
  progressIndicatorSize: 20.0, // 进度指示器的大小
  progressAlignment: MainAxisAlignment.center, // 进度指示器的对齐方式
  padding: EdgeInsets.symmetric(horizontal: 16.0), // 按钮子元素周围的填充
  minWidthStates: [ButtonState.loading], // 使用最小宽度的状态列表
  buttonShapeEnum: ButtonShapeEnum.elevated, // 按钮形状（elevated、outline 或 flat）
  elevation: 4.0, // 按钮的阴影（仅适用于 elevated 和 outlined 形状）
  inLineBackgroundColor: Colors.white, // 加载和成功状态下的背景颜色
  enable: true, // 启用或禁用按钮
),

使用图标按钮

你可以使用 CustomProgressButton.icon 构造函数来创建具有不同状态图标按钮的按钮：

CustomProgressButton.icon(
  iconButtons: {
    ButtonState.idle: CustomIconButton(
      text: '提交',
      icon: Icon(Icons.send),
      color: Colors.blue,
    ),
    ButtonState.loading: CustomIconButton(
      icon: CircularProgressIndicator(),
      color: Colors.grey,
    ),
    ButtonState.success: CustomIconButton(
      icon: Icon(Icons.check),
      color: Colors.green,
    ),
    ButtonState.fail: CustomIconButton(
      icon: Icon(Icons.close),
      color: Colors.red,
    ),
  },
  onPressed: () {
    // 处理按钮点击事件
  },
),

CustomIconButton 类

CustomIconButton 类表示一个具有可选文本和颜色的图标按钮。你可以使用此类来自定义 CustomProgressButton 图标按钮的外观。

class CustomIconButton {
  final String? text;
  final Widget? icon;
  final Color color;

  const CustomIconButton({
    this.text,
    this.icon,
    required this.color,
  });
}

实用函数

CustomProgressButton 包还提供了实用函数，帮助构建包含指定样式的图标、文本和间隔的 widget：

  • buildChildWithIcon: 构建一个包含图标和可选文本及指定间隔的 widget。
  • buildChildWithIC: 构建一个包含文本和图标及指定间隔的 widget。
  • buildText: 构建一个具有所提供文本和文本样式的文本 widget。

反馈与贡献

我们欢迎反馈和贡献！如果你遇到任何问题或有改进建议，请在 GitHub 上 提交一个 issue。

如果你想为项目做出贡献，随时可以打开一个 pull request。感谢你的帮助，让我们一起使 ProgressButton 更好！

许可证

该项目在 MIT 许可下发布。

示例代码

import 'package:flutter/material.dart';
import 'package:custom_progress_button/custom_progress_button.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '进度按钮',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '进度按钮示例'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  late ButtonState buttonState;

  [@override](/user/override)
  void initState() {
    buttonState = ButtonState.idle;
    super.initState();
  }

  void _incrementCounter() {
    Future.delayed(Duration(seconds: 2)).then((value) {
      setState(() {
        _counter++;
        if (buttonState == ButtonState.idle)
          buttonState = ButtonState.loading;
        else if (buttonState == ButtonState.loading)
          buttonState = ButtonState.fail;
        else if (buttonState == ButtonState.fail)
          buttonState = ButtonState.success;
        else if (buttonState == ButtonState.success)
          buttonState = ButtonState.idle;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '你已经按下了按钮多少次：',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            SizedBox(
              height: 20,
            ),
            CustomProgressButton(
              // 根据当前状态改变按钮文本
              stateWidgets: {
                ButtonState.success: Text(
                  '成功',
                  style: TextStyle(fontSize: 20),
                ),
                ButtonState.fail: Text(
                  '失败',
                  style: TextStyle(fontSize: 20),
                ),
                ButtonState.loading: Text(
                  '加载中',
                  style: TextStyle(fontSize: 20),
                ),
                ButtonState.idle: Text(
                  '空闲',
                  style: TextStyle(fontSize: 20),
                ),
              },
              // 在 ButtonShapeEnum = ButtonShapeEnum.flat 时使用
              // 此线会围绕按钮
              inLineBackgroundColor: Colors.red,
              // 根据当前按钮状态改变按钮颜色
              stateColors: {
                ButtonState.success: Colors.green,
                ButtonState.fail: Colors.redAccent,
                ButtonState.loading: Colors.red,
                ButtonState.idle: Colors.blue,
              },
              // 动画结束时调用
              onAnimationEnd: () {},
              // 按钮圆角半径
              radius: 100.0,
              // 按钮高度
              height: 70,
              // 按钮形状枚举为 elevated、outline 或 flat
              buttonShapeEnum: ButtonShapeEnum.flat,
              // 改变按钮默认阴影，
              elevation: 10.0,
              // 改变加载状态下进度与文本之间的对齐方式
              progressAlignment: MainAxisAlignment.center,
              // 启用/禁用点击按钮
              enable: true,
              // 按钮状态为 idle、loading、success、fail
              state: ButtonState.idle,
              // 添加填充
              padding: EdgeInsets.zero,
              // 添加按钮最大宽度
              maxWidth: 200.0,
              // 按钮默认最小宽度
              minWidth: 100.0,
              // 进度大小
              progressIndicatorSize: 10.0,
              // 改变按钮默认进度 widget， 默认是
              progressWidget: CircularProgressIndicator(),
              // 按钮按下事件
              onPressed: () {
                _incrementCounter();
              },
            )
          ],
        ),
      ),
    );
  }
}

更多关于Flutter自定义进度按钮插件custom_progress_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter自定义进度按钮插件custom_progress_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用custom_progress_button插件的一个详细代码案例。这个插件允许你创建一个自定义的进度按钮，非常适合在加载操作或文件上传等需要显示进度的场景中使用。

首先，你需要在pubspec.yaml文件中添加这个插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  custom_progress_button: ^0.0.3  # 请注意版本号，这里使用的是示例版本号，请检查最新版本

然后运行flutter pub get来安装依赖。

接下来，你可以在你的Dart文件中使用CustomProgressButton。下面是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:custom_progress_button/custom_progress_button.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isLoading = false;
  double progress = 0.0;

  void handleButtonPress() async {
    setState(() {
      isLoading = true;
      progress = 0.0;
    });

    // 模拟一个异步任务，例如文件上传或数据加载
    Future.delayed(Duration(seconds: 5), () {
      setState(() {
        isLoading = false;
        progress = 1.0; // 在实际使用中，你可能需要根据任务进度更新这个值
      });
    });

    // 在这里，你可以执行你的异步任务，并更新进度值
    for (int i = 0; i <= 10; i++) {
      Future.delayed(Duration(milliseconds: 500), () {
        setState(() {
          progress = i / 10.0;
        });
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Progress Button Demo'),
      ),
      body: Center(
        child: CustomProgressButton(
          child: Text('Upload'),
          isLoading: isLoading,
          progress: progress,
          onPressed: handleButtonPress,
          buttonColor: Colors.blue,
          progressColor: Colors.green,
          borderRadius: 25.0,
          elevation: 5.0,
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个自定义进度按钮。以下是代码的关键点：

  1. 依赖导入：我们导入了custom_progress_button包。
  2. 状态管理：我们使用了_MyHomePageState来管理按钮的加载状态和进度。
  3. 按钮配置：在CustomProgressButton中，我们设置了按钮的文本、加载状态、进度、点击回调、颜色、边框半径和阴影。
  4. 模拟异步任务：在handleButtonPress方法中，我们模拟了一个异步任务，并在任务执行期间更新进度值。

请根据你的实际需求调整进度更新的逻辑和按钮的样式。这个插件非常灵活，允许你高度自定义按钮的外观和行为。

回到顶部