Flutter圆角加载按钮插件rounded_loading_button_plus的使用

rounded_loading_button_plus

RoundedLoadingButton 是一个Flutter包，它以简单的实现提供了带有成功和错误动画的动画加载按钮。

安装 Installation

在您的 pubspec.yaml 文件中添加以下内容：

dependencies:
    rounded_loading_button_plus: ^2.0.8

使用 Usage

导入 Import

import 'package:rounded_loading_button_plus/rounded_loading_button_plus.dart';

简单实现 Simple Implementation

首先，创建一个 RoundedLoadingButtonController 控制器实例，并定义点击按钮后执行的方法。然后，在UI中使用 RoundedLoadingButton 组件并将其控制器和点击事件方法传入即可。

final RoundedLoadingButtonController _btnController = RoundedLoadingButtonController();

void _doSomething() async {
  Timer(Duration(seconds: 3), () {
    _btnController.success();
  });
}

RoundedLoadingButton(
  child: Text('Tap me!', style: TextStyle(color: Colors.white)),
  controller: _btnController,
  onPressed: _doSomething,
)

配置属性 Configurable Properties

RoundedLoadingButton 提供了多种可配置属性，包括但不限于：

• duration - 按钮动画的持续时间
• loaderSize - CircularProgressIndicator 的大小
• animateOnTap - 是否在点击事件触发时启动加载动画
• resetAfterDuration - 在指定的持续时间后重置动画，默认为15秒
• errorColor - 按钮处于错误状态时的颜色
• successColor - 按钮处于成功状态时的颜色
• successIcon - 成功状态下的图标
• failedIcon - 错误状态下的图标

示例代码 Example Code

下面是一个完整的示例代码，展示了如何在应用中集成 RoundedLoadingButton 并配置多个按钮以及控制它们的状态（如：重置、错误、成功）。

import 'dart:async';

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

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  MyHomePage();

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final RoundedLoadingButtonController _btnController1 =
      RoundedLoadingButtonController();

  final RoundedLoadingButtonController _btnController2 =
      RoundedLoadingButtonController();

  void _doSomething(RoundedLoadingButtonController controller) async {
    Timer(Duration(seconds: 10), () {
      controller.success();
    });
  }

  @override
  void initState() {
    super.initState();
    _btnController1.stateStream.listen((value) {
      print(value);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rounded Loading Button Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RoundedLoadingButton(
              successIcon: Icons.cloud,
              failedIcon: Icons.cottage,
              child: Text('Tap me!', style: TextStyle(color: Colors.white)),
              controller: _btnController1,
              onPressed: () => _doSomething(_btnController1),
            ),
            SizedBox(height: 50),
            RoundedLoadingButton(
              color: Colors.amber,
              successColor: Colors.amber,
              controller: _btnController2,
              onPressed: () => _doSomething(_btnController2),
              valueColor: Colors.black,
              borderRadius: 10,
              child: Text('''
Tap me i have a huge text''', style: TextStyle(color: Colors.white)),
            ),
            SizedBox(height: 50),
            OutlinedButton(
              style: ButtonStyle(
                shape: MaterialStateProperty.all(RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30))),
              ),
              onPressed: () {
                _btnController1.reset();
                _btnController2.reset();
              },
              child: Text('Reset'),
            ),
            SizedBox(height: 20),
            OutlinedButton(
              style: ButtonStyle(
                shape: MaterialStateProperty.all(RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30))),
              ),
              onPressed: () {
                _btnController1.error();
                _btnController2.error();
              },
              child: Text('Error'),
            ),
            SizedBox(height: 20),
            OutlinedButton(
              style: ButtonStyle(
                shape: MaterialStateProperty.all(RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30))),
              ),
              onPressed: () {
                _btnController1.success();
                _btnController2.success();
                print(_btnController1.currentState);
              },
              child: Text('Success'),
            )
          ],
        ),
      ),
    );
  }
}

此示例代码创建了一个包含两个 RoundedLoadingButton 和三个 OutlinedButton 的页面。两个 RoundedLoadingButton 分别用于展示不同配置下的按钮效果；而三个 OutlinedButton 则分别用于重置所有按钮状态、设置所有按钮为错误状态、设置所有按钮为成功状态。