How to display a progress indicator for each async call FutureBuilder

Question

Below I have a simple setup to demonstrate a Stateful Widget using a FutureBuilder. When the Future async call first fires we see the CircularProgressIndicator on the screen.

After the Future is complete we see the UI which includes a refresh FlatButton, when pressed setState is called to redraw the widgets.

The Future async function is called again but this time we do not see the CircularProgressIndicator because AsyncSnapshot.hasData is true.

This means that AsyncSnapshot.hasData has its value from the previous FutureBuilder build that completed.

How can I achieve have a "pure" refresh/purge of my UI Widgets so that my CircularProgressIndicator displays on each each async data call with each Refresh button press that calls setState?

import 'dart:async';
import 'package:flutter/material.dart';

class DemoFutureBuilder extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _DemoFutureBuilder();
}

class _DemoFutureBuilder extends State<DemoFutureBuilder> {
  var _displayText = 'Hello World';

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: helloWorldAsync(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            print('=============== Snapshot no data ==========');
            return CircularProgressIndicator();
          }

          print('=============== Snapshot has data ==========');
          return Column(
            children: <Widget>[
              Text(snapshot.data),
              Padding(
                padding: EdgeInsets.only(top: 20),
                child: FlatButton(
                  child: Text('Pure & Clean Refresh'),
                  onPressed: () {
                    setState(() {
                      _displayText = 'Goodbye Cruel World';
                    });
                  },
                ),
              )
            ],
          );
        });
  }

  Future<String> helloWorldAsync() async {
    return Future<String>.delayed(Duration(seconds: 3)).then((_) {
      return _displayText;
    });
  }
}

Answer 1

I was also having the same issue i have solved it using "snapshot.connectionState" you can check it as "ConnectionState.(waiting, done or active)" in your case where you are using snapshot.hasData add one more condition for checking connection state. this will solve your problem...

you can refer this for detials https://codinginfinite.com/flutter-future-builder-pagination/

Answer 2

If you add a connection state check in your code like this:

if (!snapshot.hasData || snapshots.connectionState == ConnectionState.waiting) {
  print('=============== Snapshot no data ==========');
  return CircularProgressIndicator();
}

It should also show the progress indicator when your data gets refreshed.