Flutter - 闪烁按钮 [英] Flutter - Blinking button

问题描述

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

Timer timer = new Timer(new Duration(seconds: 1), () {//这里改变颜色变量的基本逻辑setState(() {});});

很简单，每隔一秒 setState 就会被调用一次，然后再次创建小部件.

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

有更好的方法吗?

解决方案

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

 class MyBlinkingButton 扩展 StatefulWidget {@覆盖_MyBlinkingButtonState createState() =>_MyBlinkingButtonState();}class _MyBlinkingButtonState 扩展 State与 SingleTickerProviderStateMixin {动画控制器_animationController;@覆盖无效的初始化状态(){_animationController =new AnimationController(vsync: this, duration: Duration(seconds: 1));_animationController.repeat(反向:真)；super.initState();}@覆盖小部件构建(BuildContext 上下文){返回 FadeTransition(不透明度:_animationController，孩子:材料按钮(onPressed: () =>空值，孩子:文本(文本按钮")，颜色:Colors.green，),);}@覆盖无效处置(){_animationController.dispose();超级处置()；}}

用法:

main() {运行应用程序(材料应用(title: 'Flutter 演示',主题:主题数据(主色板:Colors.blue，),主页:材料(孩子:中心(孩子:MyBlinkingButton(),),),),);}

I need a call the user attention to a button. The first idea that came to mind is to add a blink animation. I really don't know how to do that, but I tried to make it work with the following code:

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

It is straightforward, every second setState is called and the widget is created again.

But it doesn't work, the timer is called only once. And, besides that, calling setState within a Timer seems wrong to me.

There is a better approach to this?

解决方案

You can achieve this in an easy way using AnimationController and FadeTransition widget, here you have the code:

  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();
    }
  }

Usage:

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

DartPad example

Result:

这篇关于Flutter - 闪烁按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！