In a programming language Recurring function means a function which calls again and again automatically after a particular time without disturbance. In flutter we can make our own recurring method using Timer.periodic() method. The Timer.periodic() methods enable us to call a function or statement after a particular given time again and again. The margin of time is the delay between each calling of statement. So in this tutorial we would learn about Example of Call Recurring Function in Flutter Dart Repeat Method in Android iOS.
Contents in this project Example of Call Recurring Function in Flutter Dart Repeat Method Android iOS:
1. Open your project’s main.dart file and import material.dart and dart:async package. The material package contains all the widgets in flutter and dart:async package contains the Timer class.
|
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 class named as MyApp extends StatelessWidget class. In this class we would call our App class.
|
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 A Recurring Function')), body: Center(child: App()))); } } |
4. Creating another class named as App. In the App class we would create our main State class named as AppState with createState() method to enable mutable State integration in given class.
|
1 2 3 |
class App extends StatefulWidget { AppState createState() => AppState(); } |
5. Creating our main AppState extends State<App> class. In this class we would do all the main coding.
|
1 2 3 4 5 |
class AppState extends State<App> { } |
6. Creating the object of Timer class named as _timer and also we would make a integer type variable named as counter with default value of Zero.
|
1 2 |
int counter = 0; Timer _timer; |
7. Creating a function named as updateCounter(). Inside the function we would call the Timer.periodic() method with time duration of 1 Second. We would update the counter State value to +1 on after every second of calling.
|
1 2 3 4 5 6 7 8 |
updateCounter() { _timer = Timer.periodic(Duration(seconds: 1), (timer) { // You can also call here any function. setState(() { counter = ++counter; }); }); } |
8. Creating another function named as stopCounter(). We would use this function to STOP the timer on a particular event as per user choice. So when use calls this function it’ll stop the timer.
|
1 2 3 |
stopCounter() { _timer.cancel(); } |
9. Creating Widget Build Area -> Scaffold Widget -> Center Widget -> column widget -> Text widget and 2 Raised Button widgets. We would display the counter variable value on Text widget.
|
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 |
Widget build(BuildContext context) { return Scaffold( body: Center( child: Column(children: <Widget>[ Container( padding: EdgeInsets.fromLTRB(18, 18, 18, 18), child: Text('$counter', style: TextStyle(fontSize: 100))), Container( margin: const EdgeInsets.fromLTRB(10, 20, 10, 0), child: RaisedButton( onPressed: () => updateCounter(), child: Text( 'Click Here To Call A Recurring Function in Flutter', style: TextStyle(fontSize: 24), textAlign: TextAlign.center, ), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(11, 11, 11, 11), )), Container( margin: const EdgeInsets.fromLTRB(10, 30, 10, 0), child: RaisedButton( onPressed: () => stopCounter(), child: Text( 'Click Here To Stop Recurring Function From Calling', style: TextStyle(fontSize: 24), textAlign: TextAlign.center, ), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(11, 11, 11, 11), )), ]))); } |
10. 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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
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 A Recurring Function')), body: Center(child: App()))); } } class App extends StatefulWidget { AppState createState() => AppState(); } class AppState extends State<App> { int counter = 0; Timer _timer; updateCounter() { _timer = Timer.periodic(Duration(seconds: 1), (timer) { // You can also call here any function. setState(() { counter = ++counter; }); }); } stopCounter() { _timer.cancel(); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column(children: <Widget>[ Container( padding: EdgeInsets.fromLTRB(18, 18, 18, 18), child: Text('$counter', style: TextStyle(fontSize: 100))), Container( margin: const EdgeInsets.fromLTRB(10, 20, 10, 0), child: RaisedButton( onPressed: () => updateCounter(), child: Text( 'Click Here To Call A Recurring Function in Flutter', style: TextStyle(fontSize: 24), textAlign: TextAlign.center, ), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(11, 11, 11, 11), )), Container( margin: const EdgeInsets.fromLTRB(10, 30, 10, 0), child: RaisedButton( onPressed: () => stopCounter(), child: Text( 'Click Here To Stop Recurring Function From Calling', style: TextStyle(fontSize: 24), textAlign: TextAlign.center, ), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(11, 11, 11, 11), )), ]))); } } |
Screenshots:
