Argon Flutter Buttons 使用教程

Argon Flutter Buttons 使用教程

Argon-Flutter-ButtonsCreate beautiful Loading and Timer buttons in Flutter项目地址:https://gitcode.com/gh_mirrors/ar/Argon-Flutter-Buttons

1、项目介绍

Argon Flutter Buttons 是一个用于创建美观的加载和计时按钮的 Flutter 包。这个包简化了按钮动画和状态管理的复杂性，使得开发者可以轻松地在应用中添加功能丰富的按钮。

2、项目快速启动

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  argon_buttons_flutter: ^1.1.3

然后运行 flutter pub get 来安装包。

基本使用

以下是一个简单的示例，展示如何在 Flutter 应用中使用 ArgonButton 和 ArgonTimerButton。

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(
      home: Scaffold(
        appBar: AppBar(title: Text('Argon Buttons Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ArgonButton(
                height: 50,
                width: 350,
                borderRadius: 5.0,
                color: Color(0xFF7866FE),
                child: Text(
                  "Continue",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                  ),
                ),
                onTap: (startLoading, stopLoading, btnState) {
                  if (btnState == ButtonState.Idle) {
                    startLoading();
                    // 模拟加载操作
                    Future.delayed(Duration(seconds: 3), stopLoading);
                  }
                },
              ),
              SizedBox(height: 20),
              ArgonTimerButton(
                height: 50,
                width: 200,
                borderRadius: 5.0,
                color: Color(0xFF7866FE),
                child: Text(
                  "Resend OTP",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                  ),
                ),
                initialTimer: 10,
                onTap: (startTimer, stopTimer, btnState) {
                  if (btnState == ButtonState.Idle) {
                    startTimer();
                  }
                },
                loader: (timeLeft) {
                  return Text(
                    "Wait $timeLeft",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3、应用案例和最佳实践

应用案例

• 表单提交按钮：使用 ArgonButton 作为表单提交按钮，可以在用户提交表单时显示加载动画，提升用户体验。
• 验证码重发按钮：使用 ArgonTimerButton 作为验证码重发按钮，可以防止用户频繁请求验证码，同时显示倒计时，提示用户等待时间。

最佳实践

• 状态管理：确保在按钮状态变化时（如加载、计时），按钮的外观和行为与状态一致。
• 用户体验：在按钮上添加适当的提示信息，如加载时的文本提示或计时时的倒计时显示，以增强用户体验。

4、典型生态项目

Argon Flutter Buttons 可以与其他 Flutter 生态项目结合使用，例如：

• Flutter Form Builder：与表单构建器结合，可以更方便地管理表单状态和提交按钮。
• Flutter Local Notifications：在按钮操作完成后，使用本地通知提示用户操作结果。

通过这些结合使用，可以进一步提升应用的功能性和用户体验。

Argon-Flutter-ButtonsCreate beautiful Loading and Timer buttons in Flutter项目地址:https://gitcode.com/gh_mirrors/ar/Argon-Flutter-Buttons