Flutter按钮样式插件argon_buttons_flutter的使用

Flutter按钮样式插件argon_buttons_flutter的使用

创建美观的加载和计时按钮可以使用Argon Buttons。无需担心处理动画或计时，因为该插件会为你处理所有复杂的工作。

开始使用

你可以使用两个小部件，ArgonButton 和 ArgonTimerButton。ArgonButton 帮助你创建按钮中的加载动画。ArgonTimerButton 帮助你创建计时按钮，可用于处理类似“重新发送OTP” => “等待10秒”的情况。

示例


ArgonButton

ArgonButton 实质上是带有增强功能的RaisedButton。这意味着你可以使用与RaisedButton相同的常用参数，并添加一些额外的功能。

示例代码

ArgonButton(
  height: 50,
  width: 350,
  borderRadius: 5.0,
  color: Color(0xFF7866FE),
  child: Text(
    "Continue",
    style: TextStyle(
        color: Colors.white,
        fontSize: 18,
        fontWeight: FontWeight.w700
    ),
  ),
  loader: Container(
    padding: EdgeInsets.all(10),
    child: SpinKitRotatingCircle(
      color: Colors.white,
      // size: loaderWidth,
    ),
  ),
  onTap: (startLoading, stopLoading, btnState) {
    if (btnState == ButtonState.Idle) {
      startLoading();
      // 模拟网络请求
      Future.delayed(Duration(seconds: 2), () {
        stopLoading();
      });
    }
  },
)

这将创建一个按钮，当需要进行网络请求或其他耗时任务时，它会动画化为一个圆形加载器。 这里我使用了SpinKit来在按钮内显示旋转加载器。你可以根据自己的喜好选择其他加载器。

我们通过在onTap函数中传递的参数来动画化按钮。onTap接收三个参数：startLoading()，stopLoading() 和 btnState。

你可以调用startLoading函数将按钮状态更改为Busy，这将使按钮动画化并显示加载器。当你调用stopLoading函数时，按钮将恢复到普通（空闲）状态。在第三个参数btnState中，你可以实际检查按钮的当前状态。

使用onTap

ArgonButton(
  height: 50,
  width: 350,
  borderRadius: 5.0,
  color: Color(0xFF7866FE),
  child: Text(
    "Continue",
    style: TextStyle(
        color: Colors.white,
        fontSize: 18,
        fontWeight: FontWeight.w700
    ),
  ),
  loader: Container(
    padding: EdgeInsets.all(10),
    child: SpinKitRotatingCircle(
      color: Colors.white,
      // size: loaderWidth,
    ),
  ),
  onTap: (startLoading, stopLoading, btnState) {
    if (btnState == ButtonState.Idle) {
      startLoading();
      // 模拟网络请求
      Future.delayed(Duration(seconds: 2), () {
        stopLoading();
      });
    }
  },
)

属性

  • roundLoadingShape（默认值为true）：设置为true时，它会使用边框半径在忙/加载状态下创建一个圆形按钮
  • width：空闲状态下按钮的宽度
  • minWidth：忙/加载状态下按钮的宽度。默认值等于高度以创建完全圆形的加载按钮
  • borderRadius：按钮的边框半径
  • borderSide：边框颜色和宽度
  • child：空闲状态下按钮的内容
  • loader：忙/加载状态下按钮的内容
  • onTap：(startLoading, stopLoading, btnState)：点击按钮时调用的函数

ArgonTimerButton

ArgonTimerButton 类似于ArgonButton，但它还具有作为计时按钮的功能。你不仅可以给它一个初始计时值，还可以从onTap函数中重启计时器。

示例代码

ArgonTimerButton(
  initialTimer: 10, // 可选
  height: 50,
  width: MediaQuery.of(context).size.width * 0.45,
  minWidth: MediaQuery.of(context).size.width * 0.30,
  color: Color(0xFF7866FE),
  borderRadius: 5.0,
  child: Text(
    "Resend OTP",
    style: TextStyle(
        color: Colors.black,
        fontSize: 18,
        fontWeight: FontWeight.w700
    ),
  ),
  loader: (timeLeft) {
    return Text(
      "Wait | $timeLeft",
      style: TextStyle(
          color: Colors.black,
          fontSize: 18,
          fontWeight: FontWeight.w700
      ),
    );
  },
  onTap: (startTimer, btnState) {
    if (btnState == ButtonState.Idle) {
      startTimer(20);
    }
  },
),

onTap函数接收一个startTimer(int count)函数和一个btnState变量。你可以使用startTimer函数并传递新的倒计时值来重启计数器。这对于重新发送OTP按钮非常有用，每次点击后，你希望将计数器重置为新值。

属性

  • initialTimer（可选）：构建小部件时开始计时的初始值
  • roundLoadingShape（默认值为true）：设置为true时，它会使用边框半径在忙/加载状态下创建一个圆形按钮
  • width：空闲状态下按钮的宽度
  • minWidth：忙/加载状态下按钮的宽度。默认值等于高度以创建完全圆形的加载按钮
  • borderRadius：按钮的边框半径
  • borderSide：边框颜色和宽度
  • child：空闲状态下按钮的内容
  • loader：接收剩余时间作为参数并返回忙/加载状态下按钮内容的函数
  • onTap：(startTimer, btnState)：点击按钮时调用的函数

其他属性

  • duration：动画持续时间
  • curve：动画曲线
  • reverseCurve：反向动画曲线

完整示例

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ArgonButtonExample(),
    );
  }
}

class ArgonButtonExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ArgonTimerButton(
              height: 50,
              width: MediaQuery.of(context).size.width * 0.45,
              minWidth: MediaQuery.of(context).size.width * 0.30,
              highlightColor: Colors.transparent,
              highlightElevation: 0,
              roundLoadingShape: false,
              onTap: (startTimer, btnState) {
                if (btnState == ButtonState.Idle) {
                  startTimer(5);
                }
              },
              child: Text(
                "Resend OTP",
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 18,
                    fontWeight: FontWeight.w700),
              ),
              loader: (timeLeft) {
                return Text(
                  "Wait | $timeLeft",
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 18,
                      fontWeight: FontWeight.w700),
                );
              },
              borderRadius: 5.0,
              color: Colors.transparent,
              elevation: 0,
              borderSide: BorderSide(color: Colors.black, width: 1.5),
            ),
            SizedBox(height: 50),
            ArgonTimerButton(
              height: 50,
              width: MediaQuery.of(context).size.width * 0.45,
              onTap: (startTimer, btnState) {
                if (btnState == ButtonState.Idle) {
                  startTimer(5);
                }
              },
              child: Text(
                "Resend OTP",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.w700),
              ),
              loader: (timeLeft) {
                return Container(
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(50)),
                  margin: EdgeInsets.all(5),
                  alignment: Alignment.center,
                  width: 40,
                  height: 40,
                  child: Text(
                    "$timeLeft",
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
                  ),
                );
              },
              borderRadius: 5.0,
              color: Color(0xFF7866FE),
            ),
            SizedBox(height: 50),
            ArgonTimerButton(
              height: 50,
              width: MediaQuery.of(context).size.width * 0.45,
              minWidth: MediaQuery.of(context).size.width * 0.30,
              highlightColor: Colors.transparent,
              highlightElevation: 0,
              roundLoadingShape: false,
              splashColor: Colors.transparent,
              onTap: (startTimer, btnState) {
                if (btnState == ButtonState.Idle) {
                  startTimer(5);
                }
              },
              child: Text(
                "Resend OTP",
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 18,
                    fontWeight: FontWeight.w700),
              ),
              loader: (timeLeft) {
                return Text(
                  "Wait | $timeLeft",
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 18,
                      fontWeight: FontWeight.w700),
                );
              },
              borderRadius: 5.0,
              color: Colors.transparent,
              elevation: 0,
            ),
            SizedBox(height: 50),
            Container(
              margin: EdgeInsets.fromLTRB(40, 0, 40, 0),
              height: 1,
              color: Colors.black,
            ),
            SizedBox(height: 50),
            ArgonButton(
              height: 50,
              roundLoadingShape: true,
              width: MediaQuery.of(context).size.width * 0.45,
              onTap: (startLoading, stopLoading, btnState) {
                if (btnState == ButtonState.Idle) {
                  startLoading();
                } else {
                  stopLoading();
                }
              },
              child: Text(
                "SignUp",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.w700),
              ),
              loader: Container(
                padding: EdgeInsets.all(10),
                child: SpinKitRotatingCircle(
                  color: Colors.white,
                  // size: loaderWidth,
                ),
              ),
              borderRadius: 5.0,
              color: Color(0xFFfb4747),
            ),
            SizedBox(height: 50),
            ArgonButton(
              height: 50,
              roundLoadingShape: false,
              width: MediaQuery.of(context).size.width * 0.45,
              minWidth: MediaQuery.of(context).size.width * 0.30,
              onTap: (startLoading, stopLoading, btnState) {
                if (btnState == ButtonState.Idle) {
                  startLoading();
                } else {
                  stopLoading();
                }
              },
              child: Text(
                "Continue",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.w700),
              ),
              loader: Text(
                "Loading...",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.w700),
              ),
              borderRadius: 5.0,
              color: Color(0xFF7866FE),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何使用 argon_buttons_flutter 插件来创建自定义按钮样式的 Flutter 代码示例。argon_buttons_flutter 插件提供了一系列预定义的按钮样式，可以轻松地应用到你的 Flutter 应用中。

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

dependencies:
  flutter:
    sdk: flutter
  argon_buttons_flutter: ^x.y.z  # 替换为最新版本号

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

以下是一个完整的 Flutter 应用示例，展示了如何使用 argon_buttons_flutter 插件来创建不同类型的按钮：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Argon Buttons Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Argon Buttons Flutter Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ArgonButton(
              type: ArgonButtonType.fill,
              color: Colors.blue,
              child: Text('Fill Button'),
              onPressed: () {
                print('Fill Button Pressed');
              },
            ),
            SizedBox(height: 20),
            ArgonButton(
              type: ArgonButtonType.outline,
              color: Colors.blue,
              borderColor: Colors.blue,
              child: Text('Outline Button'),
              onPressed: () {
                print('Outline Button Pressed');
              },
            ),
            SizedBox(height: 20),
            ArgonButton(
              type: ArgonButtonType.roundFill,
              color: Colors.green,
              child: Text('Round Fill Button'),
              onPressed: () {
                print('Round Fill Button Pressed');
              },
            ),
            SizedBox(height: 20),
            ArgonButton(
              type: ArgonButtonType.roundOutline,
              color: Colors.green,
              borderColor: Colors.green,
              child: Text('Round Outline Button'),
              onPressed: () {
                print('Round Outline Button Pressed');
              },
            ),
            SizedBox(height: 20),
            ArgonButton(
              type: ArgonButtonType.solid,
              color: Colors.red,
              child: Text('Solid Button'),
              onPressed: () {
                print('Solid Button Pressed');
              },
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，并在主页面 MyHomePage 中展示了五种不同类型的按钮：

  1. Fill Button：一个填充颜色的按钮。
  2. Outline Button：一个带边框的按钮。
  3. Round Fill Button：一个圆角填充按钮。
  4. Round Outline Button：一个圆角边框按钮。
  5. Solid Button：一个实心按钮（注意：这个类型在 argon_buttons_flutter 的最新版本中可能不存在，具体请参考插件的文档和源代码）。

每个按钮点击时都会在控制台打印相应的信息。你可以根据需要调整按钮的样式和属性，比如颜色、边框颜色、文本等。

确保在实际开发中查阅 argon_buttons_flutter 的最新文档，因为插件的 API 可能会随时间变化。

回到顶部