How to draw container outside screen width in flutter? - flutter

Question

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)),
),
),
);
}

Answer 1

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)),
),
),
),
);
}

Answer 2

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;
}

Answer 3

after reading your questions and comments many time i hope this what you are looking for
class dummy2 extends StatefulWidget {
#override
_dummy2State createState() => _dummy2State();
}
class _dummy2State extends State<dummy2> with TickerProviderStateMixin {
AnimationController controller;
Animation<double> animaton;
#override
initState() {
super.initState();
controller =
AnimationController(vsync: this, duration: Duration(seconds: 1));
animaton = Tween<double>(begin: 1, end: 2.5).animate(
CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn));
animaton.addListener(() {
setState(() {});
});
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
actions: <Widget>[
FlatButton(
onPressed: () {
controller.forward();
},
child: Text('forward')),
FlatButton(
onPressed: () {
controller.reverse();
},
child: Text('reverse'))
],
),
body: Transform.scale(
child: Container(
decoration: BoxDecoration(
color: Colors.deepPurple, shape: BoxShape.circle),
),
scale: animaton.value,
)));
}
}

Answer 4

I believe you should use SafeArea within a container to fill it. Like this:
Container(
color: Colors.blue,
child: SafeArea(child: ### // you nav or functions),
),
See: https://api.flutter.dev/flutter/widgets/SafeArea-class.html