responsive_property 0.0.7

Inspired by Flutter's MaterialStateProperty, gives you a responsive value based on the current screen dimension.

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.