I have a CircularPercentIndicator with a Text under it.

It looks like this

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

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),
      ),
    )
  ],
),

CodePudding user response：

using a

CodePudding user response：

I think you need to use stack instead of column. This answer might help you while implementing.