Flutter FutureBuilder is Called Multiple Times How to Call it Once Only

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.

3. Creating void main runApp() method and here we would call our main MyApp class.

4. Creating our main MyApp class extends with StatelessWidget. This is our Root parent class. In this class we would call Home() class.

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.

6. Creating our main Child class HomeState extends State.

7. Creating Future type object named as myFuture. Future object is used to run a delayed computation.

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.

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.

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.

11. Complete source code for main.dart file:

Screenshots:

Flutter FutureBuilder is Called Multiple Times How to Call it Once Only

Leave a Reply

Your email address will not be published.