如何在 Flutter 中为 gridview.builder 设置动画？

Question

我是 Flutter 和 Dart 的新手，仍在学习它们。

我需要为彩色圆圈网格制作动画，如下面的 gif 所示：

我在网上搜索了很多都没有结果。

这是我正在处理的代码：

child: GridView.builder(
                                    padding: const EdgeInsets.all(5.0),
                                    shrinkWrap: true,
                                    itemCount: colorsList.length,
                                    gridDelegate:
                                        SliverGridDelegateWithFixedCrossAxisCount(
                                            childAspectRatio: 1.0,
                                            crossAxisSpacing: 5.0,
                                            mainAxisSpacing: 5.0,
                                            crossAxisCount: 5),
                                    itemBuilder: (context, index) {
                                      var color = colorsList[index];
                                      return MaterialButton(
                                          elevation: 0,
                                          color: color,
                                          shape: CircleBorder(),
                                          onPressed: () {
                                            Navigator.pop(context);
                                            setState(() {
                                              AnimatedList(
                                                itemBuilder: (context, index,
                                                    animation) {
                                                  return SlideTransition(
                                                      position: animation
                                                          .drive(List<color>));
                                                },
                                              );
                                              mainColor = color;
                                            });
                                          });
                                    },
                                  ),

感谢任何帮助

Answer 1

使用auto_animated，

    Widget buildAnimatedItem(
      BuildContext context,
      int index,
      Animation<double> animation,
    ) {
      var color = colorsList[index];
      return FadeTransition(
        opacity: Tween<double>(
          begin: 0,
          end: 1,
        ).animate(animation),
        child: SlideTransition(
          position: Tween<Offset>(
            begin: Offset(0, -0.1),
            end: Offset.zero,
          ).animate(animation),
          child: MaterialButton(
                                      elevation: 0,
                                      color: color,
                                      shape: CircleBorder(),
                                      onPressed: () {
                                        Navigator.pop(context);
                                        setState(() {
                                          AnimatedList(
                                            itemBuilder: (context, index,
                                                animation) {
                                              return SlideTransition(
                                                  position: animation
                                                      .drive(List<color>));
                                            },
                                          );
                                          mainColor = color;
                                        });
                                      }),
        ),
      );
    }

LiveGrid.options(
  options: options,
  itemBuilder: buildAnimatedItem,
  itemCount: itemsCount,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                                        childAspectRatio: 1.0,
                                        crossAxisSpacing: 5.0,
                                        mainAxisSpacing: 5.0,
                                        crossAxisCount: 5),
);

或

这可能会有所帮助，flutter_staggered_animations：

@override
Widget build(BuildContext context) {
  int columnCount = 3;

  return Scaffold(
    body: AnimationLimiter(
      child: GridView.count(
        crossAxisCount: columnCount,
        children: List.generate(
          100,
          (int index) {
            return AnimationConfiguration.staggeredGrid(
              position: index,
              duration: const Duration(milliseconds: 375),
              columnCount: columnCount,
              child: ScaleAnimation(
                child: FadeInAnimation(
                  child: YourListChild(),
                ),
              ),
            );
          },
        ),
      ),
    ),
  );
}