CODEWITHSUNDEEP
dartflutter
Ajay Singh Beniwal
Ajay Singh Beniwal

Reputation: 19037

CircularProgressIndicator not displayed in flutter

Im trying to display the CircularProgressIndicator in my flutter app on click of button but it does not render the circular progress bar, but as soon as I change the code to use LinearProgressBar the progress bar comes without any issue. So wanted to know is there any special setting which I need to display the circular loading indicator?

Works 

if (_isFetching) {
  return new Scaffold(
    body: new Center(
      child: new SizedBox(
        width: 40.0,
        height: 40.0,
        child: const LinearProgressIndicator(backgroundColor: Colors.black)),
  ));
}

Do not work

if (_isFetching) {
  return new Scaffold(
    body: new Center(
      child: new SizedBox(
        width: 40.0,
        height: 40.0,
        child: const CircularProgressIndicator(backgroundColor: Colors.black)),
  ));
}

Upvotes: 7

Views: 10505

Answers (2)

kine
kine

Reputation: 1537

Make sure the progress bar's value color is different from the parent widget's background color. Try this:

if (_isFetching) {
  return Scaffold(
      body: Center(
      child: SizedBox(
        width: 40.0,
        height: 40.0,
        child: const CircularProgressIndicator(
            backgroundColor: Colors.black,
            valueColor: AlwaysStoppedAnimation<Color>(Colors.red))),
  ));
}

Upvotes: 2

ap14
ap14

Reputation: 4721

You can refer to the docs here. You are using backgroundColor property which only defines background color of indicator and not the type of indicator. I'm using null for Indeterminate type. You can use valueColor[doc] property to change the color of indicator. Here is simple code and it works fine.

if (_isFetching) {
          return new Scaffold(
              body: new Center(
            child: new SizedBox(
                width: 40.0,
                height: 40.0,
                child:
                    const CircularProgressIndicator(
        value: null,
        strokeWidth: 2.0,
      )),
          ));
        }

Upvotes: 1

Related Questions