Flutter高级按钮功能插件advanced_button的使用

Flutter高级按钮功能插件advanced_button的使用

AdvancedButton 是一个高度可定制的 Flutter 小部件，它简化了按钮的创建，同时提供了高级功能，如渐变背景、闪烁动画以及完全可控的样式。此插件帮助开发者快速实现具有专业外观的按钮。

特性

  • 可定制尺寸：轻松设置按钮的高度和宽度。
  • 样式选项：调整按钮颜色、文本颜色、字体大小、字体粗细和文本对齐方式。
  • 图标支持：添加前缀和后缀图标，并配置填充。
  • 按钮状态：处理启用和禁用状态，并为每个状态分配不同的颜色。
  • 闪烁动画：当按钮启用时，交互式闪烁效果。
  • 渐变背景：支持渐变颜色，用于美观自定义。

开始使用

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

    dependencies:
  advanced_button: ^1.0.1

  2. 运行以下命令以获取包：

    flutter pub get

使用示例

以下是如何使用 AdvancedButton 小部件的示例：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("高级按钮示例")),
        body: Center(
          child: AdvancedButton(
            // 设置按钮高度和宽度
            height: 50,
            width: 250,

            // 按钮背景颜色
            buttonColor: Colors.blue,

            // 文本颜色
            textColor: Colors.white,

            // 字体大小
            fontSize: 18,

            // 字体粗细
            fontWeight: FontWeight.bold,

            // 文本对齐方式
            textAlignment: Alignment.center,

            // 点击时的溅墨颜色和半径
            splashColor: Colors.white,
            splashRadius: 40.0,

            // 按钮内边距
            buttonPadding: const EdgeInsets.symmetric(horizontal: 10.0),

            // 前缀图标及其填充
            prefixIcon: const Icon(Icons.thumb_up, color: Colors.white),
            prefixIconPadding: const EdgeInsets.only(right: 10),

            // 后缀图标及其填充
            suffixIcon: const Icon(Icons.arrow_forward, color: Colors.white),
            suffixIconPadding: const EdgeInsets.only(left: 10),

            // 按钮点击事件
            onPressed: () {
              debugPrint("按钮已按下！");
            },

            // 是否启用按钮
            isEnabled: true,

            // 启用状态下的按钮颜色
            enabledColor: Colors.blue,

            // 禁用状态下的按钮颜色
            disabledColor: Colors.grey,

            // 渐变背景（可选）
            gradient: const LinearGradient(
              colors: [Colors.blue, Colors.lightBlueAccent],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


advanced_button 是一个 Flutter 插件，提供了更高级的按钮功能，比如加载状态、禁用状态、点击动画等。它可以帮助你更轻松地创建具有复杂交互效果的按钮。

安装

首先，你需要在 pubspec.yaml 文件中添加 advanced_button 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  advanced_button: ^2.0.0

然后运行 flutter pub get 来安装依赖。

基本用法

1. 创建一个简单的按钮

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Advanced Button Example'),
      ),
      body: Center(
        child: AdvancedButton(
          onPressed: () {
            print('Button Pressed!');
          },
          child: Text('Click Me'),
        ),
      ),
    );
  }
}

2. 使用加载状态

AdvancedButton 提供了一个 isLoading 参数，用于显示按钮的加载状态。

AdvancedButton(
  onPressed: () async {
    // 模拟一个异步操作
    await Future.delayed(Duration(seconds: 2));
  },
  isLoading: true, // 设置为 true 显示加载状态
  child: Text('Submit'),
)

3. 禁用按钮

你可以通过 enabled 参数来控制按钮是否可用。

AdvancedButton(
  onPressed: () {
    print('Button Pressed!');
  },
  enabled: false, // 禁用按钮
  child: Text('Disabled Button'),
)

4. 自定义按钮样式

AdvancedButton 允许你通过 style 参数来自定义按钮的样式。

AdvancedButton(
  onPressed: () {
    print('Button Pressed!');
  },
  style: ElevatedButton.styleFrom(
    primary: Colors.blue,
    onPrimary: Colors.white,
    padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
  ),
  child: Text('Custom Style'),
)

5. 添加点击动画

AdvancedButton 支持点击动画，你可以通过 animationDuration 和 animationCurve 参数来控制动画的持续时间和曲线。

AdvancedButton(
  onPressed: () {
    print('Button Pressed!');
  },
  animationDuration: Duration(milliseconds: 300),
  animationCurve: Curves.easeInOut,
  child: Text('Animated Button'),
)

高级用法

1. 自定义加载指示器

你可以通过 loadingWidget 参数来自定义加载指示器。

AdvancedButton(
  onPressed: () async {
    await Future.delayed(Duration(seconds: 2));
  },
  isLoading: true,
  loadingWidget: CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
  ),
  child: Text('Submit'),
)

2. 使用 onPressed 的返回值

AdvancedButton 的 onPressed 方法可以返回一个 Future，按钮会自动在 Future 完成之前显示加载状态。

AdvancedButton(
  onPressed: () async {
    await Future.delayed(Duration(seconds: 2));
  },
  child: Text('Submit'),
)
回到顶部