Universal Breakpoints

A simple, reusable, and platform-independent screen size breakpoints package for Flutter

✨ Features

• Platform Agnostic: Works seamlessly on all Flutter platforms (iOS, Android, Web, Desktop, etc.)
• 8 Main Breakpoint Categories: From ultra-small phones to 4K+ displays
• 19 Ultra-Granular Sub-Categories: Fine-grained control over specific device types
• Automatic Scaling: Built-in scaling factors for fonts, widths, and heights
• Responsive Extensions: Convenient BuildContext and num extensions
• Orientation Detection: Portrait/landscape and aspect ratio helpers
• Singleton Pattern: Single instance for consistent state across your app
• Dynamic Grid System: Responsive grid widgets
• Zero External Dependencies: All grid features use only Flutter's built-in widgets

🚀 Quick Start

Add to your pubspec.yaml:

dependencies:
  universal_breakpoints: ^1.0.0

Then run:

flutter pub get

Basic Setup

import 'package:universal_breakpoints/universal_breakpoints.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    UniversalBreakpoints().init(context);
    return MaterialApp(
      title: 'My App',
      home: const MyHome(),
    );
  }
}

📖 Documentation

• Getting Started - Installation and setup
• Basic Usage - BuildContext extensions and responsive values
• API Reference - Complete API documentation
• Advanced Examples - Production-ready patterns
• Grid System - Responsive grid and masonry layouts

🎨 Demo

Check out the Live Demo to see Universal Breakpoints in action!

Key Features Explained

Platform Agnostic Design

Universal Breakpoints works seamlessly across all Flutter platforms, ensuring your responsive design works everywhere.

8 Main Breakpoint Categories

The package provides 8 main breakpoint categories covering everything from ultra-small phones to 4K+ displays:

• Phone
• Tablet
• Desktop
• TV
• And more...

Responsive Extensions

Easy-to-use BuildContext extensions make responsive design intuitive:

if (context.isPhone) {
  // Phone layout
} else if (context.isTablet) {
  // Tablet layout
}

Automatic Scaling

Built-in scaling factors automatically adjust:

• Font sizes
• Widget widths
• Widget heights
• Padding and margins

Orientation Detection

Easily detect and respond to device orientation changes:

if (context.isPortrait) {
  // Portrait layout
} else {
  // Landscape layout
}

Use Cases

• Build responsive layouts that work on all devices
• Create adaptive UI that scales appropriately
• Manage platform-specific designs with ease
• Design once, deploy everywhere

📄 License

MIT License - See LICENSE file for details

Getting Help

Visit the documentation for detailed guides and examples.