Advanced Responsive: A Complete Material Design 3-Based Responsive System for Flutter

Advanced Responsive: A Complete Material Design 3-Based Responsive System for Flutter

FlutterPulse

This article was translated specially for the channel FlutterPulseYou'll find lots of interesting things related to Flutter on this channel. Don't hesitate to subscribe!🚀

Building responsive layouts in Flutter often starts simple… and quickly becomes messy.

You begin with a few MediaQuery checks, then add breakpoint logic, then multiply values by scale factors. Before long, your widgets are tangled in conditional rendering and hardcoded dimensions.

advanced_responsive is designed to solve that by providing a structured, Material Design 3-aligned responsive system, not just scaling utilities or breakpoint checks.

The Problem: Responsive Chaos

Most Flutter developers encounter these issues:

1. Inconsistent Breakpoints

// Different developers, different values
if (width < 600) ...  // Developer A
if (width < 768) ...  // Developer B
if (width < 540) ...  // Developer C

2. Hardcoded Values Everywhere

padding: EdgeInsets.all(width < 600 ? 16 : 32)
fontSize: width < 600 ? 14 : 18

3. Repetitive MediaQuery Calls

final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
final isPortrait = height > width;
// ... repeated in every widget

4. No Design System

Spacing, typography, and layout decisions are scattered across the codebase with no central source of truth.

Why Another Responsive Package?

Most existing solutions focus on one part of the problem:

  • Scaling utilities (flutter_screenutil)
  • Breakpoint checks (responsive_framework)
  • Layout switching (responsive_builder)

But real-world responsive design needs all of them working together.

advanced_responsive focuses on three pillars:

  1. Consistency — One source of truth for breakpoints and spacing
  2. Readability — Semantic APIs that make intent clear
  3. Maintainability — Easy to modify and scale as your project grows

Design Principles

1. Material Design 3 Standards

The package uses official MD3 breakpoints:

| Device Type | Width Range | Grid Columns |
|-------------|-------------|--------------|
| **Mobile** | < 600px | 4 |
| **Tablet** | 600–839px | 8 |
| **Desktop** | ≥ 840px | 12 |

These breakpoints aren't arbitrary — they're battle-tested standards used by Google across Android, Chrome OS, and web applications.

They drive:

  • Layout structure
  • Spacing scales
  • Typography sizing
  • Grid behavior

2. Device-Aware, Not Just Size-Aware

Responsiveness is based on device type, not raw pixel values.

// ❌ Size-aware (unclear intent)
if (MediaQuery.of(context).size.width < 600)
// ✅ Device-aware (semantic and clear)
if (context.isMobile)

This keeps UI logic semantic and readable.

3. Adaptive by Default, Custom When Needed

90% of apps need the same UI that adapts automatically.
10% of apps need completely different layouts per device.

advanced_responsive supports both:

// Adaptive: Same UI, different spacing/typography
ResponsiveBuilder(
  builder: (context, info) => Container(
    padding: EdgeInsets.all(info.spacing(ResponsiveSpacing.md)),
    child: Text(
      'Welcome',
      style: TextStyle(fontSize: info.responsiveFontSize(24)),
    ),
  ),
)
// Custom: Different layouts per device
ResponsiveLayout(
  mobile: MobileView(),
  tablet: TabletView(),
  desktop: DesktopView(),
)

Core Concepts

1. ResponsiveBuilder

For conditional rendering based on device information.

ResponsiveBuilder(
  builder: (context, info) {
    return Column(
      children: [
        Text(
          info.isDesktop ? 'Desktop Mode' : 'Mobile Mode',
          style: TextStyle(fontSize: info.responsiveFontSize(18)),
        ),
        if (info.isDesktop)
          ThreeColumnLayout()
        else if (info.isTablet)
          TwoColumnLayout()
        else
          SingleColumnLayout(),
      ],
    );
  },
)

Key benefits:

  • Access to ResponsiveInfo object
  • Clean, readable conditionals
  • Type-safe device detection

2. ResponsiveLayout

For completely different layouts per device.

ResponsiveLayout(
  mobile: MobileHomePage(),   // Bottom nav, single column
  tablet: TabletHomePage(),   // Side drawer, 2 columns
  desktop: DesktopHomePage(), // Top nav, 3 columns, sidebar
)

Use cases:

  • Gmail-style master-detail views
  • Dashboard layouts
  • Navigation patterns (bottom/side/top)

3. Context Extensions

All responsive helpers are available directly on BuildContext.

// Device detection
context.isMobile
context.isTablet
context.isDesktop
context.isLandscape
// Spacing
context.spacing(ResponsiveSpacing.md)
context.horizontalPadding()
context.safePadding
// Typography
context.responsiveFontSize(18)
// Screen helpers
context.isNarrowScreen  // < 360px (iPhone SE)
context.isExtraWide     // > 1000px (Fold phones)

No wrappers. No boilerplate.

Adaptive Spacing System

Instead of hardcoded values, the package provides semantic spacing:

| Spacing | Mobile | Tablet | Desktop |
|---------|--------|--------|---------|
| **xs**  | 4      | 6      | 8       |
| **sm**  | 8      | 12     | 16      |
| **md**  | 16     | 24     | 32      |
| **lg**  | 24     | 32     | 48      |
| **xl**  | 32     | 48     | 64      |
| **xxl** | 48     | 64     | 96      |

Before:

Container(
  padding: EdgeInsets.all(
    MediaQuery.of(context).size.width < 600 ? 16 : 32
  ),
)

After:

Container(
  padding: EdgeInsets.all(context.spacing(ResponsiveSpacing.md)),
)

Benefits:

  • Consistent spacing across the app
  • Easy to modify centrally
  • Semantic naming (developers understand intent)

Responsive Typography

Font sizes scale predictably across devices:

Text(
  'Title',
  style: TextStyle(
    fontSize: context.responsiveFontSize(24),
  ),
)

The system:

  1. Scales based on screen width
  2. Respects Material Design typography scales
  3. Automatically handles text scale factor (accessibility)

Grid & Layout Helpers

Grid Columns

Automatically provides the correct number of columns:

ResponsiveBuilder(
  builder: (context, info) => GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: info.gridColumns, // 4 / 8 / 12
      mainAxisSpacing: info.spacing(ResponsiveSpacing.md),
      crossAxisSpacing: info.spacing(ResponsiveSpacing.md),
    ),
    itemBuilder: (context, index) => ProductCard(),
  ),
)

Content Max Width

Prevent content from stretching too wide on large screens:

Container(
  constraints: BoxConstraints(
    maxWidth: context.responsive.contentMaxWidth(),
  ),
  child: ArticleContent(),
)

Safe Area Padding

Padding that respects system UI (notch, navigation bar):

Padding(
  padding: context.safeAreaPadding(),
  child: Content(),
)

Orientation Helpers

if (info.isLandscape && info.isMobile) {
  return HorizontalLayout(); // Mobile landscape
}
return VerticalLayout(); // Default

Real-World Example

Problem: E-commerce Product Grid

Requirements:

  • Mobile: 2 products per row
  • Tablet: 3 products per row
  • Desktop: 4 products per row
  • Consistent spacing that scales

Without advanced_responsive:

class ProductGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    final crossAxisCount = width < 600 
        ? 2 
        : width < 840 
            ? 3 
            : 4;
    final spacing = width < 600 ? 8.0 : width < 840 ? 12.0 : 16.0;

    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: crossAxisCount,
        mainAxisSpacing: spacing,
        crossAxisSpacing: spacing,
      ),
      itemBuilder: (context, index) => ProductCard(),
    );
  }
}

With advanced_responsive:

class ProductGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ResponsiveBuilder(
      builder: (context, info) {
        final columns = info.responsiveValue<int>(
          mobile: 2,
          tablet: 3,
          desktop: 4,
        );

        return GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: columns,
            mainAxisSpacing: info.spacing(ResponsiveSpacing.sm),
            crossAxisSpacing: info.spacing(ResponsiveSpacing.sm),
          ),
          itemBuilder: (context, index) => ProductCard(),
        );
      },
    );
  }
}

Improvements:

  • ✅ Cleaner, more readable
  • ✅ Semantic spacing values
  • ✅ Easy to modify centrally
  • ✅ Type-safe device detection

Performance Considerations

Singleton Pattern with Caching

class ResponsiveService {
  static final ResponsiveService _instance = ResponsiveService._internal();

  DeviceType? _cachedDeviceType;
  double? _cachedWidth;

  DeviceType getDeviceType(double width) {
    if (_cachedWidth == width) return _cachedDeviceType!;
    // ... calculate and cache
  }
}

Benefits:

  • Minimal overhead
  • No unnecessary recalculations
  • Efficient memory usage

Live Demo

See the system in action:

🌐 https://advanced-responsive-demo.vercel.app/

How to Test:

  1. Open the link in your browser
  2. Press F12 to open DevTools
  3. Toggle Device Toolbar (📱 icon)
  4. Resize the viewport:
  • 320px → Small mobile
  • 600px → Tablet
  • 840px → Desktop
  • 1200px → Large desktop
  • Responsive → experimental or uncommon screen sizes

Observe:

  • Layout changes (columns, navigation)
  • Spacing adaptation
  • Typography scaling
  • Grid column changes

When to Use advanced_responsive

✅ Perfect For:

  • Multi-platform apps (Mobile + Tablet + Web)
  • Design systems requiring consistency
  • Production apps with long-term maintenance
  • Teams needing shared responsive patterns
  • Apps targeting multiple screen sizes

⚠️ Might Be Overkill For:

  • Mobile-only apps with fixed orientation
  • Simple single-screen apps
  • Prototypes or MVPs

Migration Guide

From MediaQuery:

// Before
final width = MediaQuery.of(context).size.width;
if (width < 600) { ... }
// After
if (context.isMobile) { ... }

From responsive_framework:

// Before
ResponsiveWrapper.of(context).isMobile
// After
context.isMobile

From flutter_screenutil:

// Before
16.w // width-based scaling
16.h // height-based scaling
// After
context.spacing(ResponsiveSpacing.md) // semantic spacing

Comparison

| Feature | advanced_responsive | responsive_framework | responsive_builder | flutter_screenutil |
|---------|--------------------|--------------------|-------------------|-------------------|
| **MD3 breakpoints** | ✅ | ❌ Custom | ❌ Custom | ❌ Custom |
| **Adaptive spacing** | ✅ Built-in | ❌ Manual | ❌ Manual | ⚠️ Scaling only |
| **Responsive typography** | ✅ | ❌ | ❌ | ⚠️ Pixel-based |
| **Context extensions** | ✅ Rich API | ⚠️ Limited | ⚠️ Basic | ⚠️ Limited |
| **Zero config** | ✅ | ❌ Requires setup | ✅ | ❌ Requires init |
| **Grid system** | ✅ Auto | ❌ | ❌ | ❌ |
| **SafeArea helpers** | ✅ | ❌ | ❌ | ❌ |
| **Dependencies** | 0 | Multiple | 0 | 0 |
| **Package size** | Small | Large | Small | Small |

Getting Started

Installation

dependencies:
  advanced_responsive: ^1.0.3

Basic Usage

import 'package:advanced_responsive/advanced_responsive.dart';
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ResponsiveBuilder(
        builder: (context, info) => Scaffold(
          body: Padding(
            padding: context.safePadding,
            child: Text(
              'Hello Responsive World!',
              style: TextStyle(
                fontSize: context.responsiveFontSize(24),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Best Practices

1. Use Semantic Spacing

// ❌ Don't
padding: EdgeInsets.all(16)
// ✅ Do
padding: EdgeInsets.all(context.spacing(ResponsiveSpacing.md))

2. Prefer Adaptive Over Custom Layouts

// ❌ Only when necessary
ResponsiveLayout(
  mobile: MobileView(),
  desktop: DesktopView(),
)
// ✅ Prefer adaptive
ResponsiveBuilder(
  builder: (context, info) => MyView(
    columns: info.responsiveValue(mobile: 1, tablet: 2, desktop: 3),
  ),
)

3. Use Context Extensions

// ❌ Verbose
ResponsiveBuilder(
  builder: (context, info) {
    if (info.isMobile) { ... }
  },
)
// ✅ Concise
if (context.isMobile) { ... }

Conclusion

advanced_responsive provides a complete responsive foundation for Flutter apps.

It:

  • ✅ Reduces boilerplate
  • ✅ Enforces design consistency
  • ✅ Scales well as your project grows
  • ✅ Follows industry standards (Material Design 3)
  • ✅ Provides both adaptive and custom layout options

Whether you're building a mobile app, a web app, or a cross-platform solution, advanced_responsive gives you the tools to create beautiful, consistent responsive experiences.

📦 pub.dev:https://pub.dev/packages/advanced_responsive
🐙 GitHub:https://github.com/sayedmoataz/advanced_responsive
🌐 Live Demo:https://advanced-responsive-demo.vercel.app/
📖 Documentation: Check the README for detailed examples

Feedback & Contributing

Found a bug? Have a feature request?

Frequently Asked Questions

Q: Do I need to create different UIs for each device?

A: No! That's a common misconception. 90% of apps only need the same UI with adaptive spacing, typography, and layout adjustments. The package handles this automatically.

Use ResponsiveLayout only when you genuinely need completely different layouts (like Gmail's master-detail view on desktop vs. list view on mobile).

Q: Can I use this with my existing responsive code?

A: Absolutely! You can migrate gradually, one screen at a time. The package doesn't force you to refactor everything at once.

Start with new features or screens, then migrate existing code as you touch it. The context extensions make it easy to replace existing MediaQuery calls incrementally.

Q: Does it work with Flutter Web?

A: Yes! The package is platform-agnostic and works seamlessly across:

  • 📱 Mobile (iOS & Android)
  • 🌐 Web (Chrome, Firefox, Safari, Edge)
  • 💻 Desktop (Windows, macOS, Linux)
  • ⌚ Even custom platforms (Smart TVs, Watches, Car displays)

Q: How is this different from responsive_framework?

A: Key differences:

  • Zero configuration — No wrapper setup required
  • Material Design 3 — Industry-standard breakpoints, not custom
  • Built-in spacing system — Semantic spacing that scales automatically
  • Context extensions — Cleaner API without wrappers
  • Lightweight — Minimal dependencies and smaller bundle size

Q: Will this increase my app size?

A: Minimal impact. The package adds approximately ~50KB to your app, which is negligible compared to typical Flutter app sizes (5–15MB).

Q: Can I customize the breakpoints?

A: Currently, the package uses Material Design 3 standard breakpoints (600px, 840px). While these work for 95% of use cases, customization support is planned for a future release.

For now, you can fork the package if you need custom breakpoints, but we recommend trying the MD3 standards first — they're battle-tested across thousands of apps.

Q: Does it handle orientation changes automatically?

A: Yes! The package includes orientation detection:

if (context.isLandscape) {
  // Handle landscape
}

Orientation changes trigger automatic rebuilds with updated information.

Q: What about accessibility (text scaling)?

A: The responsiveFontSize() method automatically respects the user's system text scale settings. Flutter applies the text scale factor after our calculations, ensuring accessibility compliance.

Q: Can I use this for TV or smartwatch apps?

A: Yes, but you may need to extend the breakpoints for very large (TV) or very small (watch) screens. The package provides the foundation, and you can add custom device detection logic on top.

Q: Is it production-ready?

A: Yes! The package is:

  • ✅ Well-tested (65% coverage, growing)
  • ✅ Used in production apps
  • ✅ Follows Flutter best practices
  • ✅ Actively maintained

Roadmap

We're continuously improving advanced_responsive based on community feedback. Here's what's coming:

🎯 Planned Features

v1.1.0 (Q1 2025)

  • [ ] Animated transitions between breakpoints
  • Smooth layout changes when resizing
  • Configurable animation curves
  • [ ] Debug overlay
  • Visual indicator of current breakpoint
  • Grid overlay for alignment checks
  • Toggle via developer menu
  • [ ] Platform-specific values
info.platformValue(   
  ios: 16,   
  android: 14,   
  web: 18, 
)

v1.2.0 (Q2 2025)

  • [ ] Responsive theme system
  • Typography scales per device
  • Color adjustments for different screens
  • Material 3 dynamic theming support
  • [ ] Custom breakpoint support
  • Define your own breakpoints
  • Multiple breakpoint sets
  • Easy switching between sets
  • [ ] Performance improvements
  • Reduced memory footprint
  • Faster cache lookups
  • Widget-level optimization

v2.0.0 (Q3 2025)

  • [ ] CLI migration tool
  • Automatically convert MediaQuery calls
  • Detect hardcoded values
  • Suggest spacing replacements
  • [ ] Adaptive widgets library
  • Pre-built responsive components
  • Navigation patterns
  • Form layouts
  • [ ] Testing utilities
  • Mock different device types
  • Test helpers for responsive layouts
  • Golden test support

💡 Community Requests

Have a feature idea? We'd love to hear it!

About the Author

Sayed Moataz is a Flutter developer passionate about building beautiful, responsive cross-platform applications. With experience shipping production apps across mobile, web, and desktop, he understands the challenges of creating consistent user experiences across diverse screen sizes.

This package was born from real-world needs — solving responsive design challenges in multiple production projects and realizing that existing solutions weren't quite hitting the mark.

Connect with Me

Support the Project

If you find advanced_responsive useful:

  • ⭐ Star on GitHub — It helps others discover the package
  • 👏 Clap on Medium — Shows appreciation for the article
  • 📢 Share with your team — Help other developers
  • 🐛 Report bugs — Help improve the package
  • 💡 Suggest features — Shape the future of the package

More Flutter best practices and architecture guides:

Happy coding! 🚀

If you found this article helpful, give it a clap 👏 and follow for more Flutter content!

Questions or feedback? Drop a comment below! 💬

Report content on this page

Report Page

Please submit your DMCA takedown request to dmca@telegram.org