Responsive

Forui contains responsive breakpoints based on Tailwind CSS .

Predefined Breakpoints

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

Breakpoint	Minimum width	Accessor
`sm`	640	`FThemeData.breakpoints.sm`
`md`	768	`FThemeData.breakpoints.md`
`lg`	1024	`FThemeData.breakpoints.lg`
`xl`	1280	`FThemeData.breakpoints.xl`
`xl2`	1536	`FThemeData.breakpoints.xl2`

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

Custom Breakpoints

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