I want to create a widget that looks like this:
I have this code:
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Container(
decoration: BoxDecoration(
color: theme.cardColor,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: theme.shadowColor,
blurRadius: 5,
offset: Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Padding(
padding: EdgeInsets.all(10),
child: Text(
widget.title,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: theme.accentColor,
),
),
),
],
),
Row(
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 15),
child: Text(
"Alarm Date: " + widget.alarmDate.toString(),
style: TextStyle(
fontSize: 16,
color: theme.textTheme.bodyText1?.color,
),
),
),
Spacer(),
Switch(
value: _isToggled,
onChanged: (value) {
setState(() {
_isToggled = value;
});
},
activeColor: theme.accentColor,
),
SizedBox(width: 10),
],
),
Expanded(child:SizedBox()),
Container(
height: 20,
width: double.infinity,
// padding: EdgeInsets.all(10),
padding: EdgeInsets.only(bottom: 5),
color: theme.secondaryHeaderColor,
child: Row(
children: [
Expanded(child: SizedBox()),
Text(
widget.repeatDays.join(" "),
style: TextStyle(
fontSize: 16,
color: theme.textTheme.bodyText1?.color,
),
),
Expanded(child: SizedBox())
]
)
),
],
),
);
}
And this is the result:
The problem is that the bottom container overlaps its parent’s edges. How can I make it fit its parents edges? I tried giving the same edge to the last container, but due to the different sizes, the bottom edges still looks different from the top edges.
2
Answers
You could wrap the outermost container in a ClipRRect to cut the corners of the whole container (that contains the bottom container too).
Refer to the documentation on how to use it.
ClipRRect class
You need to provide
clipBehavior
on top Container, default it is none.