Breakpoint class

This class provides a breakpoint system for your Flutter app.

Material 2 Design specifies responsive layouts based on Layouts using 4-column, 8-column, and 12-column grids that are available for use across different screens, devices, and orientations.

This Breakpoint class is a modification and enhancement of Rody Davis breakpoint package: https://pub.flutter-io.cn/packages/breakpoint. It also fixes that the orientation was not considered correctly for the returned layout class.

The default type BreakType.material follows the Material 2 Design Guide https://material.io/design/layout/responsive-layout-grid.html#grid-behavior

This version also provides another layout type called BreakType.large, that has more even column spread over the width and it is using a bit denser gutters and has up to max 24 columns at 4k media sizes. The BreakType.large name refers to that it is more suitable for large 4k screen layouts. It actually returns a bit fewer columns at lower resolutions and distributes the columns returned more evenly as resolution increase. It returns up 24 columns for very large screens, instead of the maximum 12 in Material breakpoints.

Use a layout builder to get BoxConstraints.

The WindowSize.xxsmall and WindowSize.xxlarge, WindowSize.xxxlarge are custom additions to the Material Design Guidelines window sizes. Apple watch LayoutClass.smallWatch and LayoutClass.largeWatch has also been added to the enum LayoutClass.

Constructors

Breakpoint({required int columns, required double gutters, required LayoutClass device, required WindowSize window, required Orientation orientation})
const
Breakpoint.fromConstraints(BoxConstraints constraints, {BreakType type = BreakType.material, int? columnInterval, double? minColumnSize})
Create breakpoint data from the current box constraints that are passed in.
factory
Breakpoint.fromMediaQuery(BuildContext context, {BreakType type = BreakType.material, int? columnInterval, double? minColumnSize})
Create breakpoint data from the current Media context that is passed in.
factory

Properties

columns → int
Number of columns for content
final
device → LayoutClass
The device is a LayoutClass and can be smallWatch, largeWatch, smallHandset, mediumHandset, largeHandset, smallTablet, largeTablet, desktop, largeDesktop and hugeDesktop
final
gutters → double
Spacing between columns
final
hashCode → int
The hash code for this object.
no setterinherited
isDesktop → bool
The device is a desktop, any sized desktop
no setter
isHandset → bool
This is a helper to determine if we are on a handset or not, which is defined as any size phone or watch
no setter
isLargeDevice → bool
If it is not a handset, it is a "large" device, meaning tablet or desktop!
no setter
isPhone → bool
The device is a phone, any sized phone
no setter
isTablet → bool
The device is a tablet, any sized tablet
no setter
isWatch → bool
The device is a watch, any sized watch
no setter
orientation → Orientation
Current device orientation
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
window → WindowSize
The window is a WindowSize and can be xxsmall, xsmall, small, medium, large, xlarge, xxlarge, xxxlarge
final

Methods

noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() → String
A string representation of this object.
override

Operators

operator ==(Object other) → bool
The equality operator.
inherited

Static Methods

useColumns(int availableColumns, int divisor) → int
The static helper function useColumns is used with grid and column layouts to reduce the amount of columns used in the layout compared
usedColumns({int? numberOfColumns, double? width, int? columnSpace, double? minColumnSize}) → int
Return number of columns to use for a given width or breakpoint