title: How to Overlay and Center Circular Progress Indicator with FutureBuilder Flutter
body: <p>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.</p>
  <pre><code>class PriceScreen extends StatefulWidget {
    @override
    PriceScreenState createState() =&gt; PriceScreenState();
  }
  
  class PriceScreenState extends State&lt;PriceScreen&gt; {
    Future&lt;Map&gt; futureData;
  
    Future&lt;Map&gt; 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&lt;Object&gt;(
        future: futureData,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return CircularProgressIndicator();
          } else
            return Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: &lt;Widget&gt;[
                .
                .
                .
                .
                .
                
  );
    }
  }
  </code></pre>