Flutter layout - Set container to half height

PHOTO EMBED

Sun May 02 2021 14:29:08 GMT+0000 (UTC)

Saved by @raymondfdavey #dart

Scaffold(
      appBar: AppBar(),
      body: Align(
        alignment: Alignment.topCenter,
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return Container(
              height: constraints.maxHeight / 2,
              width: MediaQuery.of(context).size.width / 2,
              color: Colors.red,
            );
          },
        ),
      ),
    );
content_copyCOPY

If you want the container's height to be the half of the available space, you can use LayoutBuilder widget. With LayoutBuilder widget, you can know inside the builder function what the max available width and height would be. The example usage in your case would be like this:

https://stackoverflow.com/questions/54156365/sizing-a-container-to-exact-half-the-screen-size-in-flutter