A simple widget that selects the approperiate layout depending on the application width

responsive_layout.dart

import 'package:flutter/material.dart';

/// The ResponsiveLayout widget handles showing the correct widget based on
/// screen sizes.
///
/// Similar to UI libraries like TailwindCSS it chooses the layout on width.
/// 
/// Breakpoints:
/// - Mobile: 0px - 959px (default)
/// - Tablet: 960px - 1439px
/// - Desktop: 1440px+
/// 
/// Falls back in this order: desktop → tablet → mobile
class ResponsiveLayout extends StatelessWidget {
  /// Breakpoint for tablet layout (default: 960)
  static const double tabletBreakpoint = 960;
  
  /// Breakpoint for desktop layout (default: 1440)
  static const double desktopBreakpoint = 1440;

  /// The [Widget] shown when the screen size is mobile, this is the default child.
  final Widget mobile;

  /// The [Widget] shown if the screen size is at least tablet sized.
  final Widget? tablet;

  /// The [Widget] shown if the screen size is at least desktop sized.
  final Widget? desktop;

  /// Initializes a [ResponsiveLayout] with [mobile], [tablet] and [desktop].
  const ResponsiveLayout({
    super.key,
    required this.mobile,
    this.tablet,
    this.desktop,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth >= desktopBreakpoint && desktop != null) {
          return KeyedSubtree(
            key: const ValueKey('desktop'),
            child: desktop,
          );
        } else if (constraints.maxWidth >= tabletBreakpoint && tablet != null) {
          return KeyedSubtree(
            key: const ValueKey('tablet'),
            child: tablet,
          );
        }

        return KeyedSubtree(
          key: const ValueKey('mobile'),
          child: mobile,
        );
      },
    );
  }
}