Make CircularPercentIndicator overflow into Text - flutter

Question

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

Answer 1

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