How to run code after some delay in Flutter?
Andrew Mclaughlin
I'd like to execute a function after a certain delay after my Widget is built. What's the idiomatic way of doing this in Flutter?
What I'm trying to achieve:
I'd like to start with a default FlutterLogo Widget and then change its style property after some duration.
10 Answers
You can use Future.delayed to run your code after some time. e.g.:
Future.delayed(const Duration(milliseconds: 500), () {
// Here you can write your code setState(() { // Here you can write your code for open new view });
});In setState function, you can write a code which is related to app UI e.g. refresh screen data, change label text, etc.
1Trigger actions after countdown
Timer(Duration(seconds: 3), () { print("Yeah, this line is printed after 3 seconds");
});Repeat actions
Timer.periodic(Duration(seconds: 5), (timer) { print(DateTime.now());
});Trigger timer immediately
Timer(Duration(seconds: 0), () { print("Yeah, this line is printed immediately");
}); 1 Just leaving here the snippet everyone is looking for:
Future.delayed(Duration(milliseconds: 100), () { // Do something
}); 0 Figured it out 😎
class AnimatedFlutterLogo extends StatefulWidget { @override State<StatefulWidget> createState() => new _AnimatedFlutterLogoState();
}
class _AnimatedFlutterLogoState extends State<AnimatedFlutterLogo> { Timer _timer; FlutterLogoStyle _logoStyle = FlutterLogoStyle.markOnly; _AnimatedFlutterLogoState() { _timer = new Timer(const Duration(milliseconds: 400), () { setState(() { _logoStyle = FlutterLogoStyle.horizontal; }); }); } @override void dispose() { super.dispose(); _timer.cancel(); } @override Widget build(BuildContext context) { return new FlutterLogo( size: 200.0, textColor: Palette.white, style: _logoStyle, ); }
} 4 (Adding response on old q as this is the top result on google)
I tried yielding a new state in the callback within a bloc, and it didn't work. Tried with Timer and Future.delayed.
However, what did work was...
await Future.delayed(const Duration(milliseconds: 500));
yield newState;Awaiting an empty future then running the function afterwards.
Synchronously
Future.delayed(Duration(milliseconds: 1000), () { // Your code
});Asynchronously
await Future.delayed(const Duration(milliseconds: 1000)); Future.delayed(Duration(seconds: 3) , your_function)
A quick way is using Future.delayed as below:
Future.delayed(Duration(seconds: 10), (){ print("Wait for 10 seconds");
});or you can change duration to milliseconds like this:
Future.delayed(Duration(milliseconds: 3000), () { print("Wait for 3000 milliseconds");
}); Just adding more description over the above answers
The Timer functionality works with below duration time also:
const Duration( {int days = 0, int hours = 0, int minutes = 0, int seconds = 0, int milliseconds = 0, int microseconds = 0})Example:
Timer(Duration(seconds: 3), () { print("print after every 3 seconds"); }); 0 import 'dart:async';
Timer timer;
void autoPress(){ timer = new Timer(const Duration(seconds:2),(){ print("This line will print after two seconds"); });
}
autoPress();