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;
}

Libraries

breakpoint_base