Flutter landscape orientation layout

Question

How to set AppBar height in landscape mode so that it is not taking up for screen padding?

Is there a usual Flutter landscape layout Widget? Aforementioned problematic layout is as follow:

new Padding(
  padding: media.padding,
  child: new Scaffold(
      key: _scaffoldKey,
      body: new Row(
        children: <Widget>[
          new LimitedBox(
            maxWidth: 320.0,
            child: new Column(children: [
              _buildAppBar(),
              new Expanded(
                  child: new ModuleDrawer(
                widget.module.sugar,
                topPadding: 0.0,
              )),
            ]),
          ),
          new Expanded(
            child: new RecordList(
              widget.model,
            ),
          ),
        ],
      )));

Dignify

Answer 1

You could probably use the primary property of a Scaffold, in combination of detecting the orientation through a simple MediaQuery. So on landscape mode, set the primary flag to false to tell the Scaffold to not take status bar height into account when determining the AppBar height.

See the documentation:

Whether this scaffold is being displayed at the top of the screen.

If true then the height of the appBar will be extended by the height of the screen's status bar, i.e. the top padding for MediaQuery.

The default value of this property, like the default value of AppBar.primary, is true.

So in your case, something like this should do:

@override
Widget build(BuildContext context) {
    final Orientation orientation = MediaQuery.of(context).orientation;
    final bool isLandscape = orientation == Orientation.landscape;

    return new Scaffold(
        primary: !isLandscape,
        appBar: new AppBar(
          title: new Text('AppBar title'),
        ),
        body: new Center(
            child: new Text('Look at the appbar on landscape!'),
        ),
    );
}

Intersection

Time saver ;) Thx. I use your solution to make flutter gallery animation widget work in landscape mode – Ti

Based on the use case, you can also use the OrientationBuilder. Instead of depending of the device's orientation, it's based on the proportions of the parent widget. – Intersection