Breakpoint.fromMediaQuery constructor

Breakpoint.fromMediaQuery(
  1. BuildContext context, {
  2. BreakType type = BreakType.material,
  3. int? columnInterval,
  4. double? minColumnSize,
})

Create breakpoint data from the current Media context that is passed in.

The default type BreakType.material follows the Material Design Guide https://material.io/design/layout/responsive-layout-grid.html#grid-behavior The optional layout BreakType.large has smaller gutters and more columns (24) and more column distribution. It also includes watch and large desktop classes suitable for 4 screen.

Uses BuildContext and MediaQuery to calculate the device breakpoint.

Use Breakpoint.fromConstraints when the widget does not take up the full screen

Implementation

factory Breakpoint.fromMediaQuery(
  BuildContext context, {
  BreakType type = BreakType.material,
  int? columnInterval,
  double? minColumnSize,
}) {
  /// The predefined amount of columns for the BreakType for a given width
  /// will be returned if columnsSpace is null or minColumnSize is null.
  assert(
      columnInterval == null || (columnInterval >= 1 && columnInterval <= 24),
      'columnInterval must be null or from 1 to 24');
  assert(
      minColumnSize == null ||
          (minColumnSize >= 137 / 2 && minColumnSize <= 8192),
      'MinColumnSize must be null or from 137/2 (=two columns on a small watch) '
      ' to 8192 (=1 column on a 8k screen)');

  final double width = MediaQuery.sizeOf(context).width;
  final Orientation orientation = MediaQuery.orientationOf(context);

  if (type == BreakType.material) {
    return Breakpoint._calcBreakpoint(
      orientation: orientation,
      width: width,
      columnInterval: columnInterval,
      minColumnSize: minColumnSize,
    );
  } else {
    return Breakpoint._calcBreakpointLarge(
      orientation: orientation,
      width: width,
      columnInterval: columnInterval,
      minColumnSize: minColumnSize,
    );
  }
}