responsive_screen_size

Description:

responsive screen size

Welcome to responsive_screen_size, a package that provides pragmatic responsive-layout utils.
Getting started #
You need to add the package responsive_screen_size to your dependencies.
dependencies:
responsive_screen_size: ^latest # replace latest with version number
copied to clipboard
Usage #
ScreenSizeDispatcher #
ScreenSizeDispatcher(
other: (_, __) => const NormalWidget(),
smartphone: (_, __) => const SmallWidget(),
),
copied to clipboard
This widget listens for changes to the display width through MediaQuery. In case the size changes, it will rebuild. This widget is used for responsive layout.
Example: the page scaffold should display a BottomNavigationBar on smartphones, however it should switch to a NavigationRail on tablets.
How to use this widget:

It cannot be used before one of MaterialApp(.router), CupertinoApp(.router), ... is added to the widget tree.
It does not necessarily have to be used only at the scaffold level: it can also be used down the widget tree; however, in some cases you might favour LayoutBuilder.
Internally, it uses MediaQuery to read the dimensions of the screen. Once a breakpoint is reached, e.g., smartphone to tablet, a different widget might be built.

matchScreenSize #
matchScreenSize is a declarative pattern to invoke the right function for
the matching display size.
One can use this function in combination with virtual_platform or design_language, but you can use it also without.
Pseudocode:
matchDesignLanguage
material
matchScreenSize
smartphone showModalBottomSheet
other showSomeSpecialDialog
cupertino
matchScreenSize
smartphone iphoneBottomSheet
tablet ipadBottomSheet
other desktopBottomSheet
copied to clipboard
Breakpoints #
The developers don't have to specify any breakpoints, since they are already taken care of by this package.
It might be possible that those breakpoints are incorrect on some devices; in those cases please open an issue ;)
To test it you can override breakpoints in your main:
void main() {
breakPoints = BreakPoints(500, 800, 1300);
runApp(...);
}
copied to clipboard
Or you can also implement AbstractBreakPoints yourself if there should be a mismatch among platforms. The following example uses the package physical_platform.
class AdvancedBreakPoints extends AbstractBreakPoints {
AdvancedBreakPoints(
) : super(500, 800, 1300);

//! In case a platform has way more logical pixels than the other ones,
//! add the chain of that platform to the [matchPhysicalPlatform] below.

@override
bool isSmartphone(double width) => matchPhysicalPlatform(
other: () => lessThan(width, smartphoneMaxWidth),
ios: () => lessThan(width, 550), //! maybe pixels differ on iOS?
);

@override
bool isTabletSmall(double width) =>
matchPhysicalPlatform(other: () => lessThan(width, tabletSmallMaxWidth));

@override
bool isTabletLarge(double width) =>
matchPhysicalPlatform(other: () => lessThan(width, tabletLargeMaxWidth));
}
copied to clipboard
And then:
void main() {
breakPoints = AdvancedBreakPoints();
runApp(...);
}
copied to clipboard