Flutter加载状态按钮插件loading_status

Flutter加载状态按钮插件loading_status_button的使用

loading_status_button

这是一个Flutter包，允许你管理按钮的状态，同时提供动画效果。除了在按钮上添加加载动画外，你还可以通过一些逻辑提供视觉反馈，如error或success状态，并且可以启用或禁用按钮。

特性

LoadingStatusButton 是一个支持多种状态的 Flutter 包。它允许你控制按钮的状态，包括loading、success和error状态，还可以通过enable和disable来启用或禁用按钮。借助平滑且可自定义的动画效果，它非常适合在异步操作期间需要动态视觉反馈的界面。

开始使用

首先，在你的项目中添加依赖项：

$ flutter pub add loading_status_button

或者在 pubspec.yaml 文件中添加依赖项：

dependencies:
  loading_status_button:

使用方法

以下是一个简单的示例，更复杂的示例可以在 /example 文件夹中找到。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Loading Status Button',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({super.key});
  
  final LoadingStatusButtonController controller =
      LoadingStatusButtonController(initialStatus: StatusButton.enable);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              LoadingStatusButtonWidget(
                callback: () async => await fakeCallSuccess(),
                controller: controller,
                buttonColor: Colors.black,
                loadingColor: Colors.white,
                succesIconColor: Colors.green,
                errorIconColor: Colors.red,
                widget: const Text(
                  'Button Success',
                  style: TextStyle(color: Colors.white, fontSize: 17.0),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  fakeCallSuccess() async {
    await controller.setStatus(StatusButton.loading);
    // 模拟数据获取
    await Future.delayed(const Duration(seconds: 5));
    await controller.setStatus(StatusButton.success);
    await controller.setStatus(StatusButton.enable); // 或者执行其他操作，例如在成功后导航到另一个页面
  }
}

如果你想要从内存中移除控制器，我们可以使用从 ChangeNotifier 继承的方法，即 dispose 方法：

controller.dispose();

更多复杂示例

以下是一个更复杂的示例，展示了如何根据表单验证状态启用或禁用按钮：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Loading Status Button',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({super.key});
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final LoadingStatusButtonController controller0 =
      LoadingStatusButtonController(initialStatus: StatusButton.enable);
  final LoadingStatusButtonController controller1 =
      LoadingStatusButtonController(initialStatus: StatusButton.enable);
  final LoadingStatusButtonController controller3 =
      LoadingStatusButtonController(initialStatus: StatusButton.disable);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              LoadingStatusButtonWidget(
                callback: () async => await fakeCallSuccess(),
                controller: controller0,
                buttonColor: Colors.black,
                loadingColor: Colors.white,
                succesIconColor: Colors.green,
                errorIconColor: Colors.red,
                widget: const Text(
                  'Button Success',
                  style: TextStyle(color: Colors.white, fontSize: 17.0),
                ),
              ),
              LoadingStatusButtonWidget(
                callback: () async => await fakeCallError(),
                controller: controller1,
                buttonColor: Colors.black,
                loadingColor: Colors.white,
                succesIconColor: Colors.green,
                errorIconColor: Colors.red,
                widget: const Text(
                  'Button Error',
                  style: TextStyle(color: Colors.white, fontSize: 17.0),
                ),
              ),
              Form(
                key: _formKey,
                child: Column(
                  children: [
                    Container(
                      margin: const EdgeInsets.only(bottom: 16.0),
                      width: 200,
                      height: 40.0,
                      child: TextFormField(
                        onChanged: (value) async {
                          if (value.length >= 4) {
                            await controller3.setStatus(StatusButton.enable);
                          } else {
                            await controller3.setStatus(StatusButton.disable);
                          }
                        },
                        validator: (value) => value!.length >= 4
                            ? null
                            : '插入长度大于等于4个字符的文本',
                        decoration: const InputDecoration(
                          hintText: '输入文本',
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.all(
                              Radius.circular(6),
                            ),
                          ),
                        ),
                      ),
                    ),
                    LoadingStatusButtonWidget(
                      callback: () async {
                        if (_formKey.currentState!.validate()) {
                          await controller3.setStatus(StatusButton.loading);
                          // 模拟调用
                          await Future.delayed(const Duration(seconds: 5));
                          await controller3.setStatus(StatusButton.success);
                          await controller3.setStatus(StatusButton.enable);
                        }
                      },
                      controller: controller3,
                      buttonColor: Colors.black,
                      loadingColor: Colors.white,
                      succesIconColor: Colors.green,
                      errorIconColor: Colors.red,
                      widget: const Text(
                        'Button disable validate',
                        style: TextStyle(color: Colors.white, fontSize: 17.0),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  fakeCallSuccess() async {
    await controller0.setStatus(StatusButton.loading);
    // 模拟数据获取
    await Future.delayed(const Duration(seconds: 5));
    await controller0.setStatus(StatusButton.success);
    await controller0.setStatus(StatusButton.enable);
  }

  fakeCallError() async {
    await controller1.setStatus(StatusButton.loading);
    // 模拟数据获取
    await Future.delayed(const Duration(seconds: 5));
    await controller1.setStatus(StatusButton.error);
    await controller1.setStatus(StatusButton.enable);
  }
}

更多关于Flutter加载状态按钮插件loading_status_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

zlyuanteng 1楼

更多关于Flutter加载状态按钮插件loading_status_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter中使用loading_status_button插件的示例代码。这个插件允许你创建一个按钮，该按钮可以在普通状态、加载状态和错误状态之间切换。

首先，确保你已经在pubspec.yaml文件中添加了loading_status_button依赖：

dependencies:
  flutter:
    sdk: flutter
  loading_status_button: ^0.5.0  # 请检查最新版本号

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

接下来，你可以在你的Flutter应用中如下使用LoadingStatusButton：

import 'package:flutter/material.dart';
import 'package:loading_status_button/loading_status_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> {
  LoadingStatus _loadingStatus = LoadingStatus.idle;
  String _errorText = "";

  void _onPressed() async {
    setState(() {
      _loadingStatus = LoadingStatus.loading;
      _errorText = "";
    });

    // 模拟一个异步操作，例如网络请求
    await Future.delayed(Duration(seconds: 2));

    // 根据模拟结果更新状态
    setState(() {
      _loadingStatus = LoadingStatus.success;
      // 如果需要模拟错误状态，可以使用下面的代码代替上面的成功状态代码
      // _loadingStatus = LoadingStatus.error;
      // _errorText = "Something went wrong!";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loading Status Button Demo'),
      ),
      body: Center(
        child: LoadingStatusButton<void>(
          status: _loadingStatus,
          onPressed: _onPressed,
          idleWidget: Text('Click Me'),
          loadingWidget: CircularProgressIndicator(),
          successWidget: Text('Success!'),
          errorWidget: Text(_errorText),
          animationDuration: Duration(milliseconds: 300),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个使用LoadingStatusButton的按钮。按钮的状态根据点击事件进行切换：

初始状态为idle（空闲），显示文本“Click Me”。
当按钮被点击时，状态变为loading（加载），显示一个CircularProgressIndicator。
2秒后，状态变为success（成功），显示文本“Success!”。
如果需要模拟错误状态，可以取消注释相关代码，状态将变为error（错误），并显示错误文本。

这个插件提供了灵活的方式来处理按钮的不同状态，非常适合用于提交表单、加载数据等场景。