flutter-web

Flutter Web Development Skill — Cross-Platform UI

This skill provides comprehensive Flutter Web development patterns for building responsive, adaptive, high-performance web applications from a single Dart codebase.

Key Principles

• Single Codebase: One Dart project targeting mobile, web, and desktop
• Responsive-First: Design for the smallest viewport, scale up with LayoutBuilder
• Adaptive UI: Material for Android/Web, Cupertino for iOS, detect platform at runtime
• Performance-Conscious: Tree shaking, deferred imports, lazy loading from day one

Responsive Design

Breakpoint Strategy

Breakpoint	Width	Layout	Columns
Mobile	< 600px	Single column	1
Tablet	600-1024	Two column	2
Desktop	> 1024px	Multi-column + sidebar	3+

Responsive Layout with LayoutBuilder

class ResponsiveLayout extends StatelessWidget {
  const ResponsiveLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth >= 1024) {
          return const DesktopLayout();
        } else if (constraints.maxWidth >= 600) {
          return const TabletLayout();
        }
        return const MobileLayout();
      },
    );
  }
}

Rule: Use LayoutBuilder for parent-aware breakpoints. Use MediaQuery only for device-level info (padding, text scale). Never use MediaQuery.sizeOf inside builders that rebuild frequently — it triggers unnecessary rebuilds when keyboard opens.

Adaptive Grid

class AdaptiveGrid extends StatelessWidget {
  final List<Widget> children;

  const AdaptiveGrid({super.key, required this.children});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final crossAxisCount = switch (constraints.maxWidth) {
          >= 1200 => 4,
          >= 900 => 3,
          >= 600 => 2,
          _ => 1,
        };

        return GridView.count(
          crossAxisCount: crossAxisCount,
          childAspectRatio: 1.4,
          mainAxisSpacing: 16,
          crossAxisSpacing: 16,
          children: children,
        );
      },
    );
  }
}