The FutureBuilder method is the backbone of every JSON flutter mobile application. Using the FutureBuilder method we can use 2 separate conditions from which we can manage Displaying loading indicator or other widget before parsing JSON in other widgets. But as we all know if you are a beginner in Flutter then you all have faced a problem regarding to FutureBuilder. FutureBuilder by default calls multiple times in State full widget and how we can control it So FutureBuilder called once only. So in this tutorial we would learn about Flutter FutureBuilder is Called Multiple Times How to Call it Once Only in Android iOS App Example Tutorial.
What we re doing in this tutorial:
We are returning a message from FutureBuilder method ‘Hello Friends…’ with 5 Seconds of delay. In the mean time we would display CircularProgressIndicator() widget on screen. After 5 seconds completed we would hide the CircularProgressIndicator() widget and display Hello Friends on screen using Text widget.
Contents in this project Flutter FutureBuilder is Called Multiple Times How to Call it Once Only in Android iOS App:
1. We would call the FutureBuilder method in Widget Build method, whenever state changes or it calls setState() method then it will invokes the Build method again and again. So it would call the FutureBuilder method again and again multiple times. So how can we stop it from happening ? To stop calling FutureBuilder method again and again we have to create Future object in our State full Widget class. So in this tutorial I’ll explain it step by step.
2. The first step is to import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
3. Creating void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
4. Creating our main MyApp class extends with StatelessWidget. This is our Root parent class. In this class we would call Home() class.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Stop Future Builder Calling Multiple Times')), body: Home(), ), ); } } |
5. Creating Home class extends StatefulWidget. In this class we would make our next HomeState class along with createState() method to enable mutable state management in given class tree.
|
1 2 3 |
class Home extends StatefulWidget { HomeState createState() => HomeState(); } |
6. Creating our main Child class HomeState extends State.
|
1 2 3 4 5 |
class HomeState extends State<Home> { } |
7. Creating Future type object named as myFuture. Future object is used to run a delayed computation.
|
1 |
Future myFuture; |
8. Creating Future<String> fetchData() async method and here we would use the delayed method to delay the message to 5 seconds then send the data.
|
1 2 3 4 |
Future<String> fetchData() async { await Future.delayed(Duration(seconds: 5)); return 'Hello Friends...'; } |
9. Creating initState() method. The initState method called once only when State object has been created. Inside the method we would assign the fetchData() method to Future object.
|
1 2 3 4 5 |
@override void initState() { myFuture = fetchData(); super.initState(); } |
10. Creating Widget Build Area -> FutureBuilder method -> pass the myFuture object to future parameter. It will show the CircularProgressIndicator() for 5 seconds then display Hello Friends message on screen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Widget build(BuildContext context) { return FutureBuilder<String>( future: myFuture, builder: (context, snapshot) { if (!snapshot.hasData) return Center(child: CircularProgressIndicator()); return Scaffold( body: Center( child: Text( snapshot.data.toString(), textAlign: TextAlign.center, style: TextStyle(fontSize: 24), )), ); }); } |
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 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Stop Future Builder Calling Multiple Times')), body: Home(), ), ); } } class Home extends StatefulWidget { HomeState createState() => HomeState(); } class HomeState extends State<Home> { Future myFuture; Future<String> fetchData() async { await Future.delayed(Duration(seconds: 5)); return 'Hello Friends...'; } @override void initState() { myFuture = fetchData(); super.initState(); } @override Widget build(BuildContext context) { return FutureBuilder<String>( future: myFuture, builder: (context, snapshot) { if (!snapshot.hasData) return Center(child: CircularProgressIndicator()); return Scaffold( body: Center( child: Text( snapshot.data.toString(), textAlign: TextAlign.center, style: TextStyle(fontSize: 24), )), ); }); } } |
Screenshots:
