flutter future builder correct way code example

Example 1: flutter future builder

FutureBuilder<String>(
        future: _fetchNetworkCall, // async work
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
           switch (snapshot.connectionState) {
             case ConnectionState.waiting: return Text('Loading....');
             default:
               if (snapshot.hasError)
                  return Text('Error: ${snapshot.error}');
               else
              return Text('Result: ${snapshot.data}');
            }
         },
        ),

Example 2: flutter future builder

//The correct way to use FutureBuilder is to instantiate the future first,
//then use the variable in the FutureBuilder
//Check out: https://www.youtube.com/watch?v=LYN46233cws for more info

//Instantiate the future
Future _getData;

//In initState assign you future function to the future
@override
  void initState() {
    _getData = _getUserData();
    super.initState();
  }
  
//Define your async function
  _getUserData() async{
    return await getAsyncDataFromServer();
  }
  
//Use the instantiated future variable in your future builder
FutureBuilder(
	future: _getData;
    builder: (BuildContext context, AsyncSnapshot snapshot){
      if(snapshot.connectionState == ConnectionState.done){
      	//Build you UI
      }else{
      	return Center(child: CircularProgressIndicator());
      }
    },
);

Tags:

Misc Example