Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to draw container outside screen width in flutter?

Tags:

flutter

dart

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.

required

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

result

like image 730
RoyalGriffin Avatar asked Aug 05 '19 10:08

RoyalGriffin


2 Answers

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

enter image description here

like image 157
RoyalGriffin Avatar answered Oct 22 '22 03:10

RoyalGriffin


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

enter image description here

like image 1
Sanjayrajsinh Avatar answered Oct 22 '22 02:10

Sanjayrajsinh