Flutter点击动画插件tap_animator的使用

特性

可以按需求更改动画时长。

开始使用

安装

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

dependencies:
  tap_animator: ^1.0.0

然后在你的 Dart 文件中导入包：

import 'package:tap_animator/tap_animator.dart';

使用方法

只需将你想要添加点击动画效果的 Widget 包裹在 TapAnimator 中即可！

TapAnimator(
  duration: const Duration(milliseconds: 100), // 可选参数
  child: YourWidget(),
),

示例代码

以下是一个完整的示例，展示了如何在不同类型的按钮上应用点击动画：

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

void main() => runApp(const OutlinedButtonExampleApp());

class OutlinedButtonExampleApp extends StatelessWidget {
  const OutlinedButtonExampleApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('TapAnimator Example')),
        body: const Center(
          child: TapAnimatorExample(),
        ),
      ),
    );
  }
}

class TapAnimatorExample extends StatelessWidget {
  const TapAnimatorExample({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // FilledButton 带点击动画
        TapAnimator(
          child: FilledButton(
            onPressed: () {
              debugPrint('Received click');
            },
            child: const Text('Click Me'),
          ),
        ),
        const SizedBox(height: 10),
        
        // OutlinedButton 带点击动画
        TapAnimator(
          child: OutlinedButton(
            onPressed: () {
              debugPrint('Received click');
            },
            child: const Text('Click Me'),
          ),
        ),
        const SizedBox(height: 10),
        
        // ElevatedButton 带点击动画
        TapAnimator(
          child: ElevatedButton(
            onPressed: () {
              debugPrint('Received click');
            },
            child: const Text('Click Me'),
          ),
        ),
        const SizedBox(height: 10),
        
        // 自定义 Container 带点击动画
        TapAnimator(
          duration: const Duration(milliseconds: 250), // 设置动画时长为250毫秒
          child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(color: Colors.red),
              color: Colors.redAccent,
            ),
            child: const Center(
              child: Text(
                'Click Me',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        )
      ],
    );
  }
}