How to create circle container with border in flutter?
8,223
Solution 1
I have just faced the same issue...
Easy workaround:
Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: Colors.green.withOpacity(0.25), // border color
shape: BoxShape.circle,
),
child: Padding(
padding: EdgeInsets.all(2), // border width
child: Container( // or ClipRRect if you need to clip the content
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue, // inner circle color
),
child: Container(), // inner content
),
),
),
Solution 2
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(width: 1, color: Colors.red)
),
),
Author by
MD MEHEDI HASAN
Hi! I AM FLUTTER DEVELOPER š š Iām currently working on augnitive.com š± Iām currently learning Dart & Flutter || Python & Django šÆ Iām looking to collaborate on Flutter & Django Development š¤ Iām looking for help with Flutter & Django Development š¬ Ask me about: Dart, Flutter, UX-UI, Python, Django š« How to reach me: [email protected] or Direct Contact: +8801790180825 ā” Fun fact: coffee and bugs
Updated on December 28, 2022Comments
-
MD MEHEDI HASAN over 1 year
As you can notice, the background color of the decoration is slightly overflowing the circular border. I've tried in different ways (e.g. using ClipOval) but the result is always the same.
-
Ismaeel Sherif over 2 yearsthis works better than using the border parameter because it doesn't leave white pixels around the circular border