### Navigate to Example Directory

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/example/README.md

Change the current directory to the example folder of the project.

```bash
cd example
```

--------------------------------

### Example Development Workflow

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/PACKAGE_STRUCTURE.md

Commands for running and building the example application.

```bash
cd example
flutter run -d web
flutter build web --release
```

--------------------------------

### Run the Example Application

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/example-app.md

Commands to navigate to the example directory and launch the Flutter web application.

```bash
cd example
flutter run -d web
```

--------------------------------

### Build for Production

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/example-app.md

Command to build the example web application for release.

```bash
cd example
flutter build web --release
```

--------------------------------

### Install dependencies

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/getting-started.md

Run this command in your terminal to fetch the package.

```bash
flutter pub get
```

--------------------------------

### Project Structure Overview

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/example-app.md

Directory layout of the example project.

```text
example/
├── lib/
│   ├── main.dart                    # App initialization
│   ├── pages/
│   │   └── dynamic_grid_demo.dart   # Dynamic grid showcase
│   └── screens/
│       ├── home_screen.dart         # Navigation hub
│       ├── breakpoints_showcase.dart # Breakpoint visualization
│       ├── responsive_layouts.dart  # Layout examples
│       ├── device_detection.dart    # Device detection demo
│       ├── scaling_extensions.dart  # Scaling showcase
│       ├── advanced_examples.dart   # Advanced patterns
│       └── docs_example.dart        # Feature documentation
└── widgets/                         # Custom reusable widgets
```

--------------------------------

### Run Tests

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/example-app.md

Command to execute tests within the example project.

```bash
cd example
flutter test
```

--------------------------------

### Implement ProductGrid Example

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/README.md

Demonstrates a practical implementation of DynamicGrid within a StatelessWidget, utilizing custom column and spacing configurations for different screen sizes.

```dart
class ProductGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DynamicGrid(
      items: products,
      itemBuilder: (context, product, index) {
        return ProductCard(product: product);
      },
      columnConfig: GridColumnConfig(
        mobile: 1,
        largeMobile: 2,
        tablet: 3,
        desktop: 4,
        largeDesktop: 6,
      ),
      spacingConfig: GridSpacingConfig(
        mobile: 8,
        tablet: 12,
        desktop: 16,
        defaultSpacing: 12,
      ),
      itemAspectRatio: 0.75,
      padding: EdgeInsets.all(16.0),
      enableAnimations: true,
    );
  }
}
```

--------------------------------

### Responsive Web App Example

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/responsive-wrapper.md

Demonstrates a responsive web app layout using ResponsiveWrapper. Access screen dimensions and device type via `context.screenWidth`, `context.screenHeight`, and device checks.

```dart
class ResponsiveWebApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ResponsiveWrapper(
      config: ResponsiveWrapperConfig(
        autoInitialize: true,
        debugPrint: false,
      ),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('Responsive Web App')),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Screen Width: ${context.screenWidth}'),
                Text('Screen Height: ${context.screenHeight}'),
                Text('Device: ${context.isMobile ? 'Mobile' : context.isTablet ? 'Tablet' : 'Desktop'}'),
                SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () {},
                  child: Text('Resize your window to see updates'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
```

--------------------------------

### E-Commerce Product Grid Example

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/EXAMPLE_APP.md

Implement an e-commerce product grid using DynamicGrid with custom column and spacing configurations for different screen sizes. Requires a Product model and ProductCard widget.

```dart
class ProductGrid extends StatelessWidget {
  final List<Product> products;

  const ProductGrid({required this.products});

  @override
  Widget build(BuildContext context) {
    return DynamicGrid(
      items: products,
      itemBuilder: (context, product, index) {
        return ProductCard(product: product);
      },
      columnConfig: GridColumnConfig(
        compact: 1,
        standard: 2,
        phablet: 2,
        smallTablet: 2,
        largeTablet: 3,
        smallDesktop: 4,
        largeDesktop: 5,
      ),
      spacingConfig: GridSpacingConfig(
        compactSpacing: 8,
        standardSpacing: 12,
        smallTabletSpacing: 12,
        largeTabletSpacing: 16,
        smallDesktopSpacing: 20,
        largeDesktopSpacing: 24,
      ),
      itemAspectRatio: 0.75,
      padding: const EdgeInsets.all(16),
    );
  }
}
```

--------------------------------

### Responsive Values

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/README.md

Use the `responsiveValue` extension to get different values based on the screen size category.

```APIDOC
## Responsive Values

### Description

Get different values based on the current screen size category.

### Method

Extension method on `BuildContext`.

### Endpoint

N/A (Widget Extension)

### Parameters

#### Generic Parameters

- **mobile** (T) - Required - Value for mobile screen size.
- **smallTablet** (T) - Required - Value for small tablet screen size.
- **largeTablet** (T) - Required - Value for large tablet screen size.
- **desktop** (T) - Required - Value for desktop screen size.

### Request Example

```dart
int columns = context.responsiveValue<int>(
  mobile: 1,
  smallTablet: 2,
  largeTablet: 3,
  desktop: 4,
);
```

### Response

#### Success Response (200)

- **T** (type) - The value corresponding to the current screen size category.
```

--------------------------------

### Initialize Universal Breakpoints in MyApp

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/README.md

Initialize UniversalBreakpoints by calling init(context) within your MaterialApp's build method. This setup is required before using any of the package's responsive features.

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

--------------------------------

### Add Universal Breakpoints Dependency

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/README.md

Add the universal_breakpoints package to your pubspec.yaml file and run flutter pub get to install it.

```yaml
dependencies:
  universal_breakpoints: ^1.0.0
```

--------------------------------

### Manual Initialization vs. ResponsiveWrapper

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/responsive-wrapper.md

Compares manual initialization of UniversalBreakpoints with using ResponsiveWrapper. ResponsiveWrapper simplifies the process by handling initialization automatically.

```dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    UniversalBreakpoints().init(context);
    // Won't update on window resize
    return MaterialApp(...);
  }
}
```

```dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ResponsiveWrapper(
      config: ResponsiveWrapperConfig(autoInitialize: true),
      child: MaterialApp(...),
    );
  }
}
```

--------------------------------

### Orientation-Aware Layouts in Flutter

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/advanced-examples.md

Create layouts that adapt to portrait and landscape orientations using `context.isPortrait`. This example switches between a Column and a Row based on the device's orientation.

```dart
class OrientationAwareLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    if (context.isPortrait) {
      return Column(
        children: [
          Expanded(
            child: Container(color: Colors.blue, width: double.infinity),
          ),
          Expanded(
            child: Container(color: Colors.red, width: double.infinity),
          ),
        ],
      );
    } else {
      return Row(
        children: [
          Expanded(
            child: Container(color: Colors.blue, height: double.infinity),
          ),
          Expanded(
            child: Container(color: Colors.red, height: double.infinity),
          ),
        ],
      );
    }
  }
}
```

--------------------------------

### Build Web Release

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/PACKAGE_STRUCTURE.md

Generate a production-ready web build for the project.

```bash
flutter build web --release
```

--------------------------------

### Package Development Workflow

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/PACKAGE_STRUCTURE.md

Standard commands for analyzing, testing, and documenting the package.

```bash
flutter analyze
flutter test
dart doc
```

--------------------------------

### Configure ResponsiveWrapper

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/api-reference.md

Initialize the ResponsiveWrapper with custom configuration settings.

```dart
ResponsiveWrapper(
  config: ResponsiveWrapperConfig(
    autoInitialize: true,   // Auto-initialize on rebuild
    debugPrint: false,      // Log resize events
  ),
  child: MyApp(),
)
```

--------------------------------

### Initialize Universal Breakpoints

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/PACKAGE_STRUCTURE.md

Initialize the package within the MaterialApp builder to enable responsive context extensions.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) {
          UniversalBreakpoints().init(context);
          return const MyHome();
        },
      ),
    );
  }
}
```

--------------------------------

### Accessing ScreenBreakpoints Constants in Flutter

Source: https://context7.com/shyamexe/universal_breakpoints/llms.txt

Use these constants to define custom responsive logic based on screen width. The example demonstrates accessing the values directly and implementing a custom category helper function.

```dart
class CustomResponsiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;

    // Access breakpoint constants directly
    print('XXS breakpoint: ${ScreenBreakpoints.xxs}');   // 360.0
    print('XS breakpoint: ${ScreenBreakpoints.xs}');     // 480.0
    print('SM breakpoint: ${ScreenBreakpoints.sm}');     // 768.0
    print('MD breakpoint: ${ScreenBreakpoints.md}');     // 1024.0
    print('LG breakpoint: ${ScreenBreakpoints.lg}');     // 1280.0
    print('XL breakpoint: ${ScreenBreakpoints.xl}');     // 1440.0
    print('XXL breakpoint: ${ScreenBreakpoints.xxl}');   // 1920.0
    print('XXXL breakpoint: ${ScreenBreakpoints.xxxl}'); // 2560.0

    // Custom breakpoint logic
    String getCustomCategory(double width) {
      if (width < ScreenBreakpoints.xxs) return 'tiny';
      if (width < ScreenBreakpoints.sm) return 'phone';
      if (width < ScreenBreakpoints.lg) return 'tablet';
      if (width < ScreenBreakpoints.xxl) return 'desktop';
      return 'large-desktop';
    }

    // Breakpoint ranges:
    // xxs:  0 - 359px    (extra extra small phones)
    // xs:   360 - 479px  (small phones)
    // sm:   480 - 767px  (large phones)
    // md:   768 - 1023px (tablets)
    // lg:   1024 - 1279px (large tablets/small desktops)
    // xl:   1280 - 1439px (desktops)
    // xxl:  1440 - 1919px (large desktops)
    // xxxl: 1920 - 2559px (4K displays)
    // ultra: 2560+px     (5K+ displays)

    return Center(
      child: Text('Category: ${getCustomCategory(width)}'),
    );
  }
}
```

--------------------------------

### Implement Responsive Layouts

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/PACKAGE_STRUCTURE.md

Use BuildContext extensions to conditionally render widgets based on the current screen size category.

```dart
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(context.isMobile ? 16 : 32),
      child: context.isMobile
          ? MobileLayout()
          : context.isTablet
              ? TabletLayout()
              : DesktopLayout(),
    );
  }
}
```

--------------------------------

### Scaling Modifiers for UI Elements

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/basic-usage.md

These modifiers provide a shorthand for applying scaled dimensions to font sizes, widths, heights, and line heights. For example, `16.sF` scales the font size, and `100.sW` scales the width.

```dart
.sF
  // Scaled font size
  `16.sF`
.sW
  // Scaled width
  `100.sW`
.sH
  // Scaled height
  `50.sH`
.sFh
  // Calculated line height
  `14.sFh`
```

--------------------------------

### Initialize Universal Breakpoints

Source: https://context7.com/shyamexe/universal_breakpoints/llms.txt

Initialize the singleton instance in the root widget's build method to enable responsive features.

```dart
import 'package:universal_breakpoints/universal_breakpoints.dart';

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

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

--------------------------------

### Direct Access to Configuration

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/api-reference.md

Access the UniversalBreakpoints singleton for manual configuration queries and scaling calculations.

```dart
final config = UniversalBreakpoints();

config.screenWidth          // Current screen width
config.screenHeight         // Current screen height
config.textScaleFactor      // Font scaling factor
config.widthScaleFactor     // Width scaling factor
config.heightScaleFactor    // Height scaling factor
config.screenType           // Type as string
config.screenSizeCategory   // Main category
config.screenSizeSubCategory // Sub-category

config.scaledFontSize(16)   // Scale font size
config.scaledWidth(100)     // Scale width
config.scaledHeight(50)     // Scale height
```

--------------------------------

### Implement DynamicGrid for Responsive Layouts

Source: https://context7.com/shyamexe/universal_breakpoints/llms.txt

Configure column counts and spacing across various screen breakpoints using GridColumnConfig and GridSpacingConfig.

```dart
class ProductGrid extends StatelessWidget {
  final List<Product> products = List.generate(20, (i) => Product(id: i, name: 'Product $i'));

  @override
  Widget build(BuildContext context) {
    return DynamicGrid(
      items: products,
      itemBuilder: (context, product, index) {
        return Card(
          elevation: 2,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.shopping_bag, size: 48),
              SizedBox(height: 8),
              Text(product.name, textAlign: TextAlign.center),
            ],
          ),
        );
      },
      // Custom column configuration for each breakpoint
      columnConfig: GridColumnConfig(
        ultraCompact: 1,      // < 320px
        compact: 1,           // 320-374px
        standard: 2,          // 375-413px
        largePhone: 2,        // 414-479px
        phablet: 2,           // 480-567px
        smallTablet: 3,       // 568-667px
        standardTablet: 3,    // 668-767px
        largeTablet: 3,       // 768-833px
        extraLargeTablet: 4,  // 834-1023px
        smallDesktop: 4,      // 1024-1279px
        standardDesktop: 5,   // 1280-1365px
        largeDesktop: 6,      // 1366-1439px
        extraLargeDesktop: 6, // 1440-1535px
        widescreen: 7,        // 1536-1679px
        fullHD: 8,            // 1680-1919px
        qhd: 10,              // 1920-2559px
        ultraWide: 12,        // 2560+px
        defaultColumns: 2,    // Fallback
      ),
      // Custom spacing configuration
      spacingConfig: GridSpacingConfig(
        ultraCompactSpacing: 4,
        compactSpacing: 8,
        standardSpacing: 12,
        largePhoneSpacing: 12,
        smallTabletSpacing: 12,
        largeTabletSpacing: 16,
        smallDesktopSpacing: 20,
        largeDesktopSpacing: 24,
        ultraWideSpacing: 32,
        defaultSpacing: 12,
      ),
      itemAspectRatio: 1.0,                           // Square items (width/height)
      enableAnimations: true,                          // Animate layout changes
      animationDuration: const Duration(milliseconds: 300),
      animationCurve: Curves.easeInOut,
      padding: EdgeInsets.all(16),
      // Or override spacing directly:
      // mainAxisSpacing: 16,
      // crossAxisSpacing: 16,
    );
  }
}

class Product {
  final int id;
  final String name;
  Product({required this.id, required this.name});
}
```

--------------------------------

### ResponsiveWrapper Configuration Options

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/responsive-wrapper.md

Configure ResponsiveWrapper with ResponsiveWrapperConfig. Set autoInitialize to true to automatically initialize UniversalBreakpoints on rebuilds and debugPrint to true to log resize events.

```dart
ResponsiveWrapperConfig(
  autoInitialize: true,   // Auto-initialize on rebuild
  debugPrint: false,      // Log resize events to console
)
```

--------------------------------

### Package Directory Structure

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/PACKAGE_STRUCTURE.md

Visual representation of the project file organization.

```text
universal_breakpoints/
├── lib/                              # Main package source code
│   ├── universal_breakpoints.dart    # Main export file
│   └── src/
│       ├── size_config.dart          # Core UniversalBreakpoints class
│       ├── breakpoints.dart          # ScreenBreakpoints constants
│       ├── enums.dart                # ScreenSizeCategory & ScreenSizeSubCategory
│       └── extensions.dart           # BuildContext & num extensions
│
├── example/                          # Complete showcase application
│   ├── lib/
│   │   ├── main.dart                 # App initialization
│   │   └── screens/
│   │       ├── home_screen.dart              # Navigation hub
│   │       ├── breakpoints_showcase.dart     # Breakpoint demo
│   │       ├── responsive_layouts.dart       # Layout examples
│   │       ├── device_detection.dart         # Device detection demo
│   │       ├── scaling_extensions.dart       # Scaling showcase
│   │       └── advanced_examples.dart        # Advanced patterns
│   ├── pubspec.yaml                  # Example dependencies
│   └── README.md                     # Example documentation
│
├── test/
│   └── universal_breakpoints_test.dart  # Unit tests
│
├── README.md                         # Main package documentation
├── CHANGELOG.md                      # Version history
├── LICENSE                           # MIT License
├── pubspec.yaml                      # Package metadata
├── analysis_options.yaml             # Lint rules
└── .gitignore                        # Git configuration
```

--------------------------------

### Initialization

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/EXAMPLE_APP.md

Initialize the UniversalBreakpoints service within the MaterialApp builder to enable responsive features.

```dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) {
          UniversalBreakpoints().init(context);
          return const HomeScreen();
        },
      ),
    );
  }
}
```

--------------------------------

### Use ResponsiveWrapper

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/README.md

Wrap your app with ResponsiveWrapper to handle dynamic screen size changes and rebuilds automatically.

```dart
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) {
    return ResponsiveWrapper(
      config: ResponsiveWrapperConfig(
        autoInitialize: true,
        debugPrint: false,  // Set to true for resize debug logs
      ),
      child: MaterialApp(
        title: 'My App',
        home: const MyHome(),
      ),
    );
  }
}
```

```dart
ResponsiveWrapper(
  config: ResponsiveWrapperConfig(
    autoInitialize: true,
    debugPrint: true,  // Logs resize events to console
  ),
  child: MyApp(),
)
```

--------------------------------

### Responsive Abstraction Levels

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/best-practices.md

Use main categories for general layout logic and sub-categories for specific device handling, while avoiding overly granular conditions.

```dart
// ✅ Good
if (context.isMobile) {
  // Mobile layout
} else if (context.isTablet) {
  // Tablet layout
} else {
  // Desktop layout
}
```

```dart
// ✅ Good for specific device handling
if (context.isStandardPhone) {
  // Handle specific phone models
} else if (context.isLargePhone) {
  // Handle larger phones
}
```

```dart
// ❌ Avoid - Too granular
if (context.isCompactPhone && context.isPortrait) {
  // This is too specific
}
```

--------------------------------

### context.responsiveValue<T>()

Source: https://context7.com/shyamexe/universal_breakpoints/llms.txt

A method to return different values based on the current screen size with automatic fallback logic.

```APIDOC
## context.responsiveValue<T>()

### Description
Returns a value of type T based on the current screen size. It uses mobile as a required fallback and allows overrides for various tablet, desktop, and granular breakpoints.

### Parameters
- **mobile** (T) - Required - Value for < 768px.
- **tablet** (T) - Optional - Value for 768-1279px.
- **desktop** (T) - Optional - Value for 1280+px.
- **smallMobile/largeMobile/smallTablet/largeTablet/smallDesktop/largeDesktop/ultraWide** (T) - Optional - Granular overrides for specific width ranges.
```

--------------------------------

### Implement MasonryDynamicGrid

Source: https://context7.com/shyamexe/universal_breakpoints/llms.txt

Creates a Pinterest-style masonry grid where items are distributed across columns with varying heights. Requires GridColumnConfig and GridSpacingConfig to define responsive behavior.

```dart
class GalleryGrid extends StatelessWidget {
  final List<String> images = List.generate(20, (i) => 'Image $i');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MasonryDynamicGrid(
        items: images,
        itemBuilder: (context, image, index) {
          // Items with varying heights for masonry effect
          return Card(
            clipBehavior: Clip.antiAlias,
            child: Container(
              // Vary height based on index for demo
              height: 100.0 + (index % 3) * 50.0,
              color: Colors.primaries[index % Colors.primaries.length],
              child: Center(
                child: Text(
                  image,
                  style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                ),
              ),
            ),
          );
        },
        columnConfig: GridColumnConfig(
          compact: 2,
          standard: 2,
          largePhone: 2,
          smallTablet: 3,
          largeTablet: 3,
          smallDesktop: 4,
          largeDesktop: 5,
          ultraWide: 6,
          defaultColumns: 2,
        ),
        spacingConfig: GridSpacingConfig(
          compactSpacing: 8,
          standardSpacing: 12,
          largeTabletSpacing: 16,
          smallDesktopSpacing: 20,
          defaultSpacing: 12,
        ),
        enableAnimations: true,
        animationDuration: const Duration(milliseconds: 300),
        padding: EdgeInsets.all(16),
      ),
    );
  }
}
```

--------------------------------

### Implement AnimatedDynamicGrid

Source: https://context7.com/shyamexe/universal_breakpoints/llms.txt

Creates a responsive grid with sequential entrance animations. Supports various styles like scale, fade, and slide via the itemStyle property.

```dart
class AnimatedGallery extends StatelessWidget {
  final List<Map<String, dynamic>> items = List.generate(
    12,
    (i) => {'id': i, 'title': 'Card $i', 'color': Colors.primaries[i % Colors.primaries.length]},
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedDynamicGrid(
        items: items,
        itemBuilder: (context, item, index) {
          return Card(
            color: item['color'],
            elevation: 4,
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.star, size: 32, color: Colors.white),
                  SizedBox(height: 8),
                  Text(
                    item['title'],
                    style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),
          );
        },
        // Animation style options:
        // - AnimatedGridItemStyle.scaleIn (default): Items scale up from 0
        // - AnimatedGridItemStyle.fadeIn: Items fade in from transparent
        // - AnimatedGridItemStyle.slideInFromLeft: Items slide from left
        // - AnimatedGridItemStyle.slideInFromTop: Items slide from top
        // - AnimatedGridItemStyle.fadeAndScale: Combined fade + scale effect
        itemStyle: AnimatedGridItemStyle.fadeAndScale,
        animationDuration: const Duration(milliseconds: 500),
        animationCurve: Curves.easeOutCubic,
        columnConfig: GridColumnConfig(
          compact: 1,
          standard: 2,
          smallTablet: 2,
          largeTablet: 3,
          smallDesktop: 3,
          largeDesktop: 4,
          defaultColumns: 2,
        ),
        spacingConfig: GridSpacingConfig(
          compactSpacing: 12,
          standardSpacing: 16,
          largeTabletSpacing: 20,
          smallDesktopSpacing: 24,
          defaultSpacing: 16,
        ),
        itemAspectRatio: 1.0,
        padding: EdgeInsets.all(16),
      ),
    );
  }
}
```

--------------------------------

### Build Complex Responsive Layouts

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/advanced-examples.md

Use context extensions to dynamically adjust padding, font sizes, and grid configurations based on screen size (mobile, tablet, desktop).

```dart
class ComplexResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.all(context.isMobile ? 16.0 : 32.0),
        child: Column(
          children: [
            Text(
              'Welcome',
              style: TextStyle(
                fontSize: context.isMobile ? 24.sF : 32.sF,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 20.sH),
            GridView.count(
              crossAxisCount: context.responsiveValue<int>(
                mobile: 1,
                tablet: 2,
                desktop: 3,
              ),
              mainAxisSpacing: 16.sH,
              crossAxisSpacing: 16.sW,
              children: List.generate(9, (index) {
                return Container(
                  width: double.infinity,
                  height: context.isMobile ? 150.sH : 200.sH,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    color: Colors.blue[100],
                  ),
                );
              }),
            ),
          ],
        ),
      ),
    );
  }
}
```

--------------------------------

### Run Flutter App on Web

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/example/README.md

Execute the Flutter application in web mode. Use the --release flag for optimized builds.

```bash
flutter run -d web
```

```bash
flutter run -d web --release
```

--------------------------------

### Masonry Dynamic Grid Widget

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/README.md

Create Pinterest-style masonry layouts with MasonryDynamicGrid, which offers responsive column counts and flexible item heights.

```dart
MasonryDynamicGrid(
  items: List.generate(20, (index) => index),
  itemBuilder: (context, item, index) {
    return Card(child: Center(child: Text('$item')));
  },
  columnConfig: GridColumnConfig(
    mobile: 2,
    tablet: 3,
    desktop: 4,
  ),
  spacingConfig: GridSpacingConfig(defaultSpacing: 12),
)
```

--------------------------------

### Screen Size and Device Detection

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/api-reference.md

Extensions on BuildContext to identify the current screen size category or device type based on width.

```APIDOC
## Screen Size and Device Detection

### Description
Provides boolean properties on BuildContext to determine the current screen size category (e.g., isXXS, isMD) or device type (e.g., isMobile, isDesktop).

### Usage
- context.isXXS (< 360px)
- context.isXS (360-479px)
- context.isSM (480-767px)
- context.isMD (768-1023px)
- context.isLG (1024-1279px)
- context.isXL (1280-1439px)
- context.isXXL (1440-1919px)
- context.isXXXL (1920+px)
- context.isMobile (< 768px)
- context.isTablet (768-1279px)
- context.isDesktop (1280+px)
- context.isLargeScreen (1440+px)
```

--------------------------------

### Implement Responsive Layouts with ScreenSizeCategory and ScreenSizeSubCategory

Source: https://context7.com/shyamexe/universal_breakpoints/llms.txt

Use these enums to switch layouts or adjust UI properties based on the current device screen size. Access them via BuildContext extensions.

```dart
class DeviceInfoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Access current categories
    ScreenSizeCategory category = context.screenCategory;
    ScreenSizeSubCategory subCategory = context.screenSubCategory;

    // ScreenSizeCategory values:
    // xxs, xs, sm, md, lg, xl, xxl, xxxl

    // ScreenSizeSubCategory values:
    // ultraCompact, compact, standard, large, extraLarge,
    // smallTablet, standardTablet, largeTablet, extraLargeTablet,
    // smallDesktop, standardDesktop, largeDesktop, extraLargeDesktop,
    // widescreen, fullHD, qhd, ultraWide, ultraHD, superUltraWide

    // Use in switch statements for comprehensive handling
    Widget getLayoutForCategory(ScreenSizeCategory cat) {
      switch (cat) {
        case ScreenSizeCategory.xxs:
        case ScreenSizeCategory.xs:
        case ScreenSizeCategory.sm:
          return MobileLayout();
        case ScreenSizeCategory.md:
        case ScreenSizeCategory.lg:
          return TabletLayout();
        case ScreenSizeCategory.xl:
        case ScreenSizeCategory.xxl:
        case ScreenSizeCategory.xxxl:
          return DesktopLayout();
      }
    }

    // Fine-grained control with sub-categories
    int getColumnsForSubCategory(ScreenSizeSubCategory sub) {
      switch (sub) {
        case ScreenSizeSubCategory.ultraCompact:
        case ScreenSizeSubCategory.compact:
          return 1;
        case ScreenSizeSubCategory.standard:
        case ScreenSizeSubCategory.large:
        case ScreenSizeSubCategory.extraLarge:
          return 2;
        case ScreenSizeSubCategory.smallTablet:
        case ScreenSizeSubCategory.standardTablet:
        case ScreenSizeSubCategory.largeTablet:
          return 3;
        case ScreenSizeSubCategory.extraLargeTablet:
        case ScreenSizeSubCategory.smallDesktop:
          return 4;
        case ScreenSizeSubCategory.standardDesktop:
        case ScreenSizeSubCategory.largeDesktop:
          return 5;
        case ScreenSizeSubCategory.extraLargeDesktop:
        case ScreenSizeSubCategory.widescreen:
        case ScreenSizeSubCategory.fullHD:
          return 6;
        case ScreenSizeSubCategory.qhd:
        case ScreenSizeSubCategory.ultraWide:
        case ScreenSizeSubCategory.ultraHD:
        case ScreenSizeSubCategory.superUltraWide:
          return 8;
      }
    }

    return Column(
      children: [
        Text('Category: ${category.name}'),
        Text('Sub-Category: ${subCategory.name}'),
        Text('Columns: ${getColumnsForSubCategory(subCategory)}'),
        Expanded(child: getLayoutForCategory(category)),
      ],
    );
  }
}

// Placeholder widgets
class MobileLayout extends StatelessWidget { @override Widget build(BuildContext context) => Container(); }
class TabletLayout extends StatelessWidget { @override Widget build(BuildContext context) => Container(); }
class DesktopLayout extends StatelessWidget { @override Widget build(BuildContext context) => Container(); }
```

--------------------------------

### Manage Backwards Compatibility

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/README.md

Shows how to maintain compatibility with the legacy SizeConfig class name by using a typedef.

```dart
typedef SizeConfig = UniversalBreakpoints;

SizeConfig().init(context);       // Still works
UniversalBreakpoints().init(context); // New name
```

--------------------------------

### ResponsiveWrapper Configuration

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/best-practices.md

Use ResponsiveWrapper for web and desktop apps, enabling debug logging during development.

```dart
// ✅ Use ResponsiveWrapper for web apps
ResponsiveWrapper(
  config: ResponsiveWrapperConfig(autoInitialize: true),
  child: MaterialApp(
    home: MyHomeScreen(),
  ),
)
```

```dart
// ✅ Good for debugging
ResponsiveWrapper(
  config: ResponsiveWrapperConfig(
    autoInitialize: true,
    debugPrint: true,  // See resize events
  ),
  child: MaterialApp(...),
)
```

--------------------------------

### Masonry Grid

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/EXAMPLE_APP.md

Create a masonry-style responsive grid layout.

```dart
MasonryDynamicGrid(
  items: images,
  itemBuilder: (context, image, index) {
    return Image.network(image.url);
  },
  columnConfig: GridColumnConfig(
    compact: 2,
    largeTablet: 3,
    smallDesktop: 4,
  ),
  spacingConfig: GridSpacingConfig(defaultSpacing: 12),
  padding: const EdgeInsets.all(16),
)
```

--------------------------------

### Flutter Clean and Run Commands

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/EXAMPLE_APP.md

Commands to clean the Flutter project, fetch dependencies, and run the application on the web. Useful for resolving build issues.

```bash
flutter clean
flutter pub get
flutter run -d web
```

--------------------------------

### Document Responsive Behavior with Adaptive Grid

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/best-practices.md

Illustrates an adaptive grid widget that adjusts its column count based on screen size. This is useful for creating responsive UIs that adapt to different devices.

```dart
/// Adaptive grid that adjusts columns based on screen size:
/// - Mobile: 1 column
/// - Tablet: 2 columns
/// - Desktop: 3-4 columns
class ResponsiveGrid extends StatelessWidget {
  // ...
}
```

--------------------------------

### Access Screen Metrics

Source: https://context7.com/shyamexe/universal_breakpoints/llms.txt

Retrieve screen properties and scaling factors after initializing the singleton instance.

```dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Initialize with current context
    UniversalBreakpoints().init(context);

    // Access screen properties after initialization
    final config = UniversalBreakpoints();
    print('Screen Width: ${config.screenWidth}');           // e.g., 1280.0
    print('Screen Height: ${config.screenHeight}');         // e.g., 720.0
    print('Text Scale Factor: ${config.textScaleFactor}');  // e.g., 0.67
    print('Width Scale Factor: ${config.widthScaleFactor}'); // e.g., 0.67
    print('Height Scale Factor: ${config.heightScaleFactor}'); // e.g., 0.375
    print('Screen Type: ${config.screenType}');             // e.g., 'lg'
    print('Category: ${config.screenSizeCategory}');        // e.g., ScreenSizeCategory.lg
    print('Sub-Category: ${config.screenSizeSubCategory}'); // e.g., ScreenSizeSubCategory.smallDesktop

    return MaterialApp(home: MyHome());
  }
}
```

--------------------------------

### Enable debug logging

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/getting-started.md

Set debugPrint to true in the ResponsiveWrapperConfig to monitor resize events in the console.

```dart
ResponsiveWrapper(
  config: ResponsiveWrapperConfig(
    autoInitialize: true,
    debugPrint: true,  // Logs resize events to console
  ),
  child: MyApp(),
)
```

--------------------------------

### Dynamic Grid Basic Usage

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/EXAMPLE_APP.md

Implement a responsive grid with specific column and spacing configurations for various breakpoints.

```dart
DynamicGrid(
  items: products,
  itemBuilder: (context, product, index) {
    return ProductCard(product: product);
  },
  columnConfig: GridColumnConfig(
    ultraCompact: 1,
    compact: 1,
    standard: 2,
    largePhone: 2,
    smallTablet: 2,
    largeTablet: 3,
    smallDesktop: 4,
    largeDesktop: 5,
  ),
  spacingConfig: GridSpacingConfig(
    ultraCompactSpacing: 8,
    compactSpacing: 8,
    standardSpacing: 12,
    largePhoneSpacing: 12,
    smallTabletSpacing: 16,
    largeTabletSpacing: 16,
    smallDesktopSpacing: 20,
    largeDesktopSpacing: 24,
  ),
  itemAspectRatio: 0.75,
  padding: const EdgeInsets.all(16),
  enableAnimations: true,
)
```

--------------------------------

### Use ResponsiveWrapper Widget

Source: https://context7.com/shyamexe/universal_breakpoints/llms.txt

Wrap your app with ResponsiveWrapper to automatically handle rebuilds on window resize and access responsive context extensions.

```dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ResponsiveWrapper(
      config: ResponsiveWrapperConfig(
        autoInitialize: true,  // Auto-initialize UniversalBreakpoints on each build
        debugPrint: true,      // Log resize events: "[ResponsiveWrapper] Build - Size: 1280x720, Orientation: landscape"
      ),
      child: MaterialApp(
        title: 'Responsive App',
        home: Builder(
          builder: (context) {
            // All descendants automatically get updated responsive values
            return Scaffold(
              appBar: AppBar(title: Text('Current: ${context.screenType}')),
              body: Center(
                child: Text(
                  context.isMobile ? 'Mobile Layout' :
                  context.isTablet ? 'Tablet Layout' : 'Desktop Layout',
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}
```

--------------------------------

### Image Gallery with Masonry Layout

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/EXAMPLE_APP.md

Create an image gallery with a masonry layout using MasonryDynamicGrid. Customize columns, spacing, and item aspect ratio. Assumes image URLs are provided.

```dart
class ImageGallery extends StatelessWidget {
  final List<String> imageUrls;

  const ImageGallery({required this.imageUrls});

  @override
  Widget build(BuildContext context) {
    return MasonryDynamicGrid(
      items: imageUrls,
      itemBuilder: (context, imageUrl, index) {
        return ClipRRect(
          borderRadius: BorderRadius.circular(12),
          child: Image.network(
            imageUrl,
            fit: BoxFit.cover,
          ),
        );
      },
      columnConfig: GridColumnConfig(
        standard: 2,
        largeTablet: 3,
        smallDesktop: 4,
        largeDesktop: 5,
      ),
      spacingConfig: GridSpacingConfig(
        standardSpacing: 12,
        largeTabletSpacing: 16,
        smallDesktopSpacing: 20,
      ),
      padding: const EdgeInsets.all(16),
    );
  }
}
```

--------------------------------

### Implement Responsive Values with context.responsiveValue<T>()

Source: https://context7.com/shyamexe/universal_breakpoints/llms.txt

Use responsiveValue to provide different values for UI properties based on screen size. The mobile parameter is required, while others act as overrides or fallbacks.

```dart
class ResponsiveCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Grid columns that adapt to screen size
    int columns = context.responsiveValue<int>(
      mobile: 1,           // Required: used for < 768px
      tablet: 2,           // Optional: used for 768-1279px
      desktop: 4,          // Optional: used for 1280+px
      smallMobile: 1,      // Optional: override for < 320px and 320-374px
      largeMobile: 2,      // Optional: override for 414-567px
      smallTablet: 2,      // Optional: override for 568-667px
      largeTablet: 3,      // Optional: override for 768-1023px
      smallDesktop: 3,     // Optional: override for 1024-1279px
      largeDesktop: 5,     // Optional: override for 1366-1439px
      ultraWide: 8,        // Optional: override for 2560+px
    );

    // Responsive padding
    double padding = context.responsiveValue<double>(
      mobile: 8.0,
      tablet: 16.0,
      desktop: 32.0,
    );

    // Responsive font size
    double fontSize = context.responsiveValue<double>(
      mobile: 14.0,
      tablet: 16.0,
      desktop: 18.0,
    );

    return GridView.builder(
      padding: EdgeInsets.all(padding),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: columns,
        mainAxisSpacing: padding,
        crossAxisSpacing: padding,
      ),
      itemCount: 12,
      itemBuilder: (context, index) => Card(
        child: Center(
          child: Text('Item $index', style: TextStyle(fontSize: fontSize)),
        ),
      ),
    );
  }
}
```

--------------------------------

### Device Type Detection (BuildContext Extensions)

Source: https://context7.com/shyamexe/universal_breakpoints/llms.txt

Provides boolean properties on BuildContext to detect device categories, specific screen width breakpoints, and orientation/aspect ratio.

```APIDOC
## Device Type Detection

### Description
Provides boolean properties on BuildContext to detect device categories, specific screen width breakpoints, and orientation/aspect ratio for conditional rendering.

### Properties
- **isMobile/isTablet/isDesktop/isLargeScreen** (bool) - Main device categories.
- **isXXS/isXS/isSM/isMD/isLG/isXL/isXXL/isXXXL** (bool) - 8-level breakpoint categories.
- **isUltraCompact...isSuperUltraWide** (bool) - 19-level ultra-granular screen width categories.
- **isPortrait/isLandscape** (bool) - Device orientation.
- **isUltraWideAspect/isStandardAspect/isTallAspect** (bool) - Aspect ratio categories.
```

--------------------------------

### Import Universal Breakpoints Package

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/example/README.md

Import the package correctly to use its extensions and functionalities. This is necessary for features like breakpoint detection.

```dart
import 'package:universal_breakpoints/universal_breakpoints.dart';
```

--------------------------------

### Orientation & Aspect Ratio

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/README.md

Check device orientation and aspect ratio using boolean extension properties.

```APIDOC
## Orientation & Aspect Ratio

### Description

Determine the device's orientation and aspect ratio.

### Method

Extension properties on `BuildContext`.

### Endpoint

N/A (Widget Extension)

### Parameters

N/A

### Request Example

```dart
if (context.isTallAspect) {
  // Code for tall aspect ratios
}
```

### Available Properties

- `context.isPortrait` (Height > Width)
- `context.isLandscape` (Width > Height)
- `context.isUltraWideAspect` (Aspect ratio > 2.0)
- `context.isStandardAspect` (Aspect ratio 1.3-1.8)
- `context.isTallAspect` (Aspect ratio < 1.3)
```

--------------------------------

### Implement Responsive Grid Spacing

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/grid-system.md

Uses context.responsiveValue to define spacing and column counts for different screen sizes within a GridView.

```dart
class ResponsiveSpacingGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final spacing = context.responsiveValue<double>(
      mobile: 8,
      tablet: 12,
      desktop: 16,
    );

    final columns = context.responsiveValue<int>(
      mobile: 1,
      tablet: 2,
      desktop: 3,
    );

    return GridView.count(
      crossAxisCount: columns,
      mainAxisSpacing: spacing.sW,
      crossAxisSpacing: spacing.sW,
      children: List.generate(12, (index) {
        return Card(
          child: Center(
            child: Text('Item ${index + 1}'),
          ),
        );
      }),
    );
  }
}
```

--------------------------------

### Efficient GridView.builder for Layout

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/best-practices.md

Demonstrates the use of GridView.builder for efficient layout management, particularly for displaying lists of items in a grid. Ensure the `columns` variable is appropriately calculated for responsiveness.

```dart
// ✅ Good - Efficient layout
GridView.builder(
  itemCount: items.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: columns,
  ),
  itemBuilder: (context, index) => ItemWidget(items[index]),
)
```

--------------------------------

### Create a Masonry Layout in Flutter

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/grid-system.md

Implements a Pinterest-style grid with varying item aspect ratios based on device type.

```dart
class MasonryGridExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final columns = context.responsiveValue<int>(
      mobile: 1,
      tablet: 2,
      desktop: 3,
    );

    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: columns,
        mainAxisSpacing: 12,
        crossAxisSpacing: 12,
        childAspectRatio: context.isMobile ? 1.0 : 0.8,
      ),
      itemBuilder: (context, index) {
        final isLarge = index % 5 == 0;
        return Container(
          color: Colors.blue[100 * ((index % 9) + 1)],
          child: Center(
            child: Text('Item ${index + 1}'),
          ),
        );
      },
    );
  }
}
```

--------------------------------

### GridSpacingConfig Configuration

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/EXAMPLE_APP.md

Define spacing values for responsive layouts across all breakpoints.

```dart
GridSpacingConfig(
  ultraCompactSpacing: 4,
  compactSpacing: 8,
  standardSpacing: 12,
  largePhoneSpacing: 12,
  phabletSpacing: 12,
  smallTabletSpacing: 16,
  standardTabletSpacing: 16,
  largeTabletSpacing: 16,
  extraLargeTabletSpacing: 20,
  smallDesktopSpacing: 20,
  standardDesktopSpacing: 24,
  largeDesktopSpacing: 32,
  defaultSpacing: 12.0,
)
```

--------------------------------

### Create Adaptive Navigation

Source: https://github.com/shyamexe/universal_breakpoints/blob/main/docs/advanced-examples.md

Implement navigation patterns that change from BottomNavigationBar on mobile to NavigationRail on tablet and a sidebar on desktop.

```dart
class AdaptiveNavigation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    if (context.isMobile) {
      return BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        ],
      );
    } else if (context.isTablet) {
      return Row(
        children: [
          NavigationRail(
            destinations: const [
              NavigationRailDestination(icon: Icon(Icons.home), label: Text('Home')),
              NavigationRailDestination(icon: Icon(Icons.search), label: Text('Search')),
              NavigationRailDestination(icon: Icon(Icons.person), label: Text('Profile')),
            ],
          ),
          Expanded(child: Container()),
        ],
      );
    } else {
      return Row(
        children: [
          SizedBox(
            width: 250.sW,
            child: Column(
              children: [
                ListTile(leading: Icon(Icons.home), title: Text('Home')),
                ListTile(leading: Icon(Icons.search), title: Text('Search')),
                ListTile(leading: Icon(Icons.person), title: Text('Profile')),
              ],
            ),
          ),
          Expanded(child: Container()),
        ],
      );
    }
  }
}
```