I'm trying to make a screen where all bottom border (except the last one at bottom) should have a rounded bottom border, left and right.
I'm able to create the rounded borders, but, how can I hide the background color ou round top borders and connect it to the previous widget?
As you can see in image below, I have the rounded borders but the background color (green) appears between blue and red. How can I hide it?
How can I achieve that borders connection?
Code
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.green,
appBar: AppBar(
elevation: 0,
automaticallyImplyLeading: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
],
),
body: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15)),
child: Container(
height: 250.0,
margin: const EdgeInsets.only(
bottom: 6.0), //Same as `blurRadius` i guess
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15)),
color: Colors.blue,
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 6.0,
),
],
),
),
),
ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15)),
child: Container(
height: 300.0,
margin: const EdgeInsets.only(
bottom: 6.0), //Same as `blurRadius` i guess
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15)),
color: Colors.red,
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 6.0,
),
],
),
),
),
],
),
),
);
}
I've wrapped the first ClipRRect inside a Container with the color (background) of the next ClipRRec, by this I achieve the effect I wanted. I'm not sure if it's the right way
Container(
color: Colors.red,
child: ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15)),
child: Container(
height: 250.0,
margin: const EdgeInsets.only(
bottom: 6.0), //Same as `blurRadius` i guess
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15)),
color: Colors.blue,
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 6.0,
),
],
),
),
),
),
Result
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.