FBreakpoints class final

The responsive breakpoints based on Tailwind CSS.

All breakpoints are in logical pixels. Mobile devices are typically smaller than sm (640), while tablet and desktop devices are typically larger than than md (768) and lg (1024) respectively.

Usage:

@override
Widget build(BuildContext context) {
  final breakpoints = context.theme.breakpoints; // FBreakpoints
  final width = MediaQuery.sizeOf(context).width; // double

  return switch (width) {
    _ when width < breakpoints.sm => MobileWidget(),
    _ when width < breakpoints.lg => TabletWidget(),
    _ => DesktopWidget(),
  };
}

Additional breakpoints can be added via an extension on FBreakpoints:

extension CustomBreakpoints on FBreakpoints {
  double get custom => 42;
}

After which, the custom breakpoint can be accessed like so:

@override
Widget build(BuildContext context) {
  final breakpoints = context.theme.breakpoints; // FBreakpoints
  final width = MediaQuery.sizeOf(context).width; // double

  return switch (width) {
    _ when width < breakpoints.custom => SuperSmallWidget(),
    _ when width < breakpoints.sm => MobileWidget(),
    _ when width < breakpoints.lg => TabletWidget(),
    _ => DesktopWidget(),
  };
}

Mixed-in types

• Diagnosticable

Constructors

FBreakpoints({double sm = 640, double md = 768, double lg = 1024, double xl = 1280, double xl2 = 1536})

Creates a FBreakpoints.

const

Properties

hashCode → int

The hash code for this object.

no setter, override

lg → double

The minimum width of the large breakpoint, inclusive. Defaults to 1024.

final

md → double

The minimum width of the medium breakpoint, inclusive. Defaults to 768.

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

sm → double

The minimum width of the small breakpoint, inclusive. Defaults to 640.

final

xl → double

The minimum width of the extra large breakpoint, inclusive. Defaults to 1280.

final

xl2 → double

The minimum width of the extra extra large breakpoint, inclusive. Defaults to 1536.

final

Methods

debugFillProperties(DiagnosticPropertiesBuilder properties) → void

Add additional properties associated with the node.

override

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode

Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.

inherited

toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String

A string representation of this object.

inherited

toStringShort() → String

A brief description of this object, usually just the runtimeType and the hashCode.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

override