Landscape mode and responsive framework

[prateekmedia]

Intro

This framework works flawlessly for small screen devices, but when you turn your device into landscape mode the situation also becomes upside down.

The Problem

Although this is able to hand my approximately 450x850 mobile, but when I turn it in landscape mode then all the ui elements are too big and some are even overflowing cause of the less dpi in small screen but that's not the case in portrait mode.

You can also try this on the recreated flutter website, when you turn your phone with any resolution into landscape mode then everything becomes too big to handle event the bottomNavigationBar also doesnt respect the small screen.

It seems like it doesn't respect nor recognize small screens in landscape mode cause it thinks that the width is higher so that is true in landscape but it should also consider that the height is low in landscape mode cause the resolution becomes 850x450(in my small screen case)

Suggestion / Possible Solution

Give us the option to specify other properties for landscape mode or by default respect landscape mode cause even if the width is high in it but the height is very low in that mode, or it should understand landscape mode by itself by checking the aspect ratio which is my case is approx 2:1 in landscape mode.

Enough Talk, Show me your code

This is the code of my builder inside MaterialApp

builder: (context, widget) => ResponsiveWrapper.builder(
  BouncingScrollWrapper.builder(context, widget),
  minWidth: 450,
  defaultScale: true,
  breakpoints: [
    ResponsiveBreakpoint.resize(500, name: MOBILE),
    ResponsiveBreakpoint.autoScale(800, name: TABLET),
    ResponsiveBreakpoint.autoScale(1000, name: TABLET),
    ResponsiveBreakpoint.resize(1200, name: DESKTOP),
    ResponsiveBreakpoint.autoScale(2460, name: "4K"),
  ],
),

[rayliverified]

Great issue. Thanks for providing a good explanation. I think I understand what you're saying but if you could provide some images of layouts that don't look right in landscape mode, that'd be great.

Thanks for using this library!

[prateekmedia]

Great issue. Thanks for providing a good explanation. I think I understand what you're saying but if you could provide some images of layouts that don't look right in landscape mode, that'd be great.

Thanks for using this library!

Ok let me capture the issue

[prateekmedia]

@searchy2

Portrait vs Landscape

Although it fits in landscape in my other 1280x720 mobile and other tablet but the 450x850 mobile doesn't fits it well.

[rayliverified]

Thanks, I will take a look and add a landscape param most likely.

For now, can you take a look at ResponsiveRowColumn to see if it suits your needs?

[prateekmedia]

For now, can you take a look at ResponsiveRowColumn to see if it suits your needs?

Thanks for the info about ResponsiveRowColumn, previously I was using a Similar setup as a widget cause their is not much info about this in the READme.

But this also doesn't do much and the problem still remains.. :(,

I hope this gets solved soon till then I am attaching the code of my responsive builder below:

builder: (context, widget) => ResponsiveWrapper.builder(
  BouncingScrollWrapper.builder(context, widget),
  minWidth: 450,
  defaultScale: true,
  breakpoints: [
    ResponsiveBreakpoint.resize(500, name: MOBILE),
    ResponsiveBreakpoint.autoScale(800, name: TABLET),
    ResponsiveBreakpoint.autoScale(1000, name: TABLET),
    ResponsiveBreakpoint.resize(1200, name: DESKTOP),
    ResponsiveBreakpoint.autoScale(2460, name: "4K"),
  ],
),

[rayliverified]

Will create a fix for this issue soon.

[rayliverified]

Good news! MediaQuery contains the landscape and portrait orientation property.

MediaQuery.of(context).orientation
https://api.flutter.dev/flutter/widgets/MediaQueryData/orientation.html

The ResponsiveFramework resolves the correct values to MediaQuery so you can confidently use that property.

[prateekmedia]

Good news! MediaQuery contains the landscape and portrait orientation property.

MediaQuery.of(context).orientation
https://api.flutter.dev/flutter/widgets/MediaQueryData/orientation.html

The ResponsiveFramework resolves the correct values to MediaQuery so you can confidently use that property.

Can you elaborate more?

[rayliverified]

If you use MediaQueryData's orientation property, you will get Orientation.landscape and Orientation.portrait which is what you wanted right?

[prateekmedia]

Hey @searchy2,

Sorry for late reply, that's not what I wanted.

If you read my problem again then it when I set the breakpoints of responsive framework then it treats like 450x850(widthxheight) in portrait but in landscape it will become 850x450 so the breakpoints will think its a Tablet and will not apply the responsive breakpoint formula (hence some of my objects will come out of the screen as I reported in start of this issue), Code reference below

builder: (context, widget) => ResponsiveWrapper.builder(
  ...
  breakpoints: [
    ResponsiveBreakpoint.resize(500, name: MOBILE),  // my 450x850 mobile will behave as a mobile in portrait
    ResponsiveBreakpoint.autoScale(800, name: TABLET), // same 450x850 mobile will behave as a tablet \
        in landscape as in this mode width and height are switched(850x450),
    ...
  ],
),

I hope you can understand the underlying issue, It is not doing what it should do i.e. become responsive on all form factors and orientations.

Regards Prateek.

[rayliverified]

My apologies, I thought I reopened this issue already. Thank you for the additional information.

[fdarsot]

@searchy2
I also have the same issue. when turning my devices into landscape mode, the responsiveness is not working (everything is not fitting the screen properly). Any idea when a fix will be out?