Flutter Future builder Widget | RRTutors

Flutter Future and FutureBuilder

To Make the Asynchronous operation will use Future



future.then get future value and catch future exception Combined async,await




import 'dart:async';

Future<String> testFuture() {

//   throw new Error();

  return Future.value('success');

//   return Future.error('error');



main() {

  testFuture().then((s) {


  }, onError: (e) {



  }).catchError((e) {






Sometimes we need to Futuredo something at the end, and we know then().catchError()the pattern is similar try-catch, try-catch there is a finally code block, and future.whenCompletethat Future Is finally


FutureBuilder combines asynchronous operations and asynchronous UI updates. Through it we can update the results of network requests, database reads, etc. 

future: Future object represents the asynchronous calculation currently connected to this builder;

initialData: Indicates the initialization data of a non-empty Future before completion;

builderA return function of type AsyncWidgetBuilder is a function that builds a widget based on asynchronous interaction



connectionState -Enumeration of ConnectionState, which indicates the connection status with asynchronous calculation. ConnectionState has four values: none, waiting, active, and done;


data -Asynchronous calculation of the latest data received;

error -Asynchronously calculate the latest error object received;




class FutureWidget extends StatefulWidget {

 String computeListOfTimestamps(int count) {

   StringBuffer sb = new StringBuffer();


   var random = Random();


   for (int i = 0; i < 2000; i++) {

     sb.writeln("Random Number : ${random.nextInt(2000)}");



   return sb.toString();



 Future<String> createFutureCalculation(int count) {

   return new Future(() {

     return computeListOfTimestamps(count);





 FutureWidgetState createState() => new FutureWidgetState();



class FutureWidgetState extends State<FutureWidget> {

 bool _showCalculation = false;

 bool isLoading = false;



 void _onInvokeFuturePressed() {

   setState(() {

     _showCalculation = !_showCalculation;







 Widget build(BuildContext context) {

   Widget child = _showCalculation

       ? FutureBuilder(

           future: widget.createFutureCalculation(1000),


           builder: (BuildContext context, AsyncSnapshot snapshot) {

             return Expanded(

                 child: SingleChildScrollView(

                     child: (snapshot.data == null)?Center(child: CircularProgressIndicator()):Text(

                         '${snapshot.data == null ? "" : snapshot.data}',

                         style: TextStyle(fontSize: 20.0))));


       : Text('Press Refresh to load Data');

   return new Scaffold(

     key: _scaffoldKey,

     appBar: new AppBar(

       backgroundColor: Colors.pink,

       title: new Text("Future Builder "),


     body: new Center(

         child: new Column(

             mainAxisAlignment: MainAxisAlignment.center,

             children: <Widget>[child])),

     floatingActionButton: new FloatingActionButton(

       backgroundColor: Colors.pink,

       onPressed: _onInvokeFuturePressed,

       tooltip: 'Call Future',

       child: new Icon(Icons.refresh),

     ), // This trailing comma makes auto-formatting nicer for build