breakpoint_base 0.1.1

A base class to define Flutter breakpoint properties and helpers.

A base class to define Flutter breakpoint properties.

Basic usage

Use default breakpoints:

Width(Logical pixels)	Size	Columns	Gutter
0 - 599	xsmall	4	16
600 - 719	small	8	16
720 - 839	small	8	24
840 - 1023	small	12	24
1024 - 1439	medium	12	24
1440 - 1919	large	12	24
1920+	xlarge	12	24

final media = MediaQuery.of(context);

final breakpoint = BreakpointBase(
  orientation: media.orientation,
  width: media.size.width,
);

Advanced usage

To customise breakpoints:

Width	Size	Gutter	Expanded(portrait)	Expanded(landscape)
0 - 799	small	16	false	true
800 - 1599	medium	24	false	true
1600+	large	50	true	true

final media = MediaQuery.of(context);

final breakpoint = Breakpoint(
  orientation: media.orientation,
  width: media.size.width,
);

//
class Breakpoint extends BreakpointBase {
  Breakpoint({required Orientation orientation, required double width})
      : super(orientation: orientation, width: width);

  @override
  LayoutSize get size => _findValue({
      0: LayoutSize.small,
      800: LayoutSize.medium,
      1600: LayoutSize.large,
    });

  @override
  int get gutter => _findValue({0: 16, 800: 24, 1600: 50});

  // Add one more property
  bool get expanded => orientation == Orientation.landscape || width >= 1600;
}