Search code examples
androidiosflutterdartprogress-indicator

How to put a CircularProgressIndicator inside another CircularProgressIndicator in Flutter?


I tried doing this, but it ended up one upon another. The CircularProgressIndicator was stacked upon one another instead of being inside as I have tried in the following code:

body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 200,
              width: 200,
              child: Column(
                children: <Widget>[
                  CircularProgressIndicator(
                backgroundColor: Colors.pinkAccent,
                strokeWidth: 30.0,
                value: 0.7,
                valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
              ),
                  SizedBox(
                    height: 150,
                    width: 150,
                    child: CircularProgressIndicator(
                      backgroundColor: Colors.red,
                      strokeWidth: 10.0,
                      value: 0.7,
                      valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
                    ),
                  ),
              ],
            ),
            ),
          ],
        ),
      ),

Solution

  • You have to stack these widgets on top of each other with Stack widget

    Stack(
        children: <Widget>[
          SizedBox(
            height: 200,
            width: 200,
            child: CircularProgressIndicator(
              backgroundColor: Colors.pinkAccent,
              strokeWidth: 30.0,
              value: 0.7,
              valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
            ),
          ),
          Positioned(
            left: 25,
            top: 25,
            child: SizedBox(
              height: 150,
              width: 150,
              child: CircularProgressIndicator(
                backgroundColor: Colors.red,
                strokeWidth: 10.0,
                value: 0.7,
                valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
              ),
            ),
          )
        ],
      ),
    

    OUTPUT

    enter image description here