Flutter加载按钮功能插件loading_btn的使用

Loading Btn 是一个用于在Flutter应用中创建带动画加载效果按钮的插件。通过该插件，你可以轻松实现各种样式的加载按钮，并且可以根据需求进行自定义。

获取开始

loading_btn 包可以帮助你为按钮添加漂亮的加载动画，并允许自定义加载器。它基于 ElevatedButton 小部件构建，因此可以使用常规参数并添加一些额外的功能。

示例演示

使用方法

带圆形进度条的加载按钮

以下是一个带有 CircularProgressIndicator 的加载按钮示例：

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

class LoadingButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Loading Button Example')),
      body: Center(
        child: LoadingBtn(
          height: 50,
          borderRadius: 8,
          animate: true,
          color: Colors.green,
          width: MediaQuery.of(context).size.width * 0.45,
          loader: Container(
            padding: const EdgeInsets.all(10),
            width: 40,
            height: 40,
            child: const CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
            ),
          ),
          child: const Text("Login"),
          onTap: (startLoading, stopLoading, btnState) async {
            if (btnState == ButtonState.idle) {
              startLoading();
              // 调用网络API
              await Future.delayed(const Duration(seconds: 5));
              stopLoading();
            }
          },
        ),
      ),
    );
  }
}

带自定义文本的加载按钮

以下是一个带有自定义文本的加载按钮示例：

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

class CustomTextLoadingButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Custom Text Loading Button Example')),
      body: Center(
        child: LoadingBtn(
          height: 50,
          borderRadius: 8,
          roundLoadingShape: false,
          color: Colors.blueAccent,
          width: MediaQuery.of(context).size.width * 0.45,
          minWidth: MediaQuery.of(context).size.width * 0.30,
          loader: const Text("Loading..."),
          child: const Text("Login"),
          onTap: (startLoading, stopLoading, btnState) async {
            if (btnState == ButtonState.idle) {
              startLoading();
              // 调用网络API
              await Future.delayed(const Duration(seconds: 5));
              stopLoading();
            }
          },
        ),
      ),
    );
  }
}

带自定义加载动画的加载按钮

以下是一个带有自定义加载动画（如 SpinKitDoubleBounce）的加载按钮示例：

import 'package:flutter/material.dart';
import 'package:loading_btn/loading_btn.dart';
import 'package:spin_kit/spin_kit.dart'; // 需要导入 SpinKit 库

class CustomLoadingAnimationButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Custom Loading Animation Button Example')),
      body: Center(
        child: LoadingBtn(
          height: 50,
          borderRadius: 8,
          animate: true,
          color: Colors.deepOrange,
          width: MediaQuery.of(context).size.width * 0.45,
          loader: Container(
            padding: const EdgeInsets.all(10),
            child: const Center(
              child: SpinKitDoubleBounce(
                color: Colors.white,
              ),
            ),
          ),
          child: const Text("Login"),
          onTap: (startLoading, stopLoading, btnState) async {
            if (btnState == ButtonState.idle) {
              startLoading();
              // 调用网络API
              await Future.delayed(const Duration(seconds: 5));
              stopLoading();
            }
          },
        ),
      ),
    );
  }
}

属性说明

• animate：默认值为 false，是否在点击按钮时使用宽度进行动画。
• roundLoadingShape：默认值为 true，在忙碌/加载状态下创建圆形按钮。
• width：按钮在空闲状态下的宽度。
• minWidth：按钮在忙碌/加载状态下的最小宽度，默认值等于高度以创建完全圆形的加载按钮。
• borderRadius：按钮的圆角半径。
• borderSide：给按钮提供边框颜色和宽度。
• child：按钮在空闲状态下的内容。
• loader：按钮在忙碌/加载状态下的内容。
• onTap：(startLoading, stopLoading, btnState)：当点击按钮时调用的函数。
• duration：动画的持续时间。
• curve：动画的曲线。
• reverseCurve：反向动画的曲线。

以上是 loading_btn 插件的基本使用方法和示例代码，希望对你的Flutter开发有所帮助！