Search code examples
layoutlandscapeflutter

Flutter landscape orientation layout


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

enter image description here

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

Solution

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