Flutter - Full screen CircularProgressIndicator

Question

In Flutter i try to call a web service to retrieve some data. When service works fills a list and show it on screen. I want to show a CircularProgressIndicator in full screen when if data is null (or trying to get data from service). Now CircularProgressIndicator is on the top on the page.

The code is

  Scaffold(
            body: Column(children: <Widget>[
              SafeArea(child: progress),
              loading == false ? rssi : indicator
            ]),



   final indicator = Container(
        child: Center(
      child: CircularProgressIndicator(
        valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
      ),
    ));

I want to show 'indicator' widget below 'progress' widget on the whole screen.

Any help?

Look into this : https://stackoverflow.com/questions/58277766/flutter-create-an-overlay-progress-bar/58281225#58281225 — Amit Prajapati, Dec 05 '19 at 08:34

score 2 · Answer 1 · answered Dec 05 '19 at 09:40

You can create a common ProgressIndicator widget like this,

class ProgressDialogPrimary extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var brightness = MediaQuery
        .of(context)
        .platformBrightness == Brightness.light;
    ;
    return Scaffold(
      body: Center(
        child: CircularProgressIndicator(
          valueColor: new AlwaysStoppedAnimation<Color>(AppColors.themeColorSecondary),
        ),
      ),
      backgroundColor: brightness ? AppColors.colorWhite.withOpacity(
          0.70) : AppColors.colorBlack.withOpacity(
          0.70), // this is the main reason of transparency at next screen. I am ignoring rest implementation but what i have achieved is you can see.
    );
  }
}

Then do something like this

Scaffold(
 body: isLoading
          ? ProgressDialogPrimary()
          : Column(children: <Widget>[
...
]

Output:

I changed the code too: backgroundColor: brightness ? Colors.white.withOpacity(0.70) : Colors.black.withOpacity( — Golden Lion, Oct 08 '21 at 14:06
the components work nicely. I replaced my overlay code because the debug complained it was outside the framework — Golden Lion, Oct 08 '21 at 14:21

score 1 · Answer 2 · answered Dec 05 '19 at 08:47

This works. Just tested on Dartpad:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: loading == false ? Text("loaded") : Container(
          constraints: BoxConstraints.expand(),
          child: CircularProgressIndicator()
        )
      )
    );
  }

Flutter - Full screen CircularProgressIndicator

2 Answers2