'How to color border of only specific sides of Circular Container in Flutter
I would like to know how only the border color can be set for specific sides of a circular container. Here's a small snip of what I'm trying to achieve:
The image above is wrapped inside a circular container whose border is blue on all sides but the top left.
The code I have written by far:
Container(
height: height * 0.15,
width: width * 0.3,
color: Colors.red,
// padding: EdgeInsets.only(
// left: width * 0.02, right: width * 0.02),
child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment: CrossAxisAlignment.center,
children: [
Stack(
children: [
Container(
width: width * 0.2,
height: height * 0.1,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(100),
topRight: Radius.circular(100),
bottomLeft: Radius.circular(100),
bottomRight: Radius.circular(100))),
),
Positioned(
// top: height * 0.1,
left: width * 0.12,
bottom: height * 0.001,
child: Container(
height: height * 0.04,
width: width * 0.08,
decoration: BoxDecoration(
color: Color.fromRGBO(73, 72, 73, 0.4),
borderRadius: BorderRadius.circular(100),
),
child: Icon(Icons.camera_alt_rounded,
color: Colors.white),
),
)
],
),
Row(
children: [
Icon(Icons.upgrade, color: Colors.white),
SizedBox(
height: height * 0.05,
),
Text(
'Upgrade Now',
textScaleFactor: textScale,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 12),
)
],
)
],
),
),
Any help will be appreciated. Please note I am open to all sorts of design suggestions beyond the code that I have written by far.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|