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

Answer 1

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.