Responsive Layout Builder

1
enum ScreenSize { mobile, tablet, desktop }
2
 
3
extension ScreenSizeExtension on BuildContext {
4
  double get screenWidth => MediaQuery.of(this).size.width;
5
 
6
  ScreenSize get screenSize {
7
    final width = screenWidth;
8
    if (width < 600) return ScreenSize.mobile;
9
    if (width < 1024) return ScreenSize.tablet;
10
    return ScreenSize.desktop;
11
  }
12
 
13
  bool get isMobile  => screenSize == ScreenSize.mobile;
14
  bool get isTablet  => screenSize == ScreenSize.tablet;
15
  bool get isDesktop => screenSize == ScreenSize.desktop;
16
}
17
 
18
class Responsive extends StatelessWidget {
19
  const Responsive({
20
    super.key,
21
    required this.mobile,
22
    this.tablet,
23
    this.desktop,
24
  });
25
 
26
  final Widget mobile;
27
  final Widget? tablet;
28
  final Widget? desktop;
29
 
30
  @override
31
  Widget build(BuildContext context) {
32
    return switch (context.screenSize) {
33
      ScreenSize.desktop => desktop ?? tablet ?? mobile,
34
      ScreenSize.tablet  => tablet ?? mobile,
35
      ScreenSize.mobile  => mobile,
36
    };
37
  }
38
}
39
 
40
// Usage
41
class HomePage extends StatelessWidget {
42
  const HomePage({super.key});
43
 
44
  @override
45
  Widget build(BuildContext context) {
46
    return Scaffold(
47
      body: Responsive(
48
        mobile: const MobileLayout(),
49
        tablet: const TabletLayout(),
50
        desktop: const DesktopLayout(),
51
      ),
52
    );
53
  }
54
}