Flutter Container filling full screen with rounded edges

I would like to know how I make a layout similar to the images below in flutter. I tried using a container, but it did not populate the screen, when I used height: double.infity he disappeared from the screen.` And if I leave the fixed height on other devices will not get 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"),
                    ],
                  )),
            )
          ],
        ),
      ),
    );

insert the description of the image here

insert the description of the image here

Author: Matheus Ribeiro, 2020-04-03
Source

1 answers

You either work with fixed height or do a calculation 

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

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

Change as you wish...

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 MediaQuery class will give you a lot of 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 take the size thus bringing the measures 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 .

 1
Author: Matheus Ribeiro, 2020-04-03 12:11:01