Flutter交互按钮插件 flutter_reaction_button 的使用

flutter_reaction_button 是一个可定制的 Flutter 包，允许你轻松创建带有表情符号的交互式按钮，类似于 Facebook 的标志性反应按钮。

截图

安装

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

dependencies:
  flutter:
    sdk: flutter
  flutter_reaction_button: <last-version>

请确保将 <last-version> 替换为最新版本号。你可以通过 pub.dev 查看最新的版本号。

使用方法

下面是一个简单的示例，展示如何使用 flutter_reaction_button 插件：

示例代码

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Reaction Button',
      home: Scaffold(
        backgroundColor: Colors.grey[200],
        appBar: AppBar(
          title: const Text('Flutter Reaction Button'),
          actions: [
            Builder(
              builder: (context) {
                return SizedBox.square(
                  dimension: 30,
                  child: ReactionButton<String>(
                    toggle: false,
                    direction: ReactionsBoxAlignment.rtl,
                    onReactionChanged: (Reaction<String>? reaction) {
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(
                          content: Text('Selected language: ${reaction?.value}'),
                        ),
                      );
                    },
                    reactions: [
                      Reaction<String>(
                        value: 'like',
                        icon: Icon(Icons.thumb_up),
                      ),
                      Reaction<String>(
                        value: 'love',
                        icon: Icon(Icons.favorite),
                      ),
                      Reaction<String>(
                        value: 'haha',
                        icon: Icon(Icons.face),
                      ),
                      // 添加更多表情
                    ],
                    placeholder: const Reaction<String>(
                      value: null,
                      icon: Icon(Icons.language),
                    ),
                    boxColor: Colors.black.withOpacity(0.5),
                    boxRadius: 10,
                    itemsSpacing: 20,
                    itemSize: const Size(40, 60),
                  ),
                );
              },
            ),
            const SizedBox(width: 10),
          ],
        ),
        body: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(vertical: 5),
          child: Column(
            children: [
              PostWidget(
                title: 'Image 1',
                imgPath: 'assets/images/img1.jpg',
                reactions: [
                  Reaction<String>(
                    value: 'like',
                    icon: Icon(Icons.thumb_up),
                  ),
                  Reaction<String>(
                    value: 'love',
                    icon: Icon(Icons.favorite),
                  ),
                  Reaction<String>(
                    value: 'haha',
                    icon: Icon(Icons.face),
                  ),
                  // 添加更多表情
                ],
              ),
              // 添加更多的 PostWidget 和 ImageWidget
            ],
          ),
        ),
      ),
    );
  }
}

class PostWidget extends StatelessWidget {
  final String title;
  final String imgPath;
  final List<Reaction<String>> reactions;

  const PostWidget({
    super.key,
    required this.title,
    required this.imgPath,
    required this.reactions,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(8.0),
      padding: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: Column(
        children: [
          Text(title),
          Image.asset(imgPath),
          ReactionButton<String>(
            onReactionChanged: (Reaction<String>? reaction) {
              debugPrint('Selected value: ${reaction?.value}');
            },
            reactions: reactions,
            initialReaction: reactions.first,
            selectedReaction: reactions.first,
          ),
        ],
      ),
    );
  }
}

关键属性说明

• onReactionChanged: 当用户选择一个表情时触发的回调函数。
• reactions: 表情列表，每个表情由 Reaction 对象表示。
• initialReaction: 初始显示的表情。
• selectedReaction: 用户选择后的表情。

许可证

MIT License

Copyright (c) 2023 Abdelouahed Medjoudja

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

希望这个示例能够帮助你快速上手 flutter_reaction_button 插件！如果有任何问题或需要进一步的帮助，请随时提问。