在Flutter中，在不涉及动画小部件的情况下，让容器闪烁一次最简单、最简单的方法是什么？

Question

想象一下 Facebook 移动应用程序，您可以在其中点击关于有人喜欢您的评论的通知。该应用程序将打开相应的屏幕，向下滚动到评论，到达那里后，评论行会闪烁黄色，然后迅速变为透明，然后就完成了。

我只想为 ListView/Column 元素制作相同的闪烁动画，让用户知道由于他们的操作，某事正在那里发生。但根据我收集到的信息，要创建一个像这样的简单动画需要一个复杂的精心设计的动画小部件。

有一个名为 FadeInImage 的小部件可以制作非常受欢迎的淡入淡出动画。我只需要提供目标 URL、占位符图像资产，小部件将处理其余部分。我想知道是否有这样的替代方案，我可以只提供一个小部件的密钥，然后从任何地方调用：rowKey.currentState.flash(color: Colors.yellow)。或者也许是一种让我告诉 ListView 或 Column 闪烁某些行的方法，例如 listViewKey.currentState.items[5].flash(color: Colors.yellow).

Answer 1

尝试shimmer

在获取数据时，您可以创建一个简单的动画，给人一种正在加载内容的感觉。这是一个简单的例子。

我正在使用 FAB onPress 来反映更改。

bool isApiCallProcess = false;

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
      floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              isApiCallProcess = !isApiCallProcess;
            });
          },
        ),
     backgroundColor: Colors.white,
    body:  (isApiCallProcess == false)
                        ? CircleAvatar(
                                    backgroundColor: 
                                       Colors.black12,
                                    radius: 40,
                                    backgroundImage: AssetImage(
                                      'images/dosa.jpg',
                                    ),
                                  ):
                    Shimmer.fromColors(
                        baseColor: Colors.grey[300]!,
                        highlightColor: Colors.grey[100]!,
                        child: Wrap(
                         
                          children: [
                            Column(
                              children: [
                                const CircleAvatar(
                                  radius: 40,
                                  backgroundImage: AssetImage(
                                    '',
                                  ),
                                ),
                                const SizedBox(
                                  height: 10,
                                ),
                                Container(
                                  decoration: ShapeDecoration(
                                    color: Colors.grey[400]!,
                                    shape: const 
                                RoundedRectangleBorder(),
                                  ),
                                  height: 12,
                                  width: 60,
                                ),
                              ],
                            ),                               
                          ],
                        ),
                      ),
),
);

截图如下：

Answer 2

没有您正在寻找的小部件，但如果您了解 Flutter 基础知识，则可以创建自定义小部件。您将能够构建从简单的动画到最高级的动画。

我做了一个简单的示例，一个元素列表，您可以在其中 select 列表（索引）中的任何元素。

当你打开屏幕时，你会看到滚动动画，之后，闪烁动画将开始。

class FlashingHome extends StatelessWidget {
  const FlashingHome({Key? key}) : super(key: key);

  void _goToWidget(BuildContext context, int index) {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (_) => FlashingList(index: index),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            MaterialButton(
              color: Colors.greenAccent,
              child: const Text('Go to element 5'),
              onPressed: () => _goToWidget(context, 5),
            ),
            MaterialButton(
              color: Colors.greenAccent,
              child: const Text('Go to element 10'),
              onPressed: () => _goToWidget(context, 10),
            ),
          ],
        ),
      ),
    );
  }
}

class FlashingList extends StatefulWidget {
  const FlashingList({required this.index, Key? key}) : super(key: key);

  final int index;

  @override
  State<FlashingList> createState() => _FlashingListState();
}

class _FlashingListState extends State<FlashingList>
    with SingleTickerProviderStateMixin {
  final _scrollController = ScrollController();
  late final AnimationController _animationController;
  final _itemSize = 150.0;
  Timer? _timer;

  Future<void> _startScrolling() async {
    await _scrollController.animateTo(
      _itemSize * widget.index,
      duration: const Duration(seconds: 1),
      curve: Curves.easeOut,
    );
    // after the scroll animation finishes, start the blinking
    _animationController.repeat(reverse: true);
    // the duration of the blinking
    _timer = Timer(const Duration(seconds: 3), () {
      setState(() {
        _animationController.stop();
        _timer?.cancel();
      });
    });
  }

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    );
    WidgetsBinding.instance!.addPostFrameCallback((_) => _startScrolling());
    super.initState();
  }

  @override
  void dispose() {
    _timer?.cancel();
    _animationController.dispose();
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flashing List'),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: 15,
        itemExtent: 150,
        itemBuilder: (context, index) {
          final item = Padding(
            padding: const EdgeInsets.all(20.0),
            child: Text('My Item :$index'),
          );
          return Padding(
            padding: const EdgeInsets.all(4.0),
            child: FittedBox(
              child: index == widget.index && _animationController.isDismissed
                  ? FadeTransition(
                      opacity: _animationController,
                      child: Container(
                        color: Colors.yellow,
                        child: item,
                      ),
                    )
                  : Container(
                      color: Colors.grey[200],
                      child: item,
                    ),
            ),
          );
        },
      ),
    );
  }
}

结果：

现在您已经知道如何创建自动滚动列表、动画项目，您可以使用更复杂的动画对其进行自定义，并将其提取到可在您的项目中重复使用的自定义小部件中。

参考：https://docs.flutter.dev/development/ui/animations

在Flutter中，在不涉及动画小部件的情况下，让容器闪烁一次最简单、最简单的方法是什么？

In Flutter, what's the easiest, simplest way to make a container flashing once without involving animation widgets?

animation

flutter