Flutter AnimatedContainer / AnimatedOpacity Delay animation-CodePudding

How do you delay animation in Flutter.

The below provides an animation of the opacity of a container. I have used a bool _reduced in this case to change the speed of the animation based on that bool variable. But I don't want to change the speed, I want to simply delay the animation one way round by 500 milliseconds. I can't see anyway of easily making an animation delay.

AnimatedOpacity(
   duration: _reduced ? Duration(milliseconds: 120) : Duration(milliseconds: 800),
   opacity: _reduced ? 0 : 1,
   child: Text('hi di hi),
}

There is obviously more to what this does than I have shown above but essentially I want to do something like this:

   AnimatedOpacity(
       duration: _reduced ? Duration(milliseconds: 120) : Duration(milliseconds: 120, delay: 500),
       opacity: _reduced ? 0 : 1,
       child: Text('hi di hi),
    }

CodePudding user response：

define a delay varibale for your stateful widget: Duration delay =...;

then when your condition to change the opacity becomes true (for example inside the onTap property of some button), create a timer that calls setState after delay ms :

onTap:(){
        Timer t = Timer(
            Duration(milliseconds:delay),(){
          setState((){
            _opacity = myNewValue;
          });
        });
      }

Update: since you said you want to stick to the provider package, I assume that you are storing your UI state (in this case the opacity) in some ChangeNotifier, so in this case just replace setState with a call to your change notifier:

 onTap:(){
            Timer t = Timer(
                Duration(milliseconds:delay),(){
              context.read<MyUIStateChangeNotifier>().setOpacity(newOpacityValue);
          }

and just as a side note, this small detail does not need a change notifier to hold it, since it is only relevant to the current screen, change notifiers are usually used to carry state across multiple screens in order not to pass the state every time in the constructor