CODEWITHSUNDEEP
flutterflutter-futurebuilder
CuriousCoder
CuriousCoder

Reputation: 262

How to Overlay and Center Circular Progress Indicator with FutureBuilder Flutter

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>[
              .
              .
              .
              .
              .
              
);
  }
}

Upvotes: 2

Views: 3061

Answers (3)

Kelli
Kelli

Reputation: 157

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.

Upvotes: 1

bluenile
bluenile

Reputation: 6029

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.

Upvotes: 1

Pieter van Loon
Pieter van Loon

Reputation: 5648

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.

Upvotes: 2

Related Questions