Recognition where it is due. I got most of this approach from Ankit Dubey from stackOverflow. Though I added how to round the circle. If you find this helpful, please head over to his answer in stackOverflow and upvote him. Here
Your constants file
final kInnerDecoration = BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(32),
);
// border for all 3 colors
final kGradientBoxDecoration = BoxDecoration(
gradient: LinearGradient(
colors: [Colors.yellow.shade600, Colors.orange, Colors.red]),
border: Border.all(
color: Colors.amber, //kHintColor, so this should be changed?
),
borderRadius: BorderRadius.circular(32),
);
Your Widget
`ClipOval(
clipBehavior: Clip.antiAlias,
child: Container(
child: Padding(
padding: const EdgeInsets.all(8.0), //width of the border
child: ClipOval(
clipBehavior: Clip.antiAlias,
child: Container(
width:
240.0, // this width forces the container to be a circle
height:
240.0, // this height forces the container to be a circle
child: Text(
"12",
style: TextStyle(
fontSize: 200.0,
),
textAlign: TextAlign.center,
),
decoration: kInnerDecoration,
),
),
),
decoration: kGradientBoxDecoration,
),
),`
Here is your end result
Please follow my page to share in this Flutter journey!
Top comments (2)
Thank you!
PS. Better to set child as a last argument.
Also it's not necessary to use ClipOval: