Discussion Thread

[rayliverified]

Discuss the Responsive Framework here ⬇️

Feel free to leave your thought on the features, API, and functionality. Or use this to start a discussion and share what's on your mind.

[prasantco]

Hi,Your library is very well designed,So can you tell/suggest us that is it working fine with the device preview library, can we use it to test the different size screen. How does your library handle orientation for both landscape and portrait in mobile app

[rayliverified]

I tested with FlutterDevicePreview a few months ago. There was a major release and I haven't tested with the latest yet. If you give it a try, let me know how it works!

[bounty1342]

Very good combo 👍 :

          MaterialApp(
            locale: DevicePreview.of(context).locale,
            debugShowCheckedModeBanner: false,
            title: 'Title',
            theme: themeService.getTheme(),
            darkTheme: themeService.getThemeDark(),
            themeMode:
                MediaQuery.of(context).platformBrightness == Brightness.dark
                    ? ThemeMode.dark
                    : ThemeMode.light,
            builder: (BuildContext context, Widget widget) =>
                DevicePreview.appBuilder(
              context,
              Builder(builder: (BuildContext context) {
                return MediaQuery(
                data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
                child: ResponsiveWrapper.builder(MainView()),
                  maxWidth: 2460,
                  minWidth: 480,
                  defaultScale: true,
                  breakpoints: <ResponsiveBreakpoint>[
                    const ResponsiveBreakpoint.resize(480, name: MOBILE),
                    const ResponsiveBreakpoint.autoScale(600, name: TABLET),
                    const ResponsiveBreakpoint.autoScale(1000,
                        name: TABLET, scaleFactor: 1.2),
                    const ResponsiveBreakpoint.resize(1200, name: DESKTOP),
                    const ResponsiveBreakpoint.autoScale(2460, name: '4K'),
                  ],
                  background: Container(color: const Color(0xFFF5F5F5)),
                ),
               );
            }),
          ),
         ),

      runZonedGuarded<Future<void>>(() async {
        runApp(
          DevicePreview(
            enabled: !kReleaseMode && devicePreview,
            builder: (BuildContext context) => app,
          ),
        );
      }, Crashlytics.instance.recordError);

Little trick, for more convenience, it to use an environment variable to easily activate it or not. ( const bool devicePreview = bool.fromEnvironment('preview', defaultValue: false);)

'flutter run ... --dart-define=preview=true'

You should give it a try.

[rayliverified]

Glad to hear it works! Thanks for sharing your results.

[Prn-Ice]

Hi, does this plugin help with scaling between devices of similar screen sizes eg two mobile phones with different sizes/aspect ratios, by default on flutter, a view on the target device can display just fine but on a smaller device, you could get RenderFlex errors.

[Prn-Ice]

Also, the presentation of this package is amazing, one of the best I've seen. I gave it a like before I even read through the whole readme.

[rayliverified]

Until I can resolve the TextForm keyboard focus issue and the SafeArea issue, I cannot recommend using this library on Mobile. Yes, the scaling will adjust for smaller devices but there are framework level interactions that are not accounted for such as Overlays, TextFields, and SafeAreas.

The ResponsiveFramework works almost perfectly for Flutter Websites.

Thanks for the kind words!

[gcostaapps]

@bounty1342, the returning MediaQuery that you use, what is it purpose? Does it change the MediaQuery parameters?

[bounty1342]

@gcostaapps it's to fix the MediaQuery for the whole app. In this case textScaleFactor is overridden.

[gcostaapps]

@bounty1342 that's great! Maybe that could be a fix for #17, because these libs generally take the MediaQuery parameters to calculate positions. In your example the text doesn't scale with the widgets?

[rayliverified]

Closing and migrating to https://github.com/Codelessly/ResponsiveFramework/discussions/35

[kleinpetr]

Hi I like the concept of scaling but I can't understand the scaling mechanism so lets try this one

ResponsiveBreakpoint.autoScale(
              260,
              name: MOBILE,
              scaleFactor: 0.5,
            ), //260-450=scale from 260 or 450?
            ResponsiveBreakpoint.resize(450, name: MOBILE), //450-800=resize
            ResponsiveBreakpoint.autoScale(
              800,
              name: TABLET,
            ),

the scaleFactor is calculated from the 260 version or 450 version? Because it looks like the scale fits always the bottom version but the first breakpoint is 260 so it probably means that 0-260 is resize (by default) BUT the website with 259px width looks different then 260 so I am little bit confused because can't definitely say where the concrete layout becomes in.

[rayliverified]

Good question! You've got the basic understanding down but there's a bit of special behavior with how the 0 - X breakpoint works.

It doesn't makes sense to have a breakpoint scale from 0 so the first breakpoint actually inherits down. To get the 0-260 to autoscale, the parameter you're missing is defaultScale = true.

For a bird's eye view of the behavior at each breakpoint segment, set debugLog = true to print out a visualization of the behaviors!