Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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,
            ),
          ),
        ],
      )));
like image 903
Kyaw Tun Avatar asked Oct 09 '17 14:10

Kyaw Tun


People also ask

How do you change the landscape on flutter?

Step 1: Open the screen in which you want to set the orientation. Step 2: Add the init() method and then call the SystemChrome. setPreferredOrientations method to set only landscape mode. Step 3: Add the dispose method and then call the SystemChrome.


1 Answers

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!'),
        ),
    );
}
like image 139
Iiro Krankka Avatar answered Sep 21 '22 18:09

Iiro Krankka