Flutter动画按钮插件animated_react_button的使用

Flutter动画按钮插件animated_react_button的使用

截图

以下是animated_react_button插件的效果截图：

特性

• 反应动作。

开始使用

要使用这个包，请按照以下步骤操作：

1. 在您的 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  animated_react_button:

如何使用

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Animated React Button Example')),
        body: Center(
          child: Container(
            child: AnimatedReactButton(
              defaultColor: Colors.grey, // 默认颜色
              reactColor: Colors.red, // 反应颜色
              onPressed: () async {
                // 模拟API/IO等待调用
                await Future.delayed(Duration(seconds: 1));
                print('Button pressed!');
              },
            ),
          ),
        ),
      ),
    );
  }
}

完整示例代码

以下是一个更完整的示例，展示了如何在列表中使用 AnimatedReactButton：

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

// Model
class Movie {
  final String title;
  final List<String> genere;
  bool isFavorite = false;
  bool isReacting = false;

  Movie({
    required this.title,
    required this.genere,
  });
}

class Example extends StatefulWidget {
  [@override](/user/override)
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  List<Movie> movies = [];
  bool isReacting = false;

  [@override](/user/override)
  void initState() {
    fetchMoviesFakeApi();
    super.initState();
  }

  void fetchMoviesFakeApi() {
    // 加载指示器将在这里设置
    movies = [
      Movie(
          title: "House of the dragon",
          genere: ["Action", "Adventure", "Drama"]),
      Movie(
          title: "She-Hulk: Attorney at Law",
          genere: ["Action", "Adventure", "Comedy"]),
    ];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ListView.builder(
            itemCount: movies.length,
            itemBuilder: (context, index) {
              return Container(
                margin: const EdgeInsets.only(bottom: 5),
                child: Card(
                  elevation: 5,
                  child: ListTile(
                    title: Text(movies[index].title),
                    subtitle: Row(
                      children: List<Widget>.generate(
                        movies[index].genere.length,
                        (genIndex) => Container(
                          margin: const EdgeInsets.only(left: 8),
                          padding: const EdgeInsets.all(5),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            color: Colors.grey.withOpacity(0.2),
                          ),
                          child: Text(
                            movies[index].genere[genIndex],
                            style: const TextStyle(fontSize: 10),
                          ),
                        ),
                      ),
                    ),
                    trailing: Stack(
                      children: [
                        AnimatedReactButton(
                          onPressed: () async {
                            // API 调用
                            movies[index].isReacting = true;
                            setState(() {
                              isReacting = true;
                            });
                            await Future.delayed(const Duration(seconds: 1));
                            setState(() {
                              movies[index].isFavorite =
                                  !movies[index].isFavorite;
                            });
                            movies[index].isReacting = false;
                          },
                          defaultColor: movies[index].isFavorite
                              ? Colors.red
                              : Colors.grey,
                          reactColor: !movies[index].isFavorite
                              ? Colors.red
                              : Colors.grey,
                        ),
                        Visibility(
                          visible: movies[index].isReacting,
                          child: const CircularProgressIndicator(
                            strokeWidth: 2,
                            color: Colors.red,
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}