How can I create a container with rounded corners as shown below? I tried using container with width more than the screen width. But that constraints it inside the screen. I tried using an OverFlow box, but couldn't get the same result as well. I don't want to use clipRect to make this as I want to apply animation on the corners.
Edit: Added container snippet with the resulting outcome to clear doubts
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 500,
decoration: BoxDecoration(
color: Colors.green, borderRadius: BorderRadius.circular(500)),
),
),
);
}
I have managed to get similar to what I want by using scale transformation. Would like to see a different approach though.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Align(
alignment: Alignment.bottomCenter,
child: Transform.scale(
scale: 1.7,
child: Container(
height: 400,
decoration: BoxDecoration(
color: Colors.green, borderRadius: BorderRadius.circular(200)),
),
),
),
);
}
I have done this using clippath. If you change size of Container then Clippath size automatically change as per Container size.
You can modify Path for different shape as per your requirement so this is very useful.
Here, I just use ClipPath widget and I create MyCustomShape class for modify shape of child Container widget
class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black87,
body: ClipPath(
clipper: MyCustomShape(),
child: Container(
color: Colors.green[800],
height: double.infinity,
),
),
);
}
}
class MyCustomShape extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = new Path(); // use for shape your container
path.lineTo(0.0, 100);
path.quadraticBezierTo(size.width * 0.5, 0.0, size.width, 100);
path.lineTo(size.width, size.height);
path.lineTo(0.0, size.height);
path.close();
return path;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With