Flutter加载过渡动画按钮插件loading_transition_button的使用

Loading Transition button

Getting Started（开始使用）

要使用此插件，在您的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  ...
  loading_transition_button: ^0.0.1

然后运行 flutter pub get 来获取该依赖。

How to use（如何使用）

在项目中导入该包：

import 'package:loading_transition_button/loading_transition_button.dart';

为了使用此小部件，您需要一个 LoadingButtonController 来处理不同的状态：

final _controller = LoadingButtonController();

当按钮被点击时，它会启动加载动画。您可以通过控制器来触发错误动画或停止加载动画。

示例代码如下：

LoadingButton(
    color: Colors.blue, // 按钮的颜色
    onSubmit: () => print('onSubmit'), // 提交事件
    controller: _controller, // 控制器
    errorColor: Colors.red, // 错误颜色
    transitionDuration: Duration(seconds: 1), // 动画持续时间
    child: Text(
        'Hit me!', // 按钮文字
        style: Theme.of(context)
            .textTheme
            .bodyText1!
            .copyWith(color: Colors.white),
    ),
),

如果需要导航到其他页面，可以调用 moveToScreen 方法：

_controller.moveToScreen(
    context: context, // 当前上下文
    page: SearchPage(), // 目标页面
    stopAnimation: true, // 是否停止当前动画
    navigationCallback: (route) => Navigator.of(context).push(route), // 导航回调
),

navigationCallback 将为您提供一个新的路由，您可以根据需要使用 push 或 replace 等方法进行导航。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 loading_transition_button 插件：

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

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

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);
  final _controller = LoadingButtonController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (BuildContext context) {
          return Scaffold(
            backgroundColor: Colors.white,
            body: Container(
              width: double.infinity,
              color: Colors.black26,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    height: 44,
                    width: 300,
                    child: LoadingButton(
                      color: Colors.blue, // 按钮背景颜色
                      onSubmit: () => print('onSubmit'), // 提交事件
                      controller: _controller, // 控制器
                      errorColor: Colors.red, // 错误状态颜色
                      transitionDuration: Duration(seconds: 1), // 动画持续时间
                      child: Text(
                        'Hit me!', // 按钮文字
                        style: Theme.of(context)
                            .textTheme
                            .bodyText1!
                            .copyWith(color: Colors.white),
                      ),
                    ),
                  ),
                  SizedBox(height: 100),
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      ElevatedButton(
                        onPressed: () => _controller.startLoadingAnimation(), // 开始加载动画
                        child: Text('Start'), // 按钮文字
                      ),
                      const SizedBox(width: 8),
                      ElevatedButton(
                        onPressed: () => _controller.stopLoadingAnimation(), // 停止加载动画
                        child: Text('Stop'), // 按钮文字
                      ),
                      const SizedBox(width: 8),
                      ElevatedButton(
                        onPressed: () => _controller.onError(), // 触发错误动画
                        child: Text('Error'), // 按钮文字
                      ),
                      const SizedBox(width: 8),
                      ElevatedButton(
                        onPressed: () => _controller.moveToScreen( // 跳转到下一个页面
                          context: context,
                          page: SearchPage(),
                          stopAnimation: true,
                          navigationCallback: (route) =>
                              Navigator.of(context).push(route),
                        ),
                        child: Text('Next screen'), // 按钮文字
                      )
                    ],
                  )
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

class SearchPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(context) {
    return Scaffold(
      backgroundColor: Colors.pinkAccent, // 页面背景颜色
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.pink, // 导航栏背景颜色
        title: TextField(
          decoration: InputDecoration.collapsed(hintText: "Search"), // 输入框提示文字
        ),
      ),
    );
  }
}