responsive_property

Description:

responsive property

responsive_property #
Inspired by Flutter's MaterialStateProperty, gives you a responsive value based on the current screen dimension.
When a built-in Material component (like a ElevatedButton) builds itself based on some internal states (hovered, pressed, selected), it will call resolve() on some MaterialProperty and get the appropriate value. This package uses a similar interface, but the states are now screen scopes.
Most responsive packages is at the Widget level, but we can (and should) make anything responsive, from a single integer to a full Widget.
The ScreenScope class #
The ScreenScope is very similar to the BoxConstraint with minWidth, maxWidth, minHeight, and maxHeight, plus orientation. This defines the scope of the screen you want to target. It is named ScreenScope as there might be more properties we care about in addtion to the size of the screen in the future.
There are some predefined ScreenScopes that you can use. If you want to target three screen types, use:
mobileScreenScope (0px - 480px width)
tabletScreenScope (480px - 840px width)
desktopScreenScope (840px - width)
copied to clipboard
mobilePortraitScreenScope (0px - 480px width, portrait)
tabletPortraitScreenScope (480px - 840px width, portrait)
desktopPortraitScreenScope (840px - width, portrait)
copied to clipboard
mobileLandscapeScreenScope (0px - 840px width, landscape)
tabletLandscapeScreenScope (840px - 1200px width, landscape)
desktopLandscapeScreenScope (1200px - width, landscape)
copied to clipboard
Below is a simple demonstration of how the screen categorization works:

If you want to target just two screen types, use:
smallScreenScope (0px - 600px width)
bigScreenScope (600px - width)
copied to clipboard
smallPortraitScreenScope (0px - 600px width, portrait)
bigPortraitScreenScope (600px - width, portrait)
copied to clipboard
smallPortraitScreenScope (0px - 1000px width, landscape)
bigPortraitScreenScope (1000px - width, landscape)
copied to clipboard
But you can define ScreenScopes however you like.
The Responsive class #
Responsive
var responsive = Responsive({
mobileScreenScope: 2,
tabletScreenScope: 4,
desktopScreenScope: 6
});
copied to clipboard
then you determines the actual value to use:
int value = responsive.resolve(context);
copied to clipboard
Internally, the resovle scans through the map and pick the last valid value. You can also provide a custom funtion:
T? combine(T? previousValue, T? element)
copied to clipboard
that will combine all valid values into a final value (e.g. something similar to CSS styles).
Responsive value example #
GridView.count(
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: Responsive({
mobileScreenScope: 2,
tabletScreenScope: 4,
desktopScreenScope: 6
}).resolve(context) ??
6,
children: List.generate(30,
(index) => Container(color: Colors.green, child: Text("TAP ME"))),
)
copied to clipboard
This gives you a responsive GridView with different cross axis count. Mobile:2, tablet:4, desktop:6, and 8 for even wider screens.

Responsive widget example #
You can also directly build different widgets for different screen sizes.
Responsive({
mobileScreenScope: mobileWidget,
tabletScreenScope: tabletWidget,
desktopScreenScope: desktopWidget,
}).resolve(context) ??
desktopWidget;
copied to clipboard
I have also created a helper Widget called ScreenBuilder that can save you some time:
ScreenBuilder(
mobile: mobile,
tablet: tablet,
desktop: desktop,
);
copied to clipboard
ScreenBuilder.builder(
mobileBuilder: mobileBuilder,
tabletBuilder: tabletBuilder,
desktopBuilder: desktopBuilder,
)
copied to clipboard
The second one has access to the BuildContext.