Core Concepts
Responsive
Responsive breakpoints based on Tailwind CSS for adaptive layouts.
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(),
};
}