FBreakpoints class - forui.theme library (original) (raw)

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(),
  };
}