Is it possible to achieve or stack paint object over another like this. I tried many resources for custom painter but was not able to stack the text in center of the circle and applying gradient behind circle. Help appreciated.
You don't need Custom paint to achieve this. You can create the layout using stack like the following
Stack(
children: [
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.orangeAccent.withOpacity(0.4),
Colors.transparent
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
stops: [0.4, 1])),
width: 100,
height: 200,
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.deepPurple,
border: Border.all(color: Colors.white, width: 3)),
width: 100,
height: 100,
child: Center(
child: Text(
"80",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w900,
color: Colors.white),
)),
),
],
)