Timer class in flutter is used to create a count down timer that can be executed on a particular time. The timer class object can be fire once or repeatedly as per user requirement. We can also configure time in seconds and milliseconds in Timer. Timer class is the part of dart:async package. So in this tutorial we would use the Timer class object to execute a function with delay time in flutter android iOS app.
Contents in this project Execute a Function with Delay Time in Flutter Dart Example:
1. Open your project’s main.dart file and import material.dart package and dart:async package.
|
1 2 |
import 'package:flutter/material.dart'; import 'dart:async'; |
2. Creating void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main Root parent class named as MyApp extends StatelessWidget. In this class we would call our AppState() class as Child widget.
|
1 2 3 4 5 6 7 8 9 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Call Function With Delay')), body: Center(child: AppState()))); } } |
4. Creating AppState class extends StatefulWidget. In this class we would make the createState() method and pass our State class in which we would be using States.
|
1 2 3 |
class AppState extends StatefulWidget { AppUpdate createState() => AppUpdate(); } |
5. Creating our main Child State class named as AppUpdate extends State<AppState>.
|
1 2 3 4 5 |
class AppUpdate extends State<AppState> { } |
6. Creating a object of Timer class named as _timer. Timer class is used to fire a Task or set of code after a particular time in flutter. You can read more about Timer class on here on Flutter’s official page.
|
1 |
Timer _timer; |
7. Creating a String variable named as sampleText with some random text.
|
1 |
String sampleText = 'Some OLD Sample Text...'; |
8. Creating a function named as updateText(). Inside the function we would call the _timer method and here we would update the sampleText String variable after 4 seconds of delay using setState() method.
|
1 2 3 4 5 6 7 |
updateText() { _timer = new Timer(const Duration(milliseconds: 4000), () { setState(() { sampleText = 'New Text With Delay...'; }); }); } |
9. Creating the dispose() method and dispose the object when it removed from tree.
|
1 2 3 4 5 |
@override void dispose() { super.dispose(); _timer.cancel(); } |
10. Creating Widget Build area -> Scaffold widget -> Center widget -> Column widget -> Text widget and RaisedButton widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column(children: <Widget>[ Container( padding: EdgeInsets.fromLTRB(20, 20, 20, 20), child: Text('$sampleText', style: TextStyle(fontSize: 21))), RaisedButton( onPressed: () => updateText(), child: Text('Click Here To Update Text After Delay'), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ]))); } |
11. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import 'package:flutter/material.dart'; import 'dart:async'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Call Function With Delay')), body: Center(child: AppState()))); } } class AppState extends StatefulWidget { AppUpdate createState() => AppUpdate(); } class AppUpdate extends State<AppState> { Timer _timer; String sampleText = 'Some OLD Sample Text...'; updateText() { _timer = new Timer(const Duration(milliseconds: 4000), () { setState(() { sampleText = 'New Text With Delay...'; }); }); } @override void dispose() { super.dispose(); _timer.cancel(); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column(children: <Widget>[ Container( padding: EdgeInsets.fromLTRB(20, 20, 20, 20), child: Text('$sampleText', style: TextStyle(fontSize: 21))), RaisedButton( onPressed: () => updateText(), child: Text('Click Here To Update Text After Delay'), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ]))); } } |
Screenshot:
