FSBreakpoint enum Foundation Layout Responsive

Flutstrap Breakpoint System

Defines the responsive breakpoints inspired by Bootstrap but optimized for Flutter and mobile-first design approach.

Default Breakpoints (logical pixels):

  • XS: 576px (portrait phones)
  • SM: 768px (landscape phones)
  • MD: 992px (tablets)
  • LG: 1200px (desktops)
  • XL: 1400px (large desktops)
  • XXL: 1600px (larger desktops)

Usage Examples:

// Get current breakpoint
final breakpoint = FSCustomBreakpoints().getBreakpoint(MediaQuery.of(context).size.width);

// Responsive layout
if (breakpoint == FSBreakpoint.xs) {
  return MobileLayout();
} else {
  return DesktopLayout();
}

// Using breakpoint extensions
if (FSBreakpoint.lg.isLargerThan(currentBreakpoint)) {
  return CompactLayout();
}

Performance Features

  • Compile-time Constants: All default breakpoints are const for better performance
  • Efficient Lookups: Cached value mappings for fast breakpoint resolution
  • Memory Optimized: Lightweight breakpoint detection without heavy computations
  • Tree-shakeable: Unused breakpoint configurations can be removed by Dart compiler

Best Practices:

  • Use const FSCustomBreakpoints() when using default values
  • Cache breakpoint calculations in stateful widgets
  • Use breakpoint extensions for cleaner code
  • Consider using LayoutBuilder for responsive layouts

Breakpoint identifiers for different screen sizes

Inheritance
Available extensions

Values

xs → const FSBreakpoint

Extra small devices (portrait phones, less than 576px)

sm → const FSBreakpoint

Small devices (landscape phones, 576px and up)

md → const FSBreakpoint

Medium devices (tablets, 768px and up)

lg → const FSBreakpoint

Large devices (desktops, 992px and up)

xl → const FSBreakpoint

Extra large devices (large desktops, 1200px and up)

xxl → const FSBreakpoint

Double extra large devices (larger desktops, 1400px and up)

Properties

displayName → String

Available on FSBreakpoint, provided by the FSBreakpointExtensions extension

Get the display name of this breakpoint
no setter
displayName → String

Available on FSBreakpoint, provided by the FSResponsiveExtensions extension

Get full display name for the breakpoint
no setter
hashCode → int
The hash code for this object.
no setterinherited
index → int
A numeric identifier for the enumerated value.
no setterinherited
isDesktop → bool

Available on FSBreakpoint, provided by the FSResponsiveExtensions extension

Check if this breakpoint is considered desktop size
no setter
isMobile → bool

Available on FSBreakpoint, provided by the FSResponsiveExtensions extension

Check if this breakpoint is considered mobile size
no setter
isTablet → bool

Available on FSBreakpoint, provided by the FSResponsiveExtensions extension

Check if this breakpoint is considered tablet size
no setter
minWidth → double

Available on FSBreakpoint, provided by the FSResponsiveExtensions extension

Get the minimum width for this breakpoint
no setter
name → String

Available on Enum, provided by the EnumName extension

The name of the enum value.
no setter
name → String

Available on FSBreakpoint, provided by the FSBreakpointExtensions extension

Get the string name of this breakpoint
no setter
name → String

Available on FSBreakpoint, provided by the FSResponsiveExtensions extension

Get human-readable name for the breakpoint
no setter
next → FSBreakpoint

Available on FSBreakpoint, provided by the FSResponsiveExtensions extension

Get the next larger breakpoint
no setter
previous → FSBreakpoint

Available on FSBreakpoint, provided by the FSResponsiveExtensions extension

Get the previous smaller breakpoint
no setter
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
value → double

Available on FSBreakpoint, provided by the FSBreakpointExtensions extension

Get the numeric value of this breakpoint
no setter

Methods

isEqualOrLargerThan(FSBreakpoint other) → bool

Available on FSBreakpoint, provided by the FSBreakpointExtensions extension

Check if this breakpoint is equal to or larger than another breakpoint
isEqualOrSmallerThan(FSBreakpoint other) → bool

Available on FSBreakpoint, provided by the FSBreakpointExtensions extension

Check if this breakpoint is equal to or smaller than another breakpoint
isLargerThan(FSBreakpoint other) → bool

Available on FSBreakpoint, provided by the FSBreakpointExtensions extension

Check if this breakpoint is larger than another breakpoint
isSmallerThan(FSBreakpoint other) → bool

Available on FSBreakpoint, provided by the FSBreakpointExtensions extension

Check if this breakpoint is smaller than another breakpoint
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() → String
A string representation of this object.
inherited

Operators

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

Constants

values → const List<FSBreakpoint>
A constant List of the values in this enum, in order of their declaration.