How to Overlay and Center Circular Progress Indicator with FutureBuilder Flutter

Question

I have a FutureBuilder that shows a CircularProgressIndicator while data is being fetched. Currently, the CircularProgressIndicator shows up at the top left corner of my screen and when it shows, nothing else is on the screen behind it. I would like to have the indicator centered and have it as an overlay in front of my other widgets when data is being fetched.

class PriceScreen extends StatefulWidget {
  @override
  PriceScreenState createState() => PriceScreenState();
}

class PriceScreenState extends State<PriceScreen> {
  Future<Map> futureData;

  Future<Map> getData() async {
    ...
  }

  @override
  void initState() {
    super.initState();
    futureData = getData();
  }

  @override
  Widget build(BuildContext context) {
    //get object of the provided class dataProvider

    return Scaffold(
  appBar: AppBar(
    title: Text('My app'),
  ),
  body: FutureBuilder<Object>(
      future: futureData,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else
          return Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
              .
              .
              .
              .
              .
              
);
  }
}

score 2 · Accepted Answer · answered Nov 02 '20 at 19:39

To center it, use the Center widget To overlay it above another widget use the Stack widget and place it after the part you want it to go over in the children list

Edit: to make the overlaying widget take the size of the underlaying widget use Positioned.fill around the overlaying widget.

score 1 · Answer 2 · answered Nov 02 '20 at 19:41

To center the CircularProgressIndicator() simply wrap it with Center widget.

  return Center(child: CircularProgressIndicator()) ;

There are packages available on pub.dev like modal_progress_hud ( https://pub.dev/packages/modal_progress_hud ) and loading_overlay ( https://pub.dev/packages/loading_overlay ) that you can use to easily show a modal progress indicator. However you are using FutureBuilder to fetch data, so you'll have to make sure that widgets can be displayed before the data arrives.

score 1 · Answer 3 · answered Nov 02 '20 at 19:45

wrap your CircularProgressIndicator() in a center. Example:

Center(child:CircularProgressIndicator());

You could also wrap the whole thing in a center like this:

body: Center(
      child: FutureBuilder<Object>(
      future: futureData,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else
          return Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
              .
              .
              .
              .
              .
              
));

I'm not sure what you mean by overlay, since in your code example there is nothing other than the futurebuilder.

How to Overlay and Center Circular Progress Indicator with FutureBuilder Flutter

3 Answers3