MASTERING FLUTTER FOR WEB: BUILD RESPONSIVE HIGH-PERFORMANCE APPS

A REUSABLE BREAKPOINT HELPER

Drop this widget anywhere you need adaptive layouts. It leans on LayoutBuilder for constraints and MediaQuery for safe-area awareness, keeping logic centralized.

import 'package:flutter/material.dart';

enum ScreenSize { compact, medium, expanded }

class ResponsiveViewport extends StatelessWidget {
  final Widget compact;
  final Widget medium;
  final Widget expanded;

  const ResponsiveViewport({
    super.key,
    required this.compact,
    required this.medium,
    required this.expanded,
  });

  ScreenSize _sizeFor(double width) {
    if (width < 600) return ScreenSize.compact;
    if (width < 1024) return ScreenSize.medium;
    return ScreenSize.expanded;
  }

  @override
  Widget build(BuildContext context) {
    final padding = MediaQuery.of(context).padding;
    return LayoutBuilder(
      builder: (_, constraints) {
        final size = _sizeFor(constraints.maxWidth);
        final inset = EdgeInsets.fromLTRB(
          16 + padding.left,
          24 + padding.top,
          16 + padding.right,
          24 + padding.bottom,
        );

        switch (size) {
          case ScreenSize.compact:
            return Padding(padding: inset, child: compact);
          case ScreenSize.medium:
            return Padding(padding: inset, child: medium);
          case ScreenSize.expanded:
            return Padding(padding: inset, child: expanded);
        }
      },
    );
  }
}

Export these enums from your design system package so feature squads plug in dedicated widgets per breakpoint without duplicating sizing rules throughout the codebase.