CODEWITHSUNDEEP
flutterlayout
El Hombre Sin Nombre
El Hombre Sin Nombre

Reputation: 3102

Flutter - Full screen CircularProgressIndicator

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?

Upvotes: 1

Views: 4362

Answers (2)

Ravinder Kumar
Ravinder Kumar

Reputation: 8010

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:

enter image description here

Upvotes: 2

Gazihan Alankus
Gazihan Alankus

Reputation: 11994

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()
        )
      )
    );
  }

Upvotes: 1

Related Questions