Flutter动画按钮插件animated_tap_button的使用

概述

animated_tap_button 是一个 Flutter 包，提供了带有平滑动画的按钮小部件。该按钮可以在两种图标状态之间切换，并且支持自定义触觉反馈。通过此插件，您可以轻松创建交互性强的按钮。

特性

• 平滑动画：在两种图标状态之间切换时具有流畅的动画效果。
• 触觉反馈：提升用户体验。
• 可定制图标大小、颜色和类型：支持选中和未选中状态下的图标设置。
• 外部状态管理：可以通过 onValueChanged 参数实现完全可控的状态管理。

开始使用

导入包

首先，在您的 Dart 文件中导入 animated_tap_button：

import 'package:animated_tap_button/animated_tap_button.dart';

使用示例

以下是一个简单的示例，展示如何在 Flutter 应用程序中使用 AnimatedTapButton：

import 'package:animated_tap_button/animated_tap_button.dart';
import 'package:flutter/material.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('Animated Tap Button Example'),
        ),
        body: Center(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  bool _buttonValue = false;

  void _onValueChanged(bool newValue) {
    setState(() {
      _buttonValue = newValue;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AnimatedTapButton(
      iconSize: 50.0, // 设置图标大小
      initialValue: _buttonValue, // 初始状态
      onValueChanged: _onValueChanged, // 状态变化回调
      selectedIcon: Icons.thumb_up, // 选中状态图标
      unselectedIcon: Icons.thumb_up_off_alt, // 未选中状态图标
      iconColor: Colors.blue, // 图标颜色
    );
  }
}

参数说明

完整示例代码

以下是完整的示例代码，包含上述所有功能：

import 'package:animated_tap_button/animated_tap_button.dart';
import 'package:flutter/material.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('Animated Tap Button Example'),
        ),
        body: Center(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  bool _buttonValue = false;

  void _onValueChanged(bool newValue) {
    setState(() {
      _buttonValue = newValue;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AnimatedTapButton(
      iconSize: 50.0, // 图标大小
      initialValue: _buttonValue, // 初始状态
      onValueChanged: _onValueChanged, // 状态变化回调
      selectedIcon: Icons.thumb_up, // 选中状态图标
      unselectedIcon: Icons.thumb_up_off_alt, // 未选中状态图标
      iconColor: Colors.blue, // 图标颜色
    );
  }
}