timer - Flutter - 闪烁按钮

Question

我需要一个让用户注意的按钮。想到的第一个想法是添加一个眨眼动画。我真的不知道该怎么做，但我尝试使用以下代码使其工作:

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

很简单，每隔一秒调用一次 setState 并再次创建小部件。

但它不起作用，定时器只被调用一次。而且，除此之外，在 Timer 中调用 setState 对我来说似乎是错误的。

有更好的方法吗？

Answer 1

您可以使用 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

结果: