Flutter加载按钮美化插件nice_loading_button的使用

Flutter加载按钮美化插件nice_loading_button的使用

nice_loading_button 插件可以帮助你创建带有加载动画的漂亮按钮。它基于 ElevatedButton 小部件，因此你可以使用通常的参数，并且还具有一些额外的功能。

Demo

使用方法

Nice Loading Button with CircularProgress Widget

LoadingButton(
  height: 50,
  borderRadius: 8,
  animate: true,
  color: Colors.indigo,
  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, buttonState) async {
    if (buttonState == ButtonState.idle) {
      startLoading();
      // Do something here
      await Future.delayed(const Duration(seconds: 5));
      stopLoading();
    }
  },
)

Nice Loading Button with Custom Text

LoadingButton(
  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();
      // Do something here
      await Future.delayed(const Duration(seconds: 5));
      stopLoading();
    }
  },
)

Nice Loading Button with Custom Loading

LoadingButton(
  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();
      // Do something here
      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: 反向动画曲线。

完整示例代码

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:nice_loading_button/nice_loading_button.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Nice Loading Button with CircularProgress widget
            LoadingButton(
              height: 50,
              borderRadius: 8,
              animate: true,
              color: Colors.indigo,
              width: MediaQuery.of(context).size.width * 0.44,
              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, buttonState) async {
                if (buttonState == ButtonState.idle) {
                  startLoading();
                  // Do something here
                  await Future.delayed(const Duration(seconds: 5));
                  stopLoading();
                }
              },
            ),
            const SizedBox(height: 50),
            // Nice Loading Button with custom Text
            LoadingButton(
              height: 50,
              borderRadius: 8,
              roundLoadingShape: false,
              color: Colors.red,
              width: MediaQuery.of(context).size.width * 0.44,
              minWidth: MediaQuery.of(context).size.width * 0.29,
              loader: const Text("Logging in..."),
              child: const Text("Login"),
              onTap: (startLoading, stopLoading, buttonState) async {
                if (buttonState == ButtonState.idle) {
                  startLoading();
                  // Do something here
                  await Future.delayed(const Duration(seconds: 5));
                  stopLoading();
                }
              },
            ),
            const SizedBox(height: 50),
            // Nice Loading Button with Custom Loading
            LoadingButton(
              height: 50,
              borderRadius: 8,
              animate: true,
              color: Colors.cyan,
              width: MediaQuery.of(context).size.width * 0.44,
              loader: Container(
                padding: const EdgeInsets.all(10),
                child: const Center(
                  child: SpinKitDoubleBounce(
                    color: Colors.white,
                  ),
                ),
              ),
              child: const Text("Login"),
              onTap: (startLoading, stopLoading, buttonState) async {
                if (buttonState == ButtonState.idle) {
                  startLoading();
                  // Do something here
                  await Future.delayed(const Duration(seconds: 5));
                  stopLoading();
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}