DEV Community

Cover image for Advanced Responsive: A Complete Material Design 3-Based Responsive System for Flutter
Sayed Moataz
Sayed Moataz

Posted on

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

#flutter #dart #responsive #webdev

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
Enter fullscreen mode Exit fullscreen mode

2. Hardcoded Values Everywhere 

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

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
Enter fullscreen mode Exit fullscreen mode

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.

2. Device-Aware, Not Just Size-Aware 

// ❌ Size-aware (unclear intent)
if (MediaQuery.of(context).size.width < 600)

// ✅ Device-aware (semantic and clear)
if (context.isMobile)
Enter fullscreen mode Exit fullscreen mode

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(),
)
Enter fullscreen mode Exit fullscreen mode

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(),
      ],
    );
  },
)
Enter fullscreen mode Exit fullscreen mode

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
)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
  ),
)
Enter fullscreen mode Exit fullscreen mode

After: 

Container(
  padding: EdgeInsets.all(context.spacing(ResponsiveSpacing.md)),
)
Enter fullscreen mode Exit fullscreen mode

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(),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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(),
        );
      },
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

Benefits:

  • Minimal overhead
  • No unnecessary recalculations
  • Efficient memory usage

Live Demo

See the system in action:

🌐 Try the Live Demo

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

Observe:

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

Comparison with Other Packages

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
Enter fullscreen mode Exit fullscreen mode

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),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Best Practices

1. Use Semantic Spacing 

// ❌ Don't
padding: EdgeInsets.all(16)

// ✅ Do
padding: EdgeInsets.all(context.spacing(ResponsiveSpacing.md))
Enter fullscreen mode Exit fullscreen mode

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),
  ),
)
Enter fullscreen mode Exit fullscreen mode

3. Use Context Extensions 

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

// ✅ Concise
if (context.isMobile) { ... }
Enter fullscreen mode Exit fullscreen mode

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.

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

A: Absolutely! You can migrate gradually, one screen at a time. 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, Web, and Desktop.

Q: Will this increase my app size?

A: Minimal impact. The package adds approximately ~50KB to your app.

Q: Is it production-ready?

A: Yes! The package is well-tested, used in production apps, and actively maintained.

Roadmap

v1.1.0 (Q1 2025)

  • [ ] Animated transitions between breakpoints
  • [ ] Debug overlay
  • [ ] Platform-specific values

v1.2.0 (Q2 2025)

  • [ ] Responsive theme system
  • [ ] Custom breakpoint support
  • [ ] Performance improvements

v2.0.0 (Q3 2025)

  • [ ] CLI migration tool
  • [ ] Adaptive widgets library
  • [ ] Testing utilities

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

Links

📦 pub.dev

🐙 GitHub

🌐 Live Demo

Feedback & Contributing

Found a bug? Have a feature request?

About the Author

Sayed Moataz is a Flutter developer passionate about building beautiful, responsive cross-platform applications. This package was born from real-world needs — solving responsive design challenges in multiple production projects.

Connect with Me

Related Articles

More Flutter best practices and architecture guides:

Happy coding! 🚀

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

Top comments (0)