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

Sayed Moataz — Thu, 18 Dec 2025 22:46:54 +0000

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:

Consistency - One source of truth for breakpoints and spacing
Readability - Semantic APIs that make intent clear
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)

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(),
      ],
    );
  },
)

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
)

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)),
)

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:

🌐 Try the Live Demo

How to Test:

Open the link in your browser
Press F12 to open DevTools
Toggle Device Toolbar (📱 icon)
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

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) { ... }

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?

🗳️ Vote on features: GitHub Discussions
🤝 Contribute: Contributing Guide
🐛 Open an issue
🔧 Submit a PR: Fork the repo and contribute!
⭐ Star on GitHub if you find it useful

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

💼 LinkedIn: linkedin.com/in/sayedmoataz
🐙 GitHub: @sayedmoataz
📧 Email: sayedmoataz9@gmail.com

More Flutter best practices and architecture guides:

📱 Flutter App Startup: From 30 Seconds to Under 1 Second
🔔 Building a Robust Notification Status Service in Flutter
📊 Building a Robust Firebase Analytics Layer in Flutter

Happy coding! 🚀

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

Open-sourcing a simple performance_monitor package: from 30s splash to <1s

Sayed Moataz — Mon, 08 Dec 2025 08:56:15 +0000

Hey everyone 👋

I just published a new Flutter package to help with app startup performance and debugging:

performance_monitor

Measure how long each init step actually takes
Get a nice timing report for your startup sequence
Add simple smart caching to avoid duplicate async calls

Install:

dependencies:
performance_monitor: ^1.0.1
Pub: https://pub.dev/packages/performance_monitor

If you’re fighting slow splash screens or mysterious startup delays, I’d love your feedback and ideas for improvements!

DEV Community: Sayed Moataz