Flutter动画图标按钮插件burst_icon_button的使用

BurstIconButton是一个在Flutter中用于为按钮添加有趣爆炸动画效果的可定制化小部件。当用户点击或长按按钮时，图标会呈现出一种爆炸的效果，从而为用户界面增添趣味性和吸引力。

特征

支持普通状态、按下状态和爆炸状态下的图标自定义。
可调节的动画持续时间和长按防抖动时间。
可配置的水平图标移动幅度。
同时支持点击和长按交互。
爆炸图标具有平滑的淡出和向上移动效果。

安装

在项目的pubspec.yaml文件中添加以下依赖项：

dependencies:
  burst_icon_button: ^1.0.0

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

使用方法

以下是一个简单的示例展示如何使用BurstIconButton：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("BurstIconButton 示例")),
        body: Center(
          child: BurstIconButton(
            icon: Icon(Icons.favorite, color: Colors.grey), // 默认图标
            pressedIcon: Icon(Icons.favorite, color: Colors.red), // 按下时的图标
            burstIcon: Icon(Icons.favorite, color: Colors.pink), // 爆炸时的图标
            onPressed: () {
              print('按钮已按下！');
            },
          ),
        ),
      ),
    );
  }
}

自定义选项

BurstIconButton提供了丰富的自定义选项：

icon: 显示的默认图标（必填）。
pressedIcon: 按下时显示的图标（可选）。
burstIcon: 爆炸效果使用的图标（可选，默认值为icon）。
duration: 爆炸动画的持续时间（默认值：1200毫秒）。
throttleDuration: 长按生成爆炸之间的间隔时间（默认值：100毫秒）。
onPressed: 按钮被按下时触发的回调函数。
crossAmplitude: 爆炸图标水平移动的幅度（默认值：10.0）。

示例代码

BurstIconButton(
  icon: Icon(Icons.star, color: Colors.grey), // 默认图标
  pressedIcon: Icon(Icons.star, color: Colors.yellow), // 按下时的图标
  burstIcon: Icon(Icons.star, color: Colors.orange), // 爆炸时的图标
  duration: Duration(milliseconds: 1500), // 动画持续时间
  throttleDuration: Duration(milliseconds: 150), // 防抖时间
  crossAmplitude: 15.0, // 水平移动幅度
  onPressed: () {
    print('星星按钮已被按下！');
  },
)

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

phonegap100 1楼•13 天前

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

burst_icon_button 是一个用于 Flutter 的动画图标按钮插件，它可以为按钮添加一些炫酷的动画效果。使用这个插件可以让你的应用界面更加生动和吸引人。下面是如何在 Flutter 项目中使用 burst_icon_button 的基本步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 burst_icon_button 的依赖。

dependencies:
  flutter:
    sdk: flutter
  burst_icon_button: ^0.1.0  # 请使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 burst_icon_button 包。

import 'package:burst_icon_button/burst_icon_button.dart';

3. 使用 BurstIconButton

BurstIconButton 是一个带有动画效果的按钮。你可以在你的 UI 中使用它。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Burst Icon Button Example'),
        ),
        body: Center(
          child: BurstIconButton(
            icon: Icon(Icons.favorite, color: Colors.red),
            onPressed: () {
              print('Button Pressed!');
            },
          ),
        ),
      ),
    );
  }
}

4. 自定义属性

BurstIconButton 提供了多个属性，允许你自定义按钮的外观和行为。

icon: 按钮的图标。
onPressed: 点击按钮时触发的回调函数。
color: 按钮的背景颜色。
splashColor: 按钮点击时的水波纹颜色。
iconSize: 图标的大小。
burstColor: 按钮点击时的动画颜色。
burstDuration: 动画的持续时间。
burstSize: 动画的大小。

例如：

BurstIconButton(
  icon: Icon(Icons.star, color: Colors.yellow),
  onPressed: () {
    print('Star Button Pressed!');
  },
  color: Colors.blue,
  splashColor: Colors.blueAccent,
  iconSize: 40.0,
  burstColor: Colors.yellowAccent,
  burstDuration: Duration(milliseconds: 500),
  burstSize: 50.0,
)