FilledStacks / responsive_builder

A set of widgets to make responsive UI building in flutter more readable
MIT License
504 stars 81 forks source link

use the OrientationBuilder widget rather than MediaQuery.orientation #39

Open basnetjiten opened 2 years ago

basnetjiten commented 2 years ago

Hello I could see the use of var orientation = MediaQuery.of(context).orientation; on OrientationLayoutBuilder on my use case I could not see the widget build on orientation changes on IPAD simulator. How about we refactor to use the [OrientationBuilder] (https://api.flutter.dev/flutter/widgets/OrientationBuilder-class.html) widget

I guess this would rebuild every time app’s current Orientation changes for current screen.

Here is the the code snippet in my case:

     ScreenTypeLayout(
  breakpoints:
      const ScreenBreakpoints(desktop: 900, tablet: 650, watch: 250),
  mobile: OrientationLayoutBuilder(

      portrait: (context) => const ProgramPortraitView(),
      landscape: (context) => const ProgramLandscapeView()),
  desktop
    : OrientationLayoutBuilder(
      portrait: (context) => const ProgramPortraitView(),
      landscape: (context) => const ProgramLandscapeView()),
)

Suggested OrinetationLayoutBuilder:

@override
Widget build(BuildContext context) {
return OrientationBuilder(
  builder: (context, deviceOrientation) {
    var orientation = deviceOrientation;

    if (mode != OrientationLayoutBuilderMode.portrait &&
        (orientation == Orientation.landscape ||
            mode == OrientationLayoutBuilderMode.landscape)) {
      if (landscape != null) {
        return landscape!(context);
      }
    }

    return portrait(context);
   },
  );
  }
}