Flutter智能按钮功能插件flutter_smart_button的使用

Flutter智能按钮功能插件flutter_smart_button的使用

特性

• 加载指示器：执行异步任务时显示加载指示器。
• 成功和失败指示器：自定义图标或小部件以指示操作的结果。
• 防抖功能：通过设置防抖时间来防止多次点击。
• 可定制样式：轻松定制按钮的颜色、边框、填充和文本样式。
• 增强用户反馈：通过动画和触摸效果提供视觉反馈。
• 成功和失败回调：根据异步操作的结果执行函数。

开始使用

要将flutter_smart_button添加到您的项目中，请在pubspec.yaml文件中添加以下依赖项：

dependencies:
  flutter_smart_button: ^0.2.0

然后运行flutter pub get以安装该包。

使用方法

首先导入flutter_smart_button：

import 'package:flutter_smart_button/flutter_smart_button.dart';

接着在Flutter应用中使用SmartButton小部件：

SmartButton(
  child: Text('Tap Me'),
  onPressed: () async {
    // 您的异步操作在这里
  },
  successIndicator: Icon(Icons.check, color: Colors.green),
  failureIndicator: Icon(Icons.close, color: Colors.red),
  isLoading: false, // 控制加载状态
  tooltip: '点击开始操作',
  // 根据需要自定义按钮
)

自定义

SmartButton允许广泛的自定义，包括：

• buttonColor: 更改按钮的背景颜色。
• textStyle: 自定义按钮内的文本样式。
• borderWidth, borderColor: 自定义按钮的边框。
• padding: 设置按钮内部的填充。
• loadingIndicator, successIndicator, failureIndicator: 提供不同状态下的自定义小部件。
• onSuccess, onFailure: 处理异步操作结果的回调。

示例代码

以下是一个完整的示例代码，演示如何在应用中使用SmartButton：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SmartButton 示例'),
        ),
        body: Center(
          child: SmartButtonExample(),
        ),
      ),
    );
  }
}

class SmartButtonExample extends StatefulWidget {
  [@override](/user/override)
  _SmartButtonExampleState createState() => _SmartButtonExampleState();
}

class _SmartButtonExampleState extends State<SmartButtonExample> {
  bool _isLoading = false;

  Future<void> _simulateAsyncOperation() async {
    if (!_isLoading) {
      setState(() {
        _isLoading = true;
      });
      await Future.delayed(Duration(seconds: 2));
      setState(() {
        _isLoading = false;
      });
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('完成'),
      ));
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SmartButton(
      child: Text('请点击'),
      onPressed: _simulateAsyncOperation,
      isLoading: _isLoading,
      loadingIndicator: CircularProgressIndicator(
        color: Colors.white,
      ),
      buttonColor: Colors.blue,
      textStyle: TextStyle(fontSize: 18, color: Colors.white),
      borderWidth: 2.0,
      borderColor: Colors.blueAccent,
      padding: EdgeInsets.symmetric(vertical: 12.0, horizontal: 24.0),
      tooltip: '点击后开始',
    );
  }
}