Responsive
Platform variants and responsive breakpoints for adaptive layouts.
Forui provides platform-aware theme variants and responsive breakpoints for building adaptive layouts.
Platform Themes
Every predefined theme includes both a desktop and touch variant. Touch variants use larger hit targets and spacing optimized for touch input, while desktop variants are more compact.
1@override2Widget build(BuildContext context) => FTheme(3 data: FThemes.neutral.light.touch, // or FThemes.neutral.light.desktop4 child: const FScaffold(child: Placeholder()),5);6The current platform is automatically detected and available via context.platformVariant.
Touch platforms include Android, iOS, and Fuchsia, while desktop platforms include Windows, macOS, and Linux.
The detected platform can be overridden via FTheme's platform parameter:
1@override2Widget build(BuildContext context) => FTheme(3 data: FThemes.neutral.light.desktop,4 platform: FPlatformVariant.iOS, // overrides the detected platform5 child: const FScaffold(child: Placeholder()),6);7Breakpoints
Forui also 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@override2Widget build(BuildContext context) {3 final breakpoints = context.theme.breakpoints;4 final width = MediaQuery.sizeOf(context).width;56 return switch (width) {7 _ when width < breakpoints.sm => const MobileWidget(),8 _ when width < breakpoints.lg => const TabletWidget(),9 _ => const DesktopWidget(),10 };11}12Custom Breakpoints
Additional breakpoints can be added via an extension on FBreakpoints:
1extension CustomBreakpoints on FBreakpoints {2 double get custom => 42;3}4After which, the custom breakpoint can be accessed like so:
1@override2Widget build(BuildContext context) {3 final breakpoints = context.theme.breakpoints;4 final width = MediaQuery.sizeOf(context).width;56 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