Flutter动画效果插件flutter_animated_reaction的使用

Flutter Animated Reaction 是一个动画反应覆盖层插件（例如：Facebook、LinkedIn），你可以使用自己的反应图标（图片/动图）进行自定义。无论你的反应按钮在屏幕上的位置在哪里，此插件都可以帮助你在屏幕上正确的位置弹出带有你所选择的反应图标的动画覆盖层。

示例

特性

• 可以添加自定义的反应图标（图片或动图）
• 显示反应覆盖层时有酷炫的动画效果
• 拖动任何反应图标时会产生漂亮的动画效果
• 内置了Facebook的反应图标
• 支持反应音效功能

开始使用

首先，你需要导入 flutter_animated_reaction 包：

import 'package:flutter_animated_reaction/flutter_animated_reaction.dart';

使用方法

为了更好地理解，你可以查看示例应用。

AnimatedFlutterReaction().showOverlay(
  context: context,
  key: key,
  onReaction: (val) {
    print(val);
  },
);

参数说明

完整示例代码

以下是一个完整的示例代码，展示了如何在应用中使用 flutter_animated_reaction 插件：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Animated Reaction'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey key = GlobalKey();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              children: [
                Expanded(
                  child: ElevatedButton(
                    key: key,
                    onPressed: () {},
                    child: const Text("Like"),
                    onLongPress: () {
                      AnimatedFlutterReaction().showOverlay(
                        context: context,
                        key: key,
                        onReaction: (val) {
                          ScaffoldMessenger.of(context)
                              .showSnackBar(SnackBar(content: Text("$val")));
                        },
                      );
                    },
                  ),
                ),
                Expanded(
                  child: ElevatedButton(
                    onPressed: () {},
                    child: const Text("Comment"),
                  ),
                ),
                Expanded(
                  child: ElevatedButton(
                    onPressed: () {},
                    child: const Text("Share"),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}