Make CircularPercentIndicator overflow into Text

user_17998744 0
Viewed 70

I have a CircularPercentIndicator with a Text under it.

It looks like this

enter image description here

I want the CircularPercentIndicator to overlap into Area 1, how do I do this?

enter image description here

My code

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    CircularPercentIndicator(
      radius: 20.0,
      lineWidth: 2.0,
      percent: 0.10,
      center: Text(
        "10%",
        textAlign: TextAlign.center,
        style: TextStyle(
          color: Colors.black,
        ),
      ),
      progressColor: Colors.red,
    ),
    // Padding(
    //   padding:
    //       EdgeInsets.symmetric(horizontal: 10.0),
    //   child: Text("Area 1"),
    // ),
    Padding(
      padding: EdgeInsets.only(),
      child: Text(
        "Area 1",
        textAlign: TextAlign.center,
        style: TextStyle(
            fontWeight: FontWeight.bold,
            color: Colors.grey[400],
            backgroundColor: Colors.black),
      ),
    )
  ],
),
dart flutter
1 Answers

using a Stack

Stack(
      children: <Widget>[

        Padding(
          padding: EdgeInsets.only(bottom: 12),
          child: Container(
            //The Container here to fill the CircularPercentIndicator with color grey, tried using "fillColor" property and it filled it as a square
            decoration: BoxDecoration(borderRadius: BorderRadius.circular(35),color: Colors.grey),
            child: CircularPercentIndicator(
              backgroundColor: Colors.black,
              radius: 35.0,
              lineWidth: 2.0,
              percent: 0.10,
              center: Text(
                "10%",
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.black,
                ),
              ),
           //   progressColor: Colors.red,
            ),
          ),
        ),
        Positioned(
          bottom: 1,
          child: Container(
            color: Colors.black,
            //Width is as twice as radious(Dia of the indicator) as in example image
            width: 70,
            height: 30,
            child: Center(
              child: Text(
                "Area 1",
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.grey[400],
                ),
              ),
            ),

          ),
        ),


      ],
    ),

Result

user_78147810
Related