Landscape mode and responsive framework #38

prateekmedia · 2021-01-20T08:55:51Z

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

The text was updated successfully, but these errors were encountered:

rayliverified · 2021-01-24T03:52:06Z

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 · 2021-01-24T05:15:53Z

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 · 2021-01-24T05:25:33Z

@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 · 2021-01-24T05:28:51Z

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?

rayliverified · 2021-02-02T06:12:55Z

Will create a fix for this issue soon.

rayliverified · 2021-03-03T04:10:44Z

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 · 2021-03-03T04:23:54Z

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 · 2021-03-03T04:49:07Z

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

prateekmedia · 2021-03-08T10:44:52Z

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 · 2021-03-14T17:04:31Z

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

fdarsot · 2021-03-18T02:35:50Z

@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?

rayliverified · 2021-03-18T02:47:11Z

This'll be the next thing I look at.

HasanMuslemani · 2021-03-24T03:42:23Z

@searchy2 Any timeline for the fix?

rayliverified · 2021-03-24T03:43:59Z

Not at the current time. This is an involved issue that needs quite a bit of thought to fix.

Do you have any suggestions?

HasanMuslemani · 2021-03-24T03:47:34Z

@searchy2 Are you using MediaQuery.of(context).size.width to determine the width? If so, you could change that to MediaQuery.of(context).size.shortestSide which will ensure the width is never changing even if they switch to landscape.

rayliverified · 2021-03-24T04:25:11Z

I am not. That's a good suggestion, thank you!

fdarsot · 2021-03-29T21:16:58Z

Any timeline for a fix @searchy2 ?

fdarsot · 2021-04-13T20:02:03Z

? @searchy2

marchellodev · 2021-05-10T18:45:41Z

Having the exactly the same issue

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

marchellodev · 2021-05-10T19:00:52Z

Seems to be related to #48

marchellodev · 2021-05-10T19:55:48Z

This is the temporary solution that seems to be working:

      builder: (context, child) {

        const portraitBrakepoints = [
          ResponsiveBreakpoint.resize(480, name: MOBILE),
          ResponsiveBreakpoint.resize(520, name: MOBILE, scaleFactor: 1.4),
          ResponsiveBreakpoint.resize(600, name: TABLET, scaleFactor: 1.2),
          ResponsiveBreakpoint.autoScale(800, name: TABLET, scaleFactor: 1.4),
          ResponsiveBreakpoint.resize(1000, name: DESKTOP, scaleFactor: 1.8),
          ResponsiveBreakpoint.autoScale(2460, name: '4K', scaleFactor: 2.2),
        ];

        const landscapeBrakepoints = [
          ResponsiveBreakpoint.resize(480, name: MOBILE, scaleFactor: 0.6),
          ResponsiveBreakpoint.resize(520, name: MOBILE, scaleFactor: 0.6),
          ResponsiveBreakpoint.resize(600, name: TABLET, scaleFactor: 0.8),
          ResponsiveBreakpoint.autoScale(800, name: TABLET, scaleFactor: 0.8),
          ResponsiveBreakpoint.resize(1000, name: DESKTOP, scaleFactor: 1.1),
          ResponsiveBreakpoint.autoScale(1200, name: DESKTOP, scaleFactor: 1.1),
          ResponsiveBreakpoint.autoScale(2460, name: '4K', scaleFactor: 1.7),
        ];

        return Container(
          key: UniqueKey(),
          child: ResponsiveWrapper.builder(
              child: child!,
              minWidth: 480,
              defaultScale: true,
              breakpoints:
                  MediaQuery.of(context).orientation == Orientation.portrait
                      ? portraitBrakepoints
                      : landscapeBrakepoints),
        );
      },

key: UniqueKey() causes the app to restart when the screen size changes. Without the key it does not seeem to be working at all.

@searchy2 Can you make it so we can specify different breakpoints for different opientations please :> ?
i. e.

ResponsiveWrapper(
    child,
    breakpoints: [],
    breakpointsLandscape: [],
)

Although in this case the desktop app does not behave consistently when resizing window, since orientation seems to be calculated based on height and width.
So I would suggest to ignore the orientation variable on desktop and add third array with breakpoints :)

why is responsiveness so complicated...

rayliverified · 2021-05-10T19:58:11Z

Thank you for the experiments and additional information.
I think I have the info I need to create a solution.

I can probably release a new version this week if everyone in this thread is willing to help me test.

fdarsot · 2021-05-10T23:37:25Z

@searchy2 sure! eagerly awaiting the release!

fdarsot · 2021-05-17T19:50:41Z

@searchy2 any luck?

fdarsot · 2021-05-27T21:18:07Z

@searchy2 ??

marchellodev · 2021-06-03T18:10:05Z

@searchy2 If you don't have the time to fix this, could you please tell us what is the proper way to do it, so that we can submit a PR?

fdarsot · 2021-06-03T20:05:24Z

@searchy2 my team and i are getting close to launch and this is one of the few missing pieces. please update when you can.

rayliverified · 2021-06-04T00:09:09Z

My apologies, the solution here is to add a landscape breakpoints param and switch based on the media query returned orientation value.

I don't have time today but I'll try this weekend.

rayliverified · 2021-06-07T04:58:56Z

Good news, I've added support for landscape breakpoints with the v0.1.1 release!

Landscape mode support was as extensive as I imagined and really needed a good think through.
The crux of the issue is that Flutter has no REAL landscape mode detection. The orientation is virtually computed based on if width > height. This means that landscape mode makes no sense on desktop or web. By default, the ResponsiveFramework only applies landscape breakpoints on iOS, Android, and Fuchsia. However, to keep things customizable, the supported landscape platforms can be customized by passing a list of supported platforms to landscapePlatforms.

Please test and let me know your thoughts and suggestions.

This is not full landscape support as it is missing minWidthLandscape, maxWidthLandscape, defaultScaleLandscape, defaultScaleFactorLandscape, etc. Any help adding support for those features is appreciated!

fdarsot · 2021-06-09T01:55:24Z

i think the issue still exists? i entered the following

landscapePlatforms: [
TargetPlatform.android,
TargetPlatform.iOS,
],
landscapeBreakpoints: [
ResponsiveBreakpoint.autoScaleDown(450,
name: MOBILE, scaleFactor: 0.73),
ResponsiveBreakpoint.autoScaleDown(800,
name: TABLET, scaleFactor: 0.73),
ResponsiveBreakpoint.autoScaleDown(1000,
name: TABLET, scaleFactor: 0.73),
ResponsiveBreakpoint.autoScaleDown(1200,
name: DESKTOP, scaleFactor: 0.73),
ResponsiveBreakpoint.autoScaleDown(2460,
name: "4K", scaleFactor: 0.73),
],

and it's still not working when i switch from portrait to landscape

anyone else?
@searchy2

HasanMuslemani · 2021-06-09T02:01:04Z

@fdarsot I could be wrong here but wouldn't the width change when in landscape so I don't think it'd be the same breakpoint numbers as portrait.

fdarsot · 2021-06-09T02:10:59Z

ohhh good point. i think you are correct @HasanMuslemani i was going based on the example in the repo. let me try new breakpoints

fdarsot · 2021-06-09T02:18:51Z

tried with different breakpoints, it still isnt working

fdarsot · 2021-06-09T02:25:24Z

is it working for anyone else?

prateekmedia · 2021-06-09T04:07:02Z

is it working for anyone else?

What are your new breakpoints?

fdarsot · 2021-06-09T04:27:14Z

@prateekmedia i checked what my screen width was when it was in landscape mode and adjusted it to that.

landscapePlatforms: [
TargetPlatform.android,
TargetPlatform.iOS,
],
landscapeBreakpoints: [
ResponsiveBreakpoint.autoScaleDown(640,
name: MOBILE, scaleFactor: 0.73)
],

rayliverified · 2021-06-09T05:13:05Z

Hmmm.. I'll find out the issue with some tests.

For now, you need to test on a target device in order to have landscape apply.

Landscape mode isn't enabled by default on Web or Desktop.
You CAN enable it by adding windows, web, or macOS into the landscapePlatforms.

fdarsot · 2021-06-09T05:14:49Z

@searchy2 im testing on a real device with targeted breakpoints

im only developing for Android and IOS btw

rayliverified · 2021-06-09T05:16:53Z

Well, that's unfortunate.

I'll take a look tomorrow, the bulk of the work is done so it's probably a quick fix.

And can add some tests!

fdarsot · 2021-06-09T05:22:53Z

Thank you for all your work btw! i think we're close. this is one of the few last things needed before we launch and it would be great to have.

marchellodev · 2021-06-10T15:10:11Z

I believe the problem is that flutter does not trigger MaterialApp.builder when orientation changes

rayliverified · 2021-06-13T02:44:05Z

@fdarsot @prateekmedia
v0.1.2 Released!

Full support for landscapeBreakpoints - breakpoints in landscape mode. Create landscape overrides with minWidthLandscape, maxWidthLandscape, defaultScaleLandscape, etc.
Use ResponsiveTargetPlatform to enable landscape support for platforms including web.

I've verified through tests that landscape mode now works correctly.
Please note that landscape can be VERY confusing, especially when testing on desktop or web.

To test on desktop or web:

Add ResponsiveTargetPlatform.windows or the test platform to landscapePlatforms
Add landscape breakpoints to breakpointsLandscape.
Shrink the window height to something small like 200px. If the height is too large such as 600px, any width smaller than 600px activates portrait mode instead of landscape.
Check the maxWidth, minWidth, etc settings. You must override them with maxWidthLandscape if you want to use different values in landscape mode. Otherwise, the values default to the portrait values.

Please test and hopefully everyone's issues are resolved.

rayliverified · 2021-06-13T02:45:59Z

In spite of the seemingly complex concepts here, landscape and portrait breakpoints switch seemlessly and it's a beauty to behold.

prateekmedia · 2021-06-13T05:10:08Z

In spite of the seemingly complex concepts here, landscape and portrait breakpoints switch seemlessly and it's a beauty to behold.

Ok looks great, although I will test it when I'm free. If anyone has any query then I will reopen it.

elvosparsley · 2022-04-04T08:41:00Z

I can't get this to work.
Has anybody got a working project that I can test with?
Even modifying the tutorial sample doesn't work.
Any help would be gratefully received.

marchellodev · 2022-04-04T09:35:43Z

@elvosparsley You need to specify different breakpoints for both breakpoints and breakpointsLandscape.

Here's how I am doing it in my app: https://github.com/marchellodev/sharik/blob/master/lib/main.dart#L63

prateekmedia · 2022-04-04T09:37:15Z

Closing again as issue is answered.

elvosparsley · 2022-04-04T09:55:12Z

@elvosparsley You need to specify different breakpoints for both breakpoints and breakpointsLandscape.

Here's how I am doing it in my app: https://github.com/marchellodev/sharik/blob/master/lib/main.dart#L63

Many thanks for the example, I was missing the scaleFactor in the breakpoints, works great now!

This comment has been minimized.

Sign in to view

rayliverified closed this as completed Mar 3, 2021

prateekmedia mentioned this issue Mar 14, 2021

Null Safety Migration #45

Merged

rayliverified reopened this Mar 14, 2021

ritheshSalyan mentioned this issue Mar 24, 2021

clear Landscape Scaling Increasing Issue #49

Closed

prateekmedia closed this as completed Jun 13, 2021

prateekmedia reopened this Apr 4, 2022

prateekmedia closed this as completed Apr 4, 2022

Landscape mode and responsive framework #38

Landscape mode and responsive framework #38

Comments

prateekmedia commented Jan 20, 2021 • edited

Intro

The Problem

Suggestion / Possible Solution

Enough Talk, Show me your code

rayliverified commented Jan 24, 2021

prateekmedia commented Jan 24, 2021

prateekmedia commented Jan 24, 2021 • edited

rayliverified commented Jan 24, 2021

This comment has been minimized.

rayliverified commented Feb 2, 2021

rayliverified commented Mar 3, 2021 • edited

prateekmedia commented Mar 3, 2021

rayliverified commented Mar 3, 2021

prateekmedia commented Mar 8, 2021

rayliverified commented Mar 14, 2021 • edited

fdarsot commented Mar 18, 2021

rayliverified commented Mar 18, 2021

HasanMuslemani commented Mar 24, 2021

rayliverified commented Mar 24, 2021

HasanMuslemani commented Mar 24, 2021

rayliverified commented Mar 24, 2021

fdarsot commented Mar 29, 2021

fdarsot commented Apr 13, 2021

marchellodev commented May 10, 2021

marchellodev commented May 10, 2021

marchellodev commented May 10, 2021

rayliverified commented May 10, 2021

fdarsot commented May 10, 2021

fdarsot commented May 17, 2021

fdarsot commented May 27, 2021

marchellodev commented Jun 3, 2021

fdarsot commented Jun 3, 2021

rayliverified commented Jun 4, 2021

rayliverified commented Jun 7, 2021

fdarsot commented Jun 9, 2021

HasanMuslemani commented Jun 9, 2021

fdarsot commented Jun 9, 2021

fdarsot commented Jun 9, 2021

fdarsot commented Jun 9, 2021

prateekmedia commented Jun 9, 2021

fdarsot commented Jun 9, 2021

rayliverified commented Jun 9, 2021

fdarsot commented Jun 9, 2021

rayliverified commented Jun 9, 2021

fdarsot commented Jun 9, 2021

marchellodev commented Jun 10, 2021

rayliverified commented Jun 13, 2021

rayliverified commented Jun 13, 2021

prateekmedia commented Jun 13, 2021

elvosparsley commented Apr 4, 2022

marchellodev commented Apr 4, 2022

prateekmedia commented Apr 4, 2022

elvosparsley commented Apr 4, 2022

prateekmedia commented Jan 20, 2021 •

edited

prateekmedia commented Jan 24, 2021 •

edited

rayliverified commented Mar 3, 2021 •

edited

rayliverified commented Mar 14, 2021 •

edited