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

1@override
2Widget build(BuildContext context) {
3  final breakpoints = context.theme.breakpoints;
4  final width = MediaQuery.sizeOf(context).width;
5
6  return switch (width) {
7    _ when width < breakpoints.sm => const MobileWidget(),
8    _ when width < breakpoints.lg => const TabletWidget(),
9    _ => const DesktopWidget(),
10  };
11}
12

Custom Breakpoints

Additional breakpoints can be added via an extension on FBreakpoints:

1extension CustomBreakpoints on FBreakpoints {
2  double get custom => 42;
3}
4

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

1@override
2Widget build(BuildContext context) {
3  final breakpoints = context.theme.breakpoints;
4  final width = MediaQuery.sizeOf(context).width;
5
6  return switch (width) {
7    _ when width < breakpoints.custom => const SuperSmallWidget(),
8    _ when width < breakpoints.sm => const MobileWidget(),
9    _ when width < breakpoints.lg => const TabletWidget(),
10    _ => const DesktopWidget(),
11  };
12}
13

Predefined Breakpoints

Usage

Custom Breakpoints

On this page