I have a Container in Flutter, which has 3 different Container with different colors as a child. The Main Container doesn't have rounded corners. Any ideas?
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
height: 8,
width: 300,
child: Row(children: [
Container(
decoration: BoxDecoration(color: Colors.lightGreen),
width: 300 * 0.37,
),
Container(
decoration: BoxDecoration(color: Colors.grey[300]),
width: 300 * 0.15,
),
Expanded(
child: Container(
decoration: BoxDecoration(color: Colors.redAccent),
),
),
]),
),
CodePudding user response:
Wrap your outer container with ClipRRect and give it a border radius:
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
height: 100,
width: 300,
child: Row(children: [
Container(
decoration: BoxDecoration(color: Colors.lightGreen),
width: 300 * 0.37,
),
Container(
decoration: BoxDecoration(color: Colors.grey[300]),
width: 300 * 0.15,
),
Expanded(
child: Container(
decoration: BoxDecoration(color: Colors.redAccent),
),
),
]),
),
),
CodePudding user response:
You can give different border and color for each container like that
Container(child : Widget(),
decoration: BoxDecoration(
border: Border.all(
color: Colors.anyColor,
),
borderRadius: BorderRadius.all(Radius.circular(anyValue))
))