Flutter Container filling the full screen with rounded edges

Question

I would like to know how to make a layout similar to the pictures below in flutter. I tried to use a container, but it did not fill the screen, when I used height: double.infity it disappeared from the screen. ` And if I leave the height fixed on other Vices it won’t be cool.

body: SingleChildScrollView(
        child: Stack(
          children: <Widget>[
            SizedBox(height: 80,),
            Container(
              padding: EdgeInsets.all(10),
              height: 800,
              width: double.infinity,
              color: Colors.transparent,
              child: Container(
                  decoration: new BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                        topLeft: const Radius.circular(40.0),
                        topRight: const Radius.circular(40.0),
                      )),
                  child: Column(
                    children: <Widget>[
                      Text("Hu"),
                    ],
                  )),
            )
          ],
        ),
      ),
    );

Answer 1

Either you work with fixed height or make a calculation

MediaQuery.of(context).size.height*0.8

this way your container will occupy 80% of the screen, this on any device.

Change the shape you want...

body: SingleChildScrollView(
        child: Stack(
          children: <Widget>[
            SizedBox(height: 80,),
            Container(
              padding: EdgeInsets.all(10),
              height: MediaQuery.of(context).size.height*0.8,
              width: double.infinity,
              color: Colors.transparent,
              child: Container(
                  decoration: new BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                        topLeft: const Radius.circular(40.0),
                        topRight: const Radius.circular(40.0),
                      )),
                  child: Column(
                    children: <Widget>[
                      Text("Hu"),
                    ],
                  )),
            )
          ],
        ),
      ),
    );

Explanation

The class MediaQuery will give you much useful information about your current screen, proportions, measures, context and so on... In your case it is good to use this class because from it you can catch the size thus bringing the measurements of your screen, as the width and the height, so with this you can perform calculations to better display your Widget

If you want to know more about Mediaquery.