Flutter加载按钮插件easy_loading_button的使用

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

Flutter加载按钮插件easy_loading_button的使用

插件简介

easy_loading_button 是一个简单、易于使用且可定制的进度/加载 Material Flutter 按钮，支持多种按钮样式（elevated, outlined, text）。它提供了动画效果，当按钮被点击时，会显示加载状态。

easy-loading-button

你也可以在 DartPad 上尝试演示。

开始使用

依赖安装

  1. 添加依赖

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

    dependencies:
  easy_loading_button: ^0.3.2

  2. 安装依赖

    使用命令行安装依赖：

    $ flutter pub get

    或者你的编辑器可能支持 flutter pub get。

  3. 导入包

    在 Dart 代码中导入：

    import 'package:easy_loading_button/easy_loading_button.dart';

使用方法

EasyButton 可以通过设置不同的属性来自定义按钮的外观和行为。以下是完整的示例代码，展示了如何使用 EasyButton 创建不同类型的按钮。

完整示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Easy Loading Button',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ExamplePage(title: 'Easy Loading Button'),
    );
  }
}

class ExamplePage extends StatefulWidget {
  const ExamplePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  Future<void> onButtonPressed() async {
    await Future.delayed(const Duration(milliseconds: 3000), () => 42);

    // After [onPressed], it will trigger animation running backwards, from end to beginning
    return () {
      // Optional returns is returning a VoidCallback that will be called
      // after the animation is stopped at the beginning.
      // A best practice would be to do time-consuming task in [onPressed],
      // and do page navigation in the returned VoidCallback.
      // So that user won't missed out the reverse animation.
    };
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const SizedBox(height: 15),
            const Text('Elevated button'),
            const SizedBox(height: 5),
            EasyButton(
              idleStateWidget: const Text(
                'Elevated button',
                style: TextStyle(color: Colors.white),
              ),
              loadingStateWidget: const CircularProgressIndicator(
                strokeWidth: 3.0,
                valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
              ),
              useEqualLoadingStateWidgetDimension: true,
              useWidthAnimation: false,
              width: 150.0,
              height: 40.0,
              borderRadius: 4.0,
              elevation: 2.0,
              contentGap: 6.0,
              buttonColor: Colors.blueAccent,
              onPressed: onButtonPressed,
            ),
            const SizedBox(height: 15),
            const Text('Elevated button (width animated)'),
            const SizedBox(height: 5),
            EasyButton(
              idleStateWidget: const Text(
                'Elevated button',
                style: TextStyle(color: Colors.white),
              ),
              loadingStateWidget: const CircularProgressIndicator(
                strokeWidth: 3.0,
                valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
              ),
              useWidthAnimation: true,
              useEqualLoadingStateWidgetDimension: true,
              width: 150.0,
              height: 40.0,
              borderRadius: 4.0,
              contentGap: 6.0,
              buttonColor: Colors.blueAccent,
              onPressed: onButtonPressed,
            ),
            const SizedBox(height: 15),
            const Text('Outlined button'),
            const SizedBox(height: 5),
            EasyButton(
              type: EasyButtonType.outlined,
              idleStateWidget: const Text(
                'Outlined button',
                style: TextStyle(color: Colors.blueAccent),
              ),
              loadingStateWidget: const CircularProgressIndicator(
                strokeWidth: 3.0,
                valueColor: AlwaysStoppedAnimation<Color>(Colors.blueAccent),
              ),
              useEqualLoadingStateWidgetDimension: true,
              useWidthAnimation: false,
              width: 150.0,
              height: 40.0,
              borderRadius: 4.0,
              contentGap: 6.0,
              onPressed: onButtonPressed,
            ),
            const SizedBox(height: 15),
            const Text('Outlined button (width animated)'),
            const SizedBox(height: 5),
            EasyButton(
              type: EasyButtonType.outlined,
              idleStateWidget: const Text(
                'Outlined button',
                style: TextStyle(color: Colors.blueAccent),
              ),
              loadingStateWidget: const CircularProgressIndicator(
                strokeWidth: 3.0,
                valueColor: AlwaysStoppedAnimation<Color>(Colors.blueAccent),
              ),
              useWidthAnimation: true,
              useEqualLoadingStateWidgetDimension: true,
              width: 150.0,
              height: 40.0,
              borderRadius: 4.0,
              contentGap: 6.0,
              onPressed: onButtonPressed,
            ),
            const SizedBox(height: 15),
            const Text('Text button'),
            const SizedBox(height: 5),
            EasyButton(
              type: EasyButtonType.text,
              idleStateWidget: const Text(
                'Text button',
                style: TextStyle(color: Colors.blueAccent),
              ),
              loadingStateWidget: const CircularProgressIndicator(
                strokeWidth: 3.0,
                valueColor: AlwaysStoppedAnimation<Color>(Colors.blueAccent),
              ),
              useEqualLoadingStateWidgetDimension: true,
              useWidthAnimation: false,
              width: 150.0,
              height: 28.0,
              borderRadius: 4.0,
              onPressed: onButtonPressed,
            ),
            const SizedBox(height: 15),
            const Text('Fullwidth elevated button'),
            const SizedBox(height: 5),
            EasyButton(
              idleStateWidget: const Text(
                'Fullwidth elevated button',
                style: TextStyle(color: Colors.white),
              ),
              loadingStateWidget: const CircularProgressIndicator(
                strokeWidth: 3.0,
                valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
              ),
              useEqualLoadingStateWidgetDimension: true,
              useWidthAnimation: false,
              width: double.infinity,
              height: 40.0,
              contentGap: 6.0,
              buttonColor: Colors.blueAccent,
              onPressed: onButtonPressed,
            ),
            const SizedBox(height: 15),
            const Text('Fullwidth elevated button (width animated)'),
            const SizedBox(height: 5),
            EasyButton(
              idleStateWidget: const Text(
                'Fullwidth elevated button',
                style: TextStyle(color: Colors.white),
              ),
              loadingStateWidget: const CircularProgressIndicator(
                strokeWidth: 3.0,
                valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
              ),
              useWidthAnimation: true,
              useEqualLoadingStateWidgetDimension: true,
              width: double.infinity,
              height: 40.0,
              contentGap: 6.0,
              buttonColor: Colors.blueAccent,
              onPressed: onButtonPressed,
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

  • idleStateWidget: 按钮处于空闲状态时的内容。
  • loadingStateWidget: 按钮处于加载状态时的内容。
  • type: 按钮类型，支持 elevated, outlined, text。
  • useWidthAnimation: 是否启用宽度动画，默认为 true。
  • useEqualLoadingStateWidgetDimension: 是否强制加载状态的小部件具有相同的尺寸，默认为 true。
  • width: 按钮的宽度，默认为 double.infinity。
  • height: 按钮的高度，默认为 40.0。
  • contentGap: 按钮内容之间的间距，默认为 0.0。
  • borderRadius: 按钮的圆角半径，默认为 0.0。
  • elevation: 按钮的阴影高度，默认为 0.0，仅适用于 elevated 类型。
  • buttonColor: 按钮的颜色，默认为 Colors.blueAccent。
  • onPressed: 按钮点击事件处理函数。

总结

easy_loading_button 提供了简单易用的加载按钮组件，适合在需要展示加载状态的场景下使用。你可以根据需求调整按钮的样式和行为，以满足应用的设计要求。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用easy_loading_button插件的一个示例。easy_loading_button是一个用于显示加载状态的按钮插件，非常适合在用户触发某些耗时pub操作时spec显示.加载yaml动画。文件中 添加 这个首先插件，的你依赖需要在：你的

  flutter:
    sdk: flutter
  easy_loading_button: ^最新版本号  # 请替换为最新版本号

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

接下来，你可以在你的Flutter项目中使用这个按钮。下面是一个完整的示例，展示了如何使用EasyLoadingButton来在用户点击按钮时显示加载状态。

import 'package:flutter/material.dart';
import 'package:easy_loading_button/easy_loading_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;

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

    // 模拟耗时操作
    await Future.delayed(Duration(seconds: 2));

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

    // 这里可以添加操作完成后的逻辑，比如显示一个Snackbar
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('操作完成！')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Easy Loading Button Demo'),
      ),
      body: Center(
        child: EasyLoadingButton(
          type: EasyLoadingButtonType.text,  // 或者使用 EasyLoadingButtonType.icon
          text: {
            'loading': '加载中...',
            'idle': '点击加载',
            'success': '加载成功',
            'error': '加载失败',
          },
          color: Colors.blue,
          loadingColor: Colors.grey[300]!.withOpacity(0.5),
          successColor: Colors.green,
          errorColor: Colors.red,
          onPress: () {
            handleButtonPress();
          },
          isLoading: isLoading,
          isSuccess: false,  // 只有在加载完成后设置为true来显示成功状态
          isError: false,    // 只有在加载完成后设置为true来显示错误状态
        ),
      ),
    );
  }
}

在这个示例中：

  1. EasyLoadingButton的type属性设置为EasyLoadingButtonType.text，你也可以选择EasyLoadingButtonType.icon来显示图标。
  2. text属性是一个映射，定义了不同状态下的按钮文本。
  3. color、loadingColor、successColor和errorColor属性分别定义了按钮在不同状态下的颜色。
  4. onPress属性是一个回调函数，当用户点击按钮时会调用它。
  5. isLoading、isSuccess和isError属性分别控制按钮的加载、成功和错误状态。

在handleButtonPress函数中，我们模拟了一个耗时操作，使用Future.delayed来延迟2秒，然后更新按钮的状态。加载完成后，你可以显示一个Snackbar来通知用户操作已完成。

请确保你已经安装了最新版本的easy_loading_button插件，并根据需要调整代码。

回到顶部