Flutter带加载器按钮插件button_with

Flutter带加载器按钮插件button_with_loader的使用

button_with_loader 是一个用于处理按钮点击事件及其不同状态（加载、错误、完成、初始）的插件。

使用示例

以下是一个简单的示例，展示如何在Flutter应用中使用 button_with_loader 插件。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ButtonExampleWidget(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 基础用法
            ButtonWithLoader(
              doneIndicatorWidget: const SizedBox(
                height: 15,
                width: 15,
                child: FittedBox(
                  child: Icon(
                    Icons.check,
                    color: Colors.white,
                  ),
                ),
              ),
              onTap: () async {
                // 模拟异步操作
                await Future.delayed(const Duration(seconds: 3));
              },
              label: "Test",
              loadingIndicatorWidget: const SizedBox(
                height: 15,
                width: 15,
                child: FittedBox(
                  child: CircularProgressIndicator(
                    strokeWidth: 5,
                    color: Colors.white,
                  ),
                ),
              ),
              decoration: BoxDecoration(
                  color: Colors.amber, borderRadius: BorderRadius.circular(20)),
            ),
            SizedBox(height: 10), // 添加间距
            
            // 使用Builder构建更复杂的UI
            ButtonWithLoader.builder(
              // autoToIdeal: false,
              onTap: () async {
                // 模拟异步操作
                await Future.delayed(const Duration(seconds: 3));
              },
              builder: (context, buttonState) {
                return Container(
                  height: 40,
                  width: 120,
                  padding:
                      const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.purple),
                      borderRadius: BorderRadius.circular(10)),
                  child: Center(
                    child: buttonState == ButtonState.loading
                        ? const FittedBox(
                            child: CircularProgressIndicator(
                            strokeWidth: 6,
                            color: Colors.purple,
                          ))
                        : Text(
                            buttonState == ButtonState.error
                                ? "Try again"
                                : buttonState == ButtonState.done
                                    ? "Submited"
                                    : "Submit",
                            style: TextStyle(color: Colors.purple),
                          ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

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

yibo5220 1楼•4 天前

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

当然，button_with_loader 是一个 Flutter 插件，用于在按钮点击时显示加载指示器。这对于需要异步操作（如网络请求）时向用户反馈状态非常有用。以下是如何在 Flutter 项目中使用 button_with_loader 插件的示例代码。

首先，确保你的 Flutter 项目已经添加了 button_with_loader 依赖。在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  button_with_loader: ^x.y.z  # 请使用最新版本号替换 x.y.z

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

接下来，你可以在你的 Dart 文件中使用这个插件。以下是一个完整的示例，展示如何在按钮点击时显示加载器：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Button with Loader Example'),
        ),
        body: Center(
          child: MyButtonWithLoader(),
        ),
      ),
    );
  }
}

class MyButtonWithLoader extends StatefulWidget {
  @override
  _MyButtonWithLoaderState createState() => _MyButtonWithLoaderState();
}

class _MyButtonWithLoaderState extends State<MyButtonWithLoader> {
  bool isLoading = false;

  void handleButtonClick() async {
    setState(() {
      isLoading = true;
    });

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

    setState(() {
      isLoading = false;
    });

    // 可以在这里处理异步操作完成后的逻辑，比如显示成功消息
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text('Operation Completed!'),
    ));
  }

  @override
  Widget build(BuildContext context) {
    return ButtonWithLoader(
      buttonText: 'Click Me',
      loadingText: 'Loading...',
      loaderColor: Colors.blue,
      onPressed: handleButtonClick,
      isLoading: isLoading,
    );
  }
}

在这个示例中：

我们创建了一个 MyApp 应用程序，它包含一个 Scaffold 和一个居中的 MyButtonWithLoader 组件。
MyButtonWithLoader 是一个有状态的组件，它维护一个 isLoading 状态，用于跟踪按钮是否处于加载状态。
handleButtonClick 方法在按钮被点击时调用。它首先将 isLoading 设置为 true，然后模拟一个异步操作（使用 Future.delayed）。异步操作完成后，它将 isLoading 设置回 false 并显示一个 SnackBar 消息。
ButtonWithLoader 组件接收多个参数，包括按钮文本、加载文本、加载器颜色、点击事件处理函数以及加载状态。

这个示例展示了如何使用 button_with_loader 插件在 Flutter 中创建带有加载器的按钮，并在按钮点击时显示加载指示器。