Flutter 闪烁按钮

发布于08月08日

我需要提醒用户注意一个按钮.我想到的第一个 idea 是添加一个 blink 动画.我真的不知道如何做到这一点，但我try 使用以下代码使其工作:

Timer timer = new Timer(new Duration(seconds: 1), () {
  //basic logic to change the color variable here
  setState(() {});
});

这很简单，每秒钟调用一次setState，然后再次创建小部件.

但它不工作，计时器只被调用一次.而且，除此之外，在Timer以内拨打setState对我来说似乎是错误的.

有没有更好的办法来解决这个问题？

推荐答案

您可以使用AnimationController和FadeTransition小部件以一种简单的方式实现这一点，下面是代码:

  class MyBlinkingButton extends StatefulWidget {
    @override
    _MyBlinkingButtonState createState() => _MyBlinkingButtonState();
  }

  class _MyBlinkingButtonState extends State<MyBlinkingButton>
      with SingleTickerProviderStateMixin {
    AnimationController _animationController;

    @override
    void initState() {
      _animationController =
          new AnimationController(vsync: this, duration: Duration(seconds: 1));
      _animationController.repeat(reverse: true);
      super.initState();
    }

    @override
    Widget build(BuildContext context) {
      return FadeTransition(
        opacity: _animationController,
        child: MaterialButton(
          onPressed: () => null,
          child: Text("Text button"),
          color: Colors.green,
        ),
      );
    }

    @override
    void dispose() {
      _animationController.dispose();
      super.dispose();
    }
  }

用法:

main() {
  runApp(
    MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Material(
        child: Center(
          child: MyBlinkingButton(),
        ),
      ),
    ),
  );
}

DartPad example

结果: