CODEWITHSUNDEEP
flutterflutter-layout
Vinoth Kumar
Vinoth Kumar

Reputation: 13431

Orientation Builder gives wrong orientation

In my application I'm using a GridView to display a grid of categories and a TextField. I want to change number of items displayed in one line based on Screen Orientation (i.e when in Portrait mode 5 items per line and in landscape mode 8 items per line).

I'm trying to achieve this by using OrientationBuilder widget. It works perty fine until i open softkeyboard to edit the TextField.

But when i open softkeyboard the OrientationBuilder returns orientation as landscape thus leading to overflow issues.

Here is my code,

return new Scaffold(
      appBar: buildFilterAppBar(context),
      body: new OrientationBuilder(builder: (context, orientation) {
        return new Column(
          children: <Widget>[
            new Expanded(
              child: new ListView(
                children: <Widget>[
                  buildContentTitle(
                      context, true, Icons.local_offer, '', 'Choose category'),
                  new GridView.count(
                    crossAxisCount: orientation == Orientation.portrait ? 5 : 8,
                    shrinkWrap: true,
                    physics: new NeverScrollableScrollPhysics(),
                    children: buildCategories(orientation),
                  ),
                  new Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      buildContentTitle(context, false, null,
                          'assets/money_pouch.png', 'Set a price range'),
                      new Padding(
                        padding: const EdgeInsets.only(left: 44.0),
                        child: new Text(
                          'Price (\u20B9)',
                          style: new TextStyle(
                              color: Theme.of(context).primaryColorDark,
                              fontSize: 15.0,
                              fontWeight: FontWeight.w600),
                        ),
                      ),
                      new Padding(
                        padding: const EdgeInsets.only(left: 44.0, right: 12.0),
                        child: new Row(
                          children: <Widget>[
                            new Flexible(
                                child: new TextField(
                                  decoration: new InputDecoration(labelText: 'From'),
                                )),
                            new Container(
                              width: 1.0,
                              height: 40.0,
                              color: Colors.grey[700],
                              margin: const EdgeInsets.symmetric(horizontal: 5.0),
                            ),
                            new Flexible(
                                child: new TextField(
                                  decoration: new InputDecoration(labelText: 'To'),
                                )),
                          ],
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            new MaterialButton(
              padding: const EdgeInsets.symmetric(vertical: 15.0),
              onPressed: () {},
              color: Theme.of(context).accentColor,
              minWidth: double.infinity,
              child: new Text(
                'APPLY  FILTERS',
                style: new TextStyle(color: Colors.white, fontSize: 16.0, fontWeight: FontWeight.w500),
              ),
            ),
          ],
        );
      }),
    );

Is there any other option rather than using OrientationBuilder or is there any way to rectify it?

Thanks in advance.

Upvotes: 19

Views: 7673

Answers (1)

Vinoth Kumar
Vinoth Kumar

Reputation: 13431

It's already said in the documentation that

OrientationBuilder builds a widget tree that can depend on the parent widget's orientation (distinct from the device orientation).

In my case when soft keyboard is opened, width of the screen becomes greater than height(Note that I'm calculating the height as Full Screen Height - Soft Keyboard height).

Thus OrientationBuilder returns as landscape which is the correct behaviour as per documentation.

Hence OrientationBuilder cannot be used for this case.

To solve the issue we can use orientation obtained from MediaQuery

MediaQuery.of(context).orientation == Orientation.portrait ? 5 : 8

Upvotes: 51

Related Questions