CODEWITHSUNDEEP
flutterflutter-layout
Doc
Doc

Reputation: 11651

Sizing a container to exact half the screen size in flutter

I am trying to get a container to be exactly half the screen height[after considering the AppBar height] and half the screen width.

This is what I came up with...

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Flexible(
            child: Container(
              width: MediaQuery.of(context).size.width / 2,
              color: Colors.red,
            ),
          ),
          Flexible(
            flex: 1,
            child: Container(),
          )
        ],
      ),
    );
  }
}

Is there a better way? current layout

Upvotes: 34

Views: 107459

Answers (5)

Anurag Bhalekar
Anurag Bhalekar

Reputation: 981

Or just simply...

SizedBox(
          height: MediaQuery.of(context).size.height*0.5,
          child: ...,
        ),

Upvotes: 6

Hossein Hadi
Hossein Hadi

Reputation: 1487

The best way and simplest route to this and similar problems is simply by using FractionallySizedBox widget ; e.g

FractionallySizedBox(
    alignment: Alignment.topCenter,
    widthFactor: 0.5,
    child: Container(
    height: 100,
  ),
),

This widget (FractionallySizedBox) lets you build up your child by specifying the fraction of the parent width (or height) which is available to the child widget. After that , by specifying the alignment , you can specify the manner the rest of the space would be allocated.

For more help on this widget , please visit the offical help page of this widget.

Upvotes: 38

Pete Houston
Pete Houston

Reputation: 15069

You can deduct AppBar's height to configure Container size.

@override
Widget build(BuildContext context) {
  var appBar = AppBar();
  return Scaffold(
    appBar: appBar,
    body: Align(
      alignment: Alignment.topCenter,
      child: Container(
        height: (MediaQuery.of(context).size.height - appBar.preferredSize.height) / 2,
        width: MediaQuery.of(context).size.width / 2,
        color: Colors.red,
      ),
    ),
  );
}

Upvotes: 21

dshukertjr
dshukertjr

Reputation: 18573

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:

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

Upvotes: 41

dshukertjr
dshukertjr

Reputation: 18573

You are on the right track about using MediaQuery, but your code can be a lot simpler:

  Scaffold(
    appBar: AppBar(),
    body: Align(
      alignment: Alignment.topCenter,
      child: Container(
        height: MediaQuery.of(context).size.height / 2,
        width: MediaQuery.of(context).size.width / 2,
        color: Colors.red,
      ),
    ),
  );

Upvotes: 14

Related Questions