How to Build Responsive Layouts in Flutter for Mobile, Tablet, and Web

Designing Dynamic Layouts: Mastering Responsive Design in Flutter

In the modern multi-device ecosystem, users expect seamless experiences whether they are on a 6-inch phone, an 11-inch tablet, or a 27-inch 4K monitor. Building responsive layouts flutter developers can rely on is no longer a luxury—it is a core architectural requirement. Flutter's single codebase promise shines brightest when we design interfaces that gracefully stretch, reflow, and adapt to any screen size. By mastering responsive design, you can deliver native-grade experiences across iOS, Android, macOS, Windows, Linux, and the web from a unified codebase.

If you are still evaluating whether Flutter is the right choice for your next multi-platform project, check out our deep dive on why Flutter is the ultimate cross-platform framework to understand its architectural advantages.

Responsive vs. Adaptive UI: Knowing the Difference

Before diving into the code, we must clarify a common point of confusion in multi-platform development: the difference between Responsive and Adaptive design. While they are often used interchangeably, they solve fundamentally different problems in UI/UX engineering.

┌─────────────────────────────────────────────────────────────────────────┐
│                           MULTI-PLATFORM UI                             │
└────────────────────────────────────┬────────────────────────────────────┘
                                     │
                  ┌──────────────────┴──────────────────┐
                  ▼                                     ▼
     ┌─────────────────────────┐           ┌─────────────────────────┐
     │      RESPONSIVE UI      │           │       ADAPTIVE UI       │
     ├─────────────────────────┤           ├─────────────────────────┤
     │ • Screen Size & Aspect  │           │ • Platform Conventions  │
     │ • Fluid Grids & Columns │           │ • Input Methods (Touch) │
     │ • Text Scaling & Wrap   │           │ • Native OS Widgets     │
     │ • Dynamic Spacing       │           │ • Keyboard/Mouse Hover  │
     └─────────────────────────┘           └─────────────────────────┘

Responsive UI

Responsive design is purely structural. It focuses on how your layout adjusts to the physical dimensions of the screen—the width, height, aspect ratio, and orientation. When building responsive layouts flutter applications dynamically recalculate widget dimensions, reflow columns, and scale typography to fit the available viewport.

Adaptive UI

Adaptive design is behavioral and platform-aware. It focuses on tailoring the user experience to the specific platform conventions, input devices (touchscreens vs. mouse/keyboard), and operating system expectations. Achieving a true adaptive ui flutter requires adjusting hover states, handling right-click context menus, supporting keyboard shortcuts, and rendering platform-specific widgets (such as Cupertino widgets on iOS and Material Design on Android).

Core Widgets for Layout Independence

To build layouts that look flawless on any screen, you must master Flutter's layout engine. In Flutter, constraints go down, sizes go up, and parents set positions. Understanding this flow is critical when managing flutter mobile web screen size variations.

LayoutBuilder, OrientationBuilder, and MediaQuery

Flutter provides three primary tools for inspecting your layout context: LayoutBuilder, OrientationBuilder, and MediaQuery. Each serves a distinct purpose in your responsive toolkit.

1. MediaQuery

MediaQuery provides global information about the entire screen, including its total dimensions, device pixel ratio, text scaling factor, and system safe areas (padding for notches and status bars).

// Accessing global screen dimensions
final Size screenSize = MediaQuery.of(context).size;
final double screenWidth = screenSize.width;
final double screenHeight = screenSize.height;
final EdgeInsets safePadding = MediaQuery.of(context).padding;

Caution: Relying solely on MediaQuery for widget sizing can lead to layout bugs. For example, if your widget is placed inside a split-screen view, a drawer, or a modal, the global screen size does not represent the actual space available to your widget.

2. LayoutBuilder

To solve the limitations of MediaQuery, we use LayoutBuilder. Using layoutbuilder flutter allows you to inspect the local constraints passed down by the parent widget. This is the gold standard for building self-contained, responsive components.

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth > 600) {
      return _buildWideLayout();
    } else {
      return _buildNarrowLayout();
    }
  },
);

3. OrientationBuilder

OrientationBuilder determines whether the device is in portrait or landscape mode. It is calculated based on whether the parent's width is greater than its height.

OrientationBuilder(
  builder: (context, orientation) {
    return orientation == Orientation.portrait
        ? _buildVerticalList()
        : _buildHorizontalGrid();
  },
);

Row, Column, Expanded, and Flexible Layout Patterns

The foundation of any responsive layout lies in how you distribute space within flex containers (Row and Column).

Expanded: Forces its child to fill the remaining available space along the main axis. It sets a tight constraint on its child.
Flexible: Allows its child to be smaller than the available space but no larger. It sets a loose constraint.
Spacer: An empty widget that takes up space using Expanded under the hood. Excellent for pushing widgets to opposite ends of a container.

Here is a practical pattern for a responsive card component that dynamically switches from a horizontal row (on wide screens) to a vertical column (on narrow screens):

import 'package:flutter/material.dart';
 
class ResponsiveCard extends StatelessWidget {
  final String imageUrl;
  final String title;
  final String description;
 
  const ResponsiveCard({
    Key? key,
    required this.imageUrl,
    required this.title,
    required this.description,
  }) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final bool isWide = constraints.maxWidth > 500;
 
        return Card(
          elevation: 4,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            // Dynamically switch between Row and Column
            child: isWide 
                ? Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.circular(8),
                        child: Image.network(imageUrl, width: 150, height: 150, fit: BoxFit.cover),
                      ),
                      const SizedBox(width: 16),
                      Expanded(child: _buildContent()),
                    ],
                  )
                : Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.circular(8),
                        child: Image.network(imageUrl, width: double.infinity, height: 200, fit: BoxFit.cover),
                      ),
                      const SizedBox(height: 16),
                      _buildContent(),
                    ],
                  ),
          ),
        );
      },
    );
  }
 
  Widget _buildContent() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
        const SizedBox(height: 8),
        Text(
          description,
          style: TextStyle(fontSize: 14, color: Colors.grey[600]),
        ),
      ],
    );
  }
}

Building an Adaptive Grid Layout System

When implementing responsive layouts flutter developers often need a structured grid system similar to CSS Grid or Bootstrap's 12-column system. This ensures visual consistency across mobile, tablet, and desktop viewports.

Let's define our standard device breakpoints:

Here is a complete, production-ready implementation of a responsive grid system that automatically adjusts its column count and spacing based on the available width:

import 'package:flutter/material.dart';
 
class ResponsiveGrid extends StatelessWidget {
  final List<Widget> children;
  final int mobileCrossAxisCount;
  final int tabletCrossAxisCount;
  final int desktopCrossAxisCount;
  final double mainAxisSpacing;
  final double crossAxisSpacing;
  final double childAspectRatio;
 
  const ResponsiveGrid({
    Key? key,
    required this.children,
    this.mobileCrossAxisCount = 1,
    this.tabletCrossAxisCount = 2,
    this.desktopCrossAxisCount = 4,
    this.mainAxisSpacing = 16.0,
    this.crossAxisSpacing = 16.0,
    this.childAspectRatio = 1.0,
  }) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        int crossAxisCount = mobileCrossAxisCount;
        double padding = 16.0;
 
        if (constraints.maxWidth >= 1024) {
          crossAxisCount = desktopCrossAxisCount;
          padding = 32.0;
        } else if (constraints.maxWidth >= 600) {
          crossAxisCount = tabletCrossAxisCount;
          padding = 24.0;
        }
 
        return GridView.builder(
          padding: EdgeInsets.all(padding),
          physics: const BouncingScrollPhysics(),
          shrinkWrap: true,
          itemCount: children.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: crossAxisCount,
            mainAxisSpacing: mainAxisSpacing,
            crossAxisSpacing: crossAxisSpacing,
            childAspectRatio: childAspectRatio,
          ),
          itemBuilder: (context, index) {
            return children[index];
          },
        );
      },
    );
  }
}

How to Use the Responsive Grid

This grid can be easily integrated into any dashboard or product listing page. It dynamically scales margins and column counts to match the viewport:

ResponsiveGrid(
  mobileCrossAxisCount: 1,
  tabletCrossAxisCount: 2,
  desktopCrossAxisCount: 3,
  childAspectRatio: 1.2,
  children: List.generate(12, (index) => Card(
    color: Colors.blueAccent.withOpacity(0.1),
    child: Center(child: Text('Item ${index + 1}')),
  )),
)

Navigation is one of the most critical aspects of an adaptive user experience. A bottom navigation bar works beautifully on mobile, but on a wide desktop screen, it looks stretched and wastes valuable vertical space. Conversely, a permanent left-hand navigation drawer is perfect for desktop but takes up too much screen real estate on mobile.

To solve this, we can build an adaptive navigation shell that dynamically switches between:

BottomNavigationBar (Mobile)
NavigationRail (Tablet)
NavigationDrawer (Desktop)

MOBILE VIEW                 TABLET VIEW                    DESKTOP VIEW
┌───────────────┐          ┌───┬───────────┐              ┌─────────┬───────────┐
│               │          │   │           │              │  Logo   │           │
│    Content    │          │ N │  Content  │              ├─────────┤  Content  │
│               │          │ a │           │              │ Home    │           │
├───────────────┤          │ v │           │              │ Profile │           │
│  [H] [S] [P]  │          │   │           │              │ Settings│           │
└───────────────┘          └───┴───────────┘              └─────────┴───────────┘

Here is the complete implementation of this adaptive navigation shell:

import 'package:flutter/material.dart';
 
class AdaptiveNavigationShell extends StatefulWidget {
  final List<NavigationDestinationItem> destinations;
  final List<Widget> screens;
 
  const AdaptiveNavigationShell({
    Key? key,
    required this.destinations,
    required this.screens,
  }) : super(key: key) {
    assert(destinations.length == screens.length);
  }
 
  @override
  State<AdaptiveNavigationShell> createState() => _AdaptiveNavigationShellState();
}
 
class _AdaptiveNavigationShellState extends State<AdaptiveNavigationShell> {
  int _selectedIndex = 0;
 
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final bool isDesktop = constraints.maxWidth >= 1024;
        final bool isTablet = constraints.maxWidth >= 600 && constraints.maxWidth < 1024;
 
        return Scaffold(
          body: Row(
            children: [
              // 1. Desktop Navigation: Permanent Drawer
              if (isDesktop) _buildPermanentDrawer(),
              
              // 2. Tablet Navigation: Navigation Rail
              if (isTablet) _buildNavigationRail(),
 
              // Main Content Area
              Expanded(
                child: SafeArea(
                  child: IndexedStack(
                    index: _selectedIndex,
                    children: widget.screens,
                  ),
                ),
              ),
            ],
          ),
          // 3. Mobile Navigation: Bottom Navigation Bar
          bottomNavigationBar: (!isDesktop && !isTablet) 
              ? NavigationBar(
                  selectedIndex: _selectedIndex,
                  onDestinationSelected: (index) {
                    setState(() {
                      _selectedIndex = index;
                    });
                  },
                  destinations: widget.destinations
                      .map((d) => NavigationDestination(icon: d.icon, label: d.label))
                      .toList(),
                )
              : null,
        );
      },
    );
  }
 
  Widget _buildNavigationRail() {
    return NavigationRail(
      selectedIndex: _selectedIndex,
      onDestinationSelected: (index) {
        setState(() {
          _selectedIndex = index;
        });
      },
      labelType: NavigationRailLabelType.selected,
      destinations: widget.destinations
          .map((d) => NavigationRailDestination(
                icon: d.icon,
                selectedIcon: d.selectedIcon,
                label: Text(d.label),
              ))
          .toList(),
    );
  }
 
  Widget _buildPermanentDrawer() {
    return Drawer(
      elevation: 1,
      child: Column(
        children: [
          const DrawerHeader(
            child: Center(
              child: Text(
                'Vyrova Tech',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: widget.destinations.length,
              itemBuilder: (context, index) {
                final item = widget.destinations[index];
                return ListTile(
                  leading: item.icon,
                  title: Text(item.label),
                  selected: _selectedIndex == index,
                  onTap: () {
                    setState(() {
                      _selectedIndex = index;
                    });
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
 
class NavigationDestinationItem {
  final Widget icon;
  final Widget? selectedIcon;
  final String label;
 
  const NavigationDestinationItem({
    required this.icon,
    this.selectedIcon,
    required this.label,
  });
}

Looking for Premium Mobile App Developers?

We build high-performance, native-grade cross-platform apps using Flutter and React Native. Let's discuss your product goals.

Get a Mobile Dev Quote

Testing Layouts: Simulating Multiple Devices with Device Preview

Designing responsive layouts is only half the battle; testing them across dozens of screen resolutions is where the real challenge lies. Manually running your app on multiple physical devices or spinning up several simulators is incredibly time-consuming.

To streamline this workflow, the Flutter community developed the device_preview package. This tool allows you to preview your responsive layouts on virtually any device screen size, aspect ratio, and platform directly from a single running instance of your application.

Setting Up Device Preview

To get started, add the dependency to your pubspec.yaml:

dependencies:
  device_preview: ^1.2.0

Next, wrap your root widget in the DevicePreview widget and configure your MaterialApp to use its custom builders and locales:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:device_preview/device_preview.dart';
 
void main() {
  runApp(
    DevicePreview(
      // Enable Device Preview only in development/debug mode
      enabled: !kReleaseMode,
      builder: (context) => const MyApp(),
    ),
  );
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Responsive Flutter App',
      // Inject Device Preview configuration
      useInheritedMediaQuery: true,
      locale: DevicePreview.locale(context),
      builder: DevicePreview.appBuilder,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: const HomeScreen(),
    );
  }
}
 
class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Responsive Dashboard')),
      body: const Center(
        child: Text('Your responsive content goes here!'),
      ),
    );
  }
}

Key Features of Device Preview for Responsive Testing

Device Emulation: Instantly switch between popular devices like iPhone 15 Pro Max, iPad Pro, Google Pixel, and generic desktop viewports.
Orientation Toggling: Rotate the simulated device with a single click to test how your OrientationBuilder handles transitions.
Dynamic System Settings: Test how your UI responds to system-level changes such as dark mode, text scaling factors, and safe area notches.
Performance Profiling: Run the preview on a desktop browser or desktop app to simulate mobile performance and layout constraints simultaneously.

By integrating these responsive layout strategies and testing tools into your development pipeline, you ensure that your Flutter application delivers an exceptional, tailored user experience across every screen size imaginable.

Designing Dynamic Layouts: Mastering Responsive Design in Flutter

Responsive vs. Adaptive UI: Knowing the Difference

┌─────────────────────────────────────────────────────────────────────────┐
│                           MULTI-PLATFORM UI                             │
└────────────────────────────────────┬────────────────────────────────────┘
                                     │
                  ┌──────────────────┴──────────────────┐
                  ▼                                     ▼
     ┌─────────────────────────┐           ┌─────────────────────────┐
     │      RESPONSIVE UI      │           │       ADAPTIVE UI       │
     ├─────────────────────────┤           ├─────────────────────────┤
     │ • Screen Size & Aspect  │           │ • Platform Conventions  │
     │ • Fluid Grids & Columns │           │ • Input Methods (Touch) │
     │ • Text Scaling & Wrap   │           │ • Native OS Widgets     │
     │ • Dynamic Spacing       │           │ • Keyboard/Mouse Hover  │
     └─────────────────────────┘           └─────────────────────────┘

Responsive UI

Adaptive UI

Core Widgets for Layout Independence

LayoutBuilder, OrientationBuilder, and MediaQuery

Flutter provides three primary tools for inspecting your layout context: LayoutBuilder, OrientationBuilder, and MediaQuery. Each serves a distinct purpose in your responsive toolkit.

1. MediaQuery

MediaQuery provides global information about the entire screen, including its total dimensions, device pixel ratio, text scaling factor, and system safe areas (padding for notches and status bars).

// Accessing global screen dimensions
final Size screenSize = MediaQuery.of(context).size;
final double screenWidth = screenSize.width;
final double screenHeight = screenSize.height;
final EdgeInsets safePadding = MediaQuery.of(context).padding;

2. LayoutBuilder

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth > 600) {
      return _buildWideLayout();
    } else {
      return _buildNarrowLayout();
    }
  },
);

3. OrientationBuilder

OrientationBuilder determines whether the device is in portrait or landscape mode. It is calculated based on whether the parent's width is greater than its height.

OrientationBuilder(
  builder: (context, orientation) {
    return orientation == Orientation.portrait
        ? _buildVerticalList()
        : _buildHorizontalGrid();
  },
);

Row, Column, Expanded, and Flexible Layout Patterns

The foundation of any responsive layout lies in how you distribute space within flex containers (Row and Column).

Expanded: Forces its child to fill the remaining available space along the main axis. It sets a tight constraint on its child.
Flexible: Allows its child to be smaller than the available space but no larger. It sets a loose constraint.
Spacer: An empty widget that takes up space using Expanded under the hood. Excellent for pushing widgets to opposite ends of a container.

Here is a practical pattern for a responsive card component that dynamically switches from a horizontal row (on wide screens) to a vertical column (on narrow screens):

import 'package:flutter/material.dart';
 
class ResponsiveCard extends StatelessWidget {
  final String imageUrl;
  final String title;
  final String description;
 
  const ResponsiveCard({
    Key? key,
    required this.imageUrl,
    required this.title,
    required this.description,
  }) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final bool isWide = constraints.maxWidth > 500;
 
        return Card(
          elevation: 4,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            // Dynamically switch between Row and Column
            child: isWide 
                ? Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.circular(8),
                        child: Image.network(imageUrl, width: 150, height: 150, fit: BoxFit.cover),
                      ),
                      const SizedBox(width: 16),
                      Expanded(child: _buildContent()),
                    ],
                  )
                : Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.circular(8),
                        child: Image.network(imageUrl, width: double.infinity, height: 200, fit: BoxFit.cover),
                      ),
                      const SizedBox(height: 16),
                      _buildContent(),
                    ],
                  ),
          ),
        );
      },
    );
  }
 
  Widget _buildContent() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
        const SizedBox(height: 8),
        Text(
          description,
          style: TextStyle(fontSize: 14, color: Colors.grey[600]),
        ),
      ],
    );
  }
}

Building an Adaptive Grid Layout System

Let's define our standard device breakpoints:

Here is a complete, production-ready implementation of a responsive grid system that automatically adjusts its column count and spacing based on the available width:

import 'package:flutter/material.dart';
 
class ResponsiveGrid extends StatelessWidget {
  final List<Widget> children;
  final int mobileCrossAxisCount;
  final int tabletCrossAxisCount;
  final int desktopCrossAxisCount;
  final double mainAxisSpacing;
  final double crossAxisSpacing;
  final double childAspectRatio;
 
  const ResponsiveGrid({
    Key? key,
    required this.children,
    this.mobileCrossAxisCount = 1,
    this.tabletCrossAxisCount = 2,
    this.desktopCrossAxisCount = 4,
    this.mainAxisSpacing = 16.0,
    this.crossAxisSpacing = 16.0,
    this.childAspectRatio = 1.0,
  }) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        int crossAxisCount = mobileCrossAxisCount;
        double padding = 16.0;
 
        if (constraints.maxWidth >= 1024) {
          crossAxisCount = desktopCrossAxisCount;
          padding = 32.0;
        } else if (constraints.maxWidth >= 600) {
          crossAxisCount = tabletCrossAxisCount;
          padding = 24.0;
        }
 
        return GridView.builder(
          padding: EdgeInsets.all(padding),
          physics: const BouncingScrollPhysics(),
          shrinkWrap: true,
          itemCount: children.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: crossAxisCount,
            mainAxisSpacing: mainAxisSpacing,
            crossAxisSpacing: crossAxisSpacing,
            childAspectRatio: childAspectRatio,
          ),
          itemBuilder: (context, index) {
            return children[index];
          },
        );
      },
    );
  }
}

How to Use the Responsive Grid

This grid can be easily integrated into any dashboard or product listing page. It dynamically scales margins and column counts to match the viewport:

ResponsiveGrid(
  mobileCrossAxisCount: 1,
  tabletCrossAxisCount: 2,
  desktopCrossAxisCount: 3,
  childAspectRatio: 1.2,
  children: List.generate(12, (index) => Card(
    color: Colors.blueAccent.withOpacity(0.1),
    child: Center(child: Text('Item ${index + 1}')),
  )),
)

To solve this, we can build an adaptive navigation shell that dynamically switches between:

BottomNavigationBar (Mobile)
NavigationRail (Tablet)
NavigationDrawer (Desktop)

MOBILE VIEW                 TABLET VIEW                    DESKTOP VIEW
┌───────────────┐          ┌───┬───────────┐              ┌─────────┬───────────┐
│               │          │   │           │              │  Logo   │           │
│    Content    │          │ N │  Content  │              ├─────────┤  Content  │
│               │          │ a │           │              │ Home    │           │
├───────────────┤          │ v │           │              │ Profile │           │
│  [H] [S] [P]  │          │   │           │              │ Settings│           │
└───────────────┘          └───┴───────────┘              └─────────┴───────────┘

Here is the complete implementation of this adaptive navigation shell:

import 'package:flutter/material.dart';
 
class AdaptiveNavigationShell extends StatefulWidget {
  final List<NavigationDestinationItem> destinations;
  final List<Widget> screens;
 
  const AdaptiveNavigationShell({
    Key? key,
    required this.destinations,
    required this.screens,
  }) : super(key: key) {
    assert(destinations.length == screens.length);
  }
 
  @override
  State<AdaptiveNavigationShell> createState() => _AdaptiveNavigationShellState();
}
 
class _AdaptiveNavigationShellState extends State<AdaptiveNavigationShell> {
  int _selectedIndex = 0;
 
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final bool isDesktop = constraints.maxWidth >= 1024;
        final bool isTablet = constraints.maxWidth >= 600 && constraints.maxWidth < 1024;
 
        return Scaffold(
          body: Row(
            children: [
              // 1. Desktop Navigation: Permanent Drawer
              if (isDesktop) _buildPermanentDrawer(),
              
              // 2. Tablet Navigation: Navigation Rail
              if (isTablet) _buildNavigationRail(),
 
              // Main Content Area
              Expanded(
                child: SafeArea(
                  child: IndexedStack(
                    index: _selectedIndex,
                    children: widget.screens,
                  ),
                ),
              ),
            ],
          ),
          // 3. Mobile Navigation: Bottom Navigation Bar
          bottomNavigationBar: (!isDesktop && !isTablet) 
              ? NavigationBar(
                  selectedIndex: _selectedIndex,
                  onDestinationSelected: (index) {
                    setState(() {
                      _selectedIndex = index;
                    });
                  },
                  destinations: widget.destinations
                      .map((d) => NavigationDestination(icon: d.icon, label: d.label))
                      .toList(),
                )
              : null,
        );
      },
    );
  }
 
  Widget _buildNavigationRail() {
    return NavigationRail(
      selectedIndex: _selectedIndex,
      onDestinationSelected: (index) {
        setState(() {
          _selectedIndex = index;
        });
      },
      labelType: NavigationRailLabelType.selected,
      destinations: widget.destinations
          .map((d) => NavigationRailDestination(
                icon: d.icon,
                selectedIcon: d.selectedIcon,
                label: Text(d.label),
              ))
          .toList(),
    );
  }
 
  Widget _buildPermanentDrawer() {
    return Drawer(
      elevation: 1,
      child: Column(
        children: [
          const DrawerHeader(
            child: Center(
              child: Text(
                'Vyrova Tech',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: widget.destinations.length,
              itemBuilder: (context, index) {
                final item = widget.destinations[index];
                return ListTile(
                  leading: item.icon,
                  title: Text(item.label),
                  selected: _selectedIndex == index,
                  onTap: () {
                    setState(() {
                      _selectedIndex = index;
                    });
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
 
class NavigationDestinationItem {
  final Widget icon;
  final Widget? selectedIcon;
  final String label;
 
  const NavigationDestinationItem({
    required this.icon,
    this.selectedIcon,
    required this.label,
  });
}

Looking for Premium Mobile App Developers?

We build high-performance, native-grade cross-platform apps using Flutter and React Native. Let's discuss your product goals.

Get a Mobile Dev Quote

Testing Layouts: Simulating Multiple Devices with Device Preview

Setting Up Device Preview

To get started, add the dependency to your pubspec.yaml:

dependencies:
  device_preview: ^1.2.0

Next, wrap your root widget in the DevicePreview widget and configure your MaterialApp to use its custom builders and locales:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:device_preview/device_preview.dart';
 
void main() {
  runApp(
    DevicePreview(
      // Enable Device Preview only in development/debug mode
      enabled: !kReleaseMode,
      builder: (context) => const MyApp(),
    ),
  );
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Responsive Flutter App',
      // Inject Device Preview configuration
      useInheritedMediaQuery: true,
      locale: DevicePreview.locale(context),
      builder: DevicePreview.appBuilder,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: const HomeScreen(),
    );
  }
}
 
class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Responsive Dashboard')),
      body: const Center(
        child: Text('Your responsive content goes here!'),
      ),
    );
  }
}

Key Features of Device Preview for Responsive Testing

Device Emulation: Instantly switch between popular devices like iPhone 15 Pro Max, iPad Pro, Google Pixel, and generic desktop viewports.
Orientation Toggling: Rotate the simulated device with a single click to test how your OrientationBuilder handles transitions.
Dynamic System Settings: Test how your UI responds to system-level changes such as dark mode, text scaling factors, and safe area notches.
Performance Profiling: Run the preview on a desktop browser or desktop app to simulate mobile performance and layout constraints simultaneously.

Designing Dynamic Layouts: Mastering Responsive Design in Flutter

Responsive vs. Adaptive UI: Knowing the Difference

Responsive UI

Adaptive UI

Core Widgets for Layout Independence

LayoutBuilder, OrientationBuilder, and MediaQuery

1. MediaQuery

2. LayoutBuilder

3. OrientationBuilder

Row, Column, Expanded, and Flexible Layout Patterns

Building an Adaptive Grid Layout System

How to Use the Responsive Grid

Managing Navigation Layouts Across Mobile and Desktop

Looking for Premium Mobile App Developers?

Testing Layouts: Simulating Multiple Devices with Device Preview

Setting Up Device Preview

Key Features of Device Preview for Responsive Testing

Related Articles

Setting Up CI/CD for Flutter Apps With Codemagic

Deploying Flutter Apps to Apple App Store and Google Play

Flutter Performance Optimization: How to Build Lag-Free Apps

Designing Dynamic Layouts: Mastering Responsive Design in Flutter

Responsive vs. Adaptive UI: Knowing the Difference

Responsive UI

Adaptive UI

Core Widgets for Layout Independence

LayoutBuilder, OrientationBuilder, and MediaQuery

1. MediaQuery

2. LayoutBuilder

3. OrientationBuilder

Row, Column, Expanded, and Flexible Layout Patterns

Building an Adaptive Grid Layout System

How to Use the Responsive Grid

Managing Navigation Layouts Across Mobile and Desktop

Looking for Premium Mobile App Developers?

Testing Layouts: Simulating Multiple Devices with Device Preview

Setting Up Device Preview

Key Features of Device Preview for Responsive Testing

Related Articles

Setting Up CI/CD for Flutter Apps With Codemagic

Deploying Flutter Apps to Apple App Store and Google Play

Flutter Performance Optimization: How to Build Lag-Free Apps