### Navigate to Example Directory

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/example/README.md

Use this command to change your current directory to the example folder of the project.

```bash
cd example
```

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

### Complete Example with Radius Resolver

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/UtilityClasses.md

A comprehensive example demonstrating the initialization of ScreenUtilPlus with the radius-based font size resolver for text scaling. This setup is useful for circular or square text containers.

```dart
ScreenUtilPlusInit(
  designSize: const Size(375, 812),
  fontSizeResolver: FontSizeResolvers.radius,  // Use radius-based scaling
  builder: (context, child) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          headlineSmall: TextStyle(fontSize: 24.sp),  // Scales using radius
        ),
      ),
      home: child,
    );
  },
  child: HomePage(),
)
```

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

### Get Project Dependencies

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/example/README.md

Run this command in the example directory to download the necessary packages for the Flutter project.

```bash
flutter pub get
```

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

### Complete Integration Example

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/UtilityClasses.md

This snippet shows the full setup for integrating flutter_screenutil_plus. It includes initialization with design size, scaling configurations, and usage within a MaterialApp. Use this for the main app entry point to enable responsive design across your application.

```dart
import 'package:flutter/material.dart';
import 'package:flutter_screenutil_plus/flutter_screenutil_plus.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilPlusInit(
      designSize: const Size(375, 812),
      minTextAdapt: true,
      fontSizeResolver: FontSizeResolvers.width,  // Standard width-based scaling
      rebuildFactor: RebuildFactors.size,  // Rebuild on size changes
      builder: (context, child) {
        return MaterialApp(
          title: 'Responsive App',
          // Apply responsive theme
          theme: ResponsiveTheme.fromTheme(ThemeData(
            primarySwatch: Colors.blue,
            textTheme: const TextTheme(
              displayLarge: TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.bold,
              ),
              titleLarge: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.w600,
              ),
              bodyLarge: TextStyle(fontSize: 16),
              bodyMedium: TextStyle(fontSize: 14),
              bodySmall: TextStyle(fontSize: 12),
            ),
          )),
          home: child,
        );
      },
      child: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Responsive Design')),
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.all(16.r),
          child: Column(
            children: [
              Text(
                'Font Size Scales with ${context.su.scaleText.toStringAsFixed(2)}x',
                style: Theme.of(context).textTheme.displayLarge,
              ),
              20.verticalSpace,
              Text(
                'Screen: ${context.su.screenWidth.toStringAsFixed(0)}x${context.su.screenHeight.toStringAsFixed(0)}',
                style: Theme.of(context).textTheme.bodyLarge,
              ),
              20.verticalSpace,
              if (context.isAtLeast(Breakpoint.md))
                Text(
                  'Tablet or larger - Show detailed view',
                  style: Theme.of(context).textTheme.titleLarge,
                ),
            ],
          ),
        ),
      ),
    );
  }
}

```

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

### Complete Example: ResponsiveTheme with ScreenUtilPlusInit

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/UtilityClasses.md

A complete example showing how to initialize ScreenUtilPlus and apply a responsive theme created with ResponsiveTheme.fromTheme to a MaterialApp. This ensures both screen utility scaling and text style scaling are active.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilPlusInit(
      designSize: const Size(375, 812),
      builder: (context, child) {
        return MaterialApp(
          theme: ResponsiveTheme.fromTheme(ThemeData(
            primarySwatch: Colors.blue,
            textTheme: const TextTheme(
              displayLarge: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
              titleLarge: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
              bodyLarge: TextStyle(fontSize: 16),
              bodySmall: TextStyle(fontSize: 12),
            ),
          )),
          home: child,
        );
      },
      child: HomePage(),
    );
  }
}
```

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

### Complete Responsive Layout Example

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/lib/src/utils/README_ADAPTIVE.md

Provides a full example of building a responsive UI using ResponsiveBuilder, which allows defining different widgets for extra-small (xs), medium (md), and large (lg) screen sizes. Includes imports for Flutter and screenutil_plus.

```dart
import 'package:flutter/material.dart';
import 'package:flutter_screenutil_plus/flutter_screenutil_plus.dart';

class ResponsiveExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ResponsiveBuilder(
      xs: (context) => _MobileLayout(),
      md: (context) => _TabletLayout(),
      lg: (context) => _DesktopLayout(),
    );
  }
}

class _MobileLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final padding = context.responsive().value(
      xs: 8.0,
      sm: 12.0,
    );
    
    return Container(
      padding: EdgeInsets.all(padding),
      child: Column(
        children: [
          Text('Mobile Layout', style: TextStyle(fontSize: 16.sp)),
          // ... mobile-specific UI
        ],
      ),
    );
  }
}

class _TabletLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.r),
      child: Row(
        children: [
          Expanded(child: Text('Tablet Layout', style: TextStyle(fontSize: 18.sp))),
          // ... tablet-specific UI
        ],
      ),
    );
  }
}

class _DesktopLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(24.r),
      child: Row(
        children: [
          Expanded(flex: 1, child: Text('Sidebar', style: TextStyle(fontSize: 16.sp))),
          Expanded(flex: 3, child: Text('Desktop Layout', style: TextStyle(fontSize: 20.sp))),
        ],
      ),
    );
  }
}
```

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

### Accessing Adaptive Padding

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/Breakpoints.md

Example of using the adaptive extension to get responsive padding values based on screen size.

```dart
final padding = context.adaptive().padding(xs: 8, md: 16);
```

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

### Example: Basic ResponsiveTheme Usage

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/UtilityClasses.md

Demonstrates how to create a responsive theme from a light theme and apply it to a MaterialApp.

```dart
final lightTheme = ThemeData.light();
final responsiveTheme = ResponsiveTheme.fromTheme(lightTheme);

MaterialApp(
  theme: responsiveTheme,
  home: HomePage(),
)
```

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

### AdaptiveContainer Example

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ResponsiveWidgets.md

Shows how to configure AdaptiveContainer with breakpoint-specific width and padding values.

```dart
AdaptiveContainer(
  width: {
    Breakpoint.xs: 100,
    Breakpoint.md: 200,
    Breakpoint.lg: 300,
  },
  padding: {
    Breakpoint.xs: EdgeInsets.all(8),
    Breakpoint.md: EdgeInsets.all(16),
    Breakpoint.lg: EdgeInsets.all(24),
  },
  child: Text('Adaptive Container'),
)
```

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

### Get Breakpoint Example

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/types.md

Demonstrates how to use the getBreakpoint method to determine the current breakpoint for a given width.

```dart
final breakpoint = Breakpoints.bootstrap.getBreakpoint(800);
// Returns Breakpoint.md (since 800 >= 768 and < 992)
```

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

### Run the Flutter Application

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/example/README.md

Execute this command to build and run the example application on a connected device or emulator.

```bash
flutter run
```

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

### Custom RebuildFactor Example

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/COMPLETION_SUMMARY.txt

Create a custom RebuildFactor to control when the UI rebuilds based on screen size changes. This example rebuilds only on orientation change.

```dart
RebuildFactor customRebuildFactor = (oldSize, newSize) {
  return oldSize.orientation != newSize.orientation;
};

ScreenUtilInit(
  // ...
  rebuildFactor: customRebuildFactor,
  // ...
)
```

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

### RPadding Usage Example

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ResponsiveWidgets.md

Demonstrates how to use the RPadding widget with standard EdgeInsets and the responsive REdgeInsets.

```dart
RPadding(
  padding: EdgeInsets.all(16),  // Scaled using .r
  child: Text('Padded Text'),
)

// Or using REdgeInsets directly
RPadding(
  padding: REdgeInsets.symmetric(horizontal: 16, vertical: 8),
  child: Text('Custom Padding'),
)
```

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

### Custom FontSizeResolver Example

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/COMPLETION_SUMMARY.txt

Create a custom FontSizeResolver to define your own logic for scaling font sizes. This example uses the screen height for scaling.

```dart
FontSizeResolver customResolver = (context, factor) {
  final height = MediaQuery.of(context).size.height;
  return height * factor;
};

ScreenUtilInit(
  // ...
  fontSizeResolver: customResolver,
  // ...
)
```

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

### Complete Responsive Widget Example

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/Extensions.md

Demonstrates the usage of various ScreenUtil Plus extensions like .w, .h, .r, .sp, .verticalSpace, and .withAutoLineHeight to create a responsive widget.

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

class ResponsiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300.w,
      height: 200.h,
      padding: EdgeInsets.all(16).r,
      margin: EdgeInsets.symmetric(horizontal: 8, vertical: 12).w,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(12).r,
      ),
      child: Column(
        children: [
          Text(
            'Responsive Text',
            style: TextStyle(
              fontSize: 20.sp,
              fontWeight: FontWeight.bold,
            ).withAutoLineHeight(),
          ),
          16.verticalSpace,
          Text(
            'Subtitle',
            style: TextStyle(fontSize: 14.sp).withLineHeight(1.5),
          ),
        ],
      ),
    );
  }
}
```

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

### Custom Rebuild Factor Example

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/UtilityClasses.md

Demonstrates how to define a custom rebuild factor with specific logic.

```APIDOC
## Custom Rebuild Factor

### Description
Allows defining a custom logic for when a widget should rebuild based on `MediaQueryData` changes.

### Example
```dart
ScreenUtilPlusInit(
  rebuildFactor: (old, new) {
    // Custom logic: rebuild if either dimension changes by at least 50dp
    final widthChange = (old.size.width - new.size.width).abs();
    final heightChange = (old.size.height - new.size.height).abs();
    return widthChange >= 50 || heightChange >= 50;
  },
  child: MyApp(),
)
```
```

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

### Complete Responsive Query Example

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/Breakpoints.md

Demonstrates a comprehensive usage of ResponsiveQuery to build a responsive widget. It shows how to access screen width, current breakpoint, and conditionally render widgets based on screen size.

```dart
class ResponsiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final query = ResponsiveQuery.of(context);
    
    return Container(
      width: query.width,
      child: Column(
        children: [
          Text(
            'Current Breakpoint: ${query.breakpoint}',
          ),
          if (query.isAtLeast(Breakpoint.md))
            Text('Tablet or larger'),
          if (query.isBetween(Breakpoint.sm, Breakpoint.lg))
            Text('Small to medium screens'),
          SizedBox(
            height: query.value(
              xs: 10.0,
              sm: 15.0,
              md: 20.0,
              lg: 30.0,
            ),
          ),
        ],
      ),
    );
  }
}
```

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

### Custom FontSizeResolver Example

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/types.md

Example of a custom FontSizeResolver that clamps font size growth on large screens. This is useful for controlling how font sizes scale relative to the screen size.

```dart
// Custom resolver that clamps font size growth on large screens
FontSizeResolver customResolver = (fontSize, instance) {
  final scaled = fontSize * instance.scaleText;
  return scaled.clamp(fontSize.toDouble(), fontSize * 1.5);
};

ScreenUtilPlusInit(
  fontSizeResolver: customResolver,
  child: MyApp(),
)
```

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

### Initialize ScreenUtilPlus and Set Up MaterialApp

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

This snippet demonstrates the basic setup for ScreenUtilPlus, including initializing it with a design size and configuring the MaterialApp. Ensure ScreenUtilPlusInit is placed at the root of your widget tree. The `minTextAdapt` property is enabled for text adaptation.

```dart
import 'package:flutter/material.dart';
import 'package:flutter_screenutil_plus/flutter_screenutil_plus.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilPlusInit(
      designSize: const Size(360, 690),
      minTextAdapt: true,
      builder: (context, child) {
        return MaterialApp(
          title: 'Flutter ScreenUtil Plus',
          theme: ResponsiveTheme.fromTheme(
            ThemeData(
              primarySwatch: Colors.blue,
              textTheme: TextTheme(
                headlineLarge: TextStyle(fontSize: 24),
                bodyLarge: TextStyle(fontSize: 16),
              ),
            ),
          ),
          home: child,
        );
      },
      child: const HomePage(),
    );
  }
}
```

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

### Initialize ScreenUtilPlus with Width Resolver

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/UtilityClasses.md

Example of initializing ScreenUtilPlus with the width-based font size resolver. This is the default behavior for responsive text scaling.

```dart
ScreenUtilPlusInit(
  fontSizeResolver: FontSizeResolvers.width,
  child: MyApp(),
)
```

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

### Using Context Extensions for Responsiveness

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/Breakpoints.md

Illustrates how to use context extensions for responsive layout decisions. This example shows conditional rendering of different layouts (Desktop, Tablet, Mobile) and applying adaptive padding.

```dart
class ResponsiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: context.adaptive().padding(
        xs: EdgeInsets.all(8),
        md: EdgeInsets.all(16),
      ),
      child: Column(
        children: [
          if (context.isAtLeast(Breakpoint.lg))
            DesktopLayout()
          else if (context.isAtLeast(Breakpoint.md))
            TabletLayout()
          else
            MobileLayout(),
        ],
      ),
    );
  }
}
```

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

### SimpleAdaptiveContainer Example Usage

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ResponsiveWidgets.md

Demonstrates how to use SimpleAdaptiveContainer to set specific widths and padding for different breakpoints (xs and md).

```dart
SimpleAdaptiveContainer(
  widthXs: 100,
  widthMd: 200,
  widthLg: 300,
  paddingXs: EdgeInsets.all(8),
  paddingMd: EdgeInsets.all(16),
  child: Text('Simple Adaptive'),
)
```

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

### Responsive Layout with ResponsiveBuilder

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

This example shows how to implement responsive layouts using `ResponsiveBuilder`. It defines different UI structures for mobile (xs), tablet (md), and desktop (lg) screen sizes. This widget is useful for adapting the layout based on screen width.

```dart
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter ScreenUtil Plus'),
      ),
      body: ResponsiveBuilder(
        xs: (context) => _MobileLayout(),
        md: (context) => _TabletLayout(),
        lg: (context) => _DesktopLayout(),
      ),
    );
  }
}

class _MobileLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleColumnLayout();
  }
}

class _TabletLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TwoColumnLayout();
  }
}

class _DesktopLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ThreeColumnLayout();
  }
}
```

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

### Using AdaptiveValues for Responsive Sizing

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/lib/src/utils/README_ADAPTIVE.md

Demonstrates how to get responsive width, font size, and padding based on predefined breakpoints (xs, md, lg) using AdaptiveValues. Ensure context is available.

```dart
final adaptive = AdaptiveValues.of(context);

// Get responsive width
final width = adaptive.width(
  xs: 50,
  md: 100,
  lg: 150,
);

// Get responsive font size
final fontSize = adaptive.fontSize(
  xs: 14,
  md: 16,
  lg: 18,
);

// Get responsive padding
final padding = adaptive.padding(
  xs: EdgeInsets.all(8),
  md: EdgeInsets.all(16),
  lg: EdgeInsets.all(24),
);
```

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

### Responsive Font Size

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Use the `.sp` extension to adapt font size responsively. Example: `16.sp`.

```dart
16.sp
```

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

### ResponsiveGrid Example Usage

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ResponsiveWidgets.md

Illustrates creating a responsive grid with two items. Each item's column span is defined for different breakpoints (xs, md, lg) to control its width on various screen sizes.

```dart
ResponsiveGrid(
  spacing: 16,
  runSpacing: 16,
  children: [
    ResponsiveGridItem(
      xs: 12,  // Full width on mobile
      md: 6,   // Half width on tablet
      lg: 4,   // One-third width on desktop
      child: Card(child: Text('Item 1')),
    ),
    ResponsiveGridItem(
      xs: 12,
      md: 6,
      lg: 4,
      child: Card(child: Text('Item 2')),
    ),
  ],
)
```

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

### ResponsiveBuilder Usage Example

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ResponsiveWidgets.md

Demonstrates how to use the ResponsiveBuilder widget to conditionally render different layouts (MobileLayout, TabletLayout, DesktopLayout) based on screen size. A fallback widget is provided for cases where no specific builder matches.

```dart
ResponsiveBuilder(
  xs: (context) => MobileLayout(),
  md: (context) => TabletLayout(),
  lg: (context) => DesktopLayout(),
  fallback: SizedBox.shrink(),
)
```

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

### RText Usage Example

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ResponsiveWidgets.md

Demonstrates how to use the RText widget with a TextStyle. The font size will be scaled using `.sp` and a default line height multiplier of 1.2 will be applied automatically.

```dart
RText(
  'Hello World',
  style: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.bold,
  ),
  // Results in: fontSize: 16.sp, height: 1.2 (automatically applied)
)
```

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

### Basic ScreenUtilPlusInit Usage

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ScreenUtilPlusInit.md

Demonstrates the fundamental setup of ScreenUtilPlusInit within a Flutter application's main widget. It requires a design size and a child widget, typically MaterialApp.

```dart
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilPlusInit(
      designSize: const Size(375, 812),
      child: MaterialApp(
        title: 'My App',
        home: HomePage(),
      ),
    );
  }
}
```

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

### Adapt to Screen Height

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Use the `.h` extension to adapt a value to the screen height. Example: `100.h`.

```dart
100.h
```

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

### Using Breakpoints in Flutter

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/lib/src/utils/README_ADAPTIVE.md

Demonstrates how to get the current breakpoint and check if the screen size meets certain breakpoint criteria. It also shows how to use ResponsiveBuilder for different layouts based on breakpoints.

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

// Get current breakpoint
final breakpoint = context.breakpoint;

// Check breakpoints
if (context.isAtLeast(Breakpoint.md)) {
  // Tablet and larger
}

if (context.isLessThan(Breakpoint.lg)) {
  // Smaller than desktop
}

// Use ResponsiveBuilder for different layouts
ResponsiveBuilder(
  xs: (context) => MobileLayout(),
  md: (context) => TabletLayout(),
  lg: (context) => DesktopLayout(),
)
```

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

### Get Responsive Query Instance

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/Breakpoints.md

Obtain a ResponsiveQuery instance from the BuildContext to query responsive design properties. This is useful for determining layout values based on screen size.

```dart
final columns = context.responsive().value(xs: 1, md: 2, lg: 3);
```

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

### Screen Height Value

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Use the `.sh` extension to get the screen height value. Example: `1.sh`.

```dart
1.sh
```

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

### Get ScreenUtilPlus Instance from BuildContext

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/Extensions.md

Provides a shorter alias to access the singleton ScreenUtilPlus instance. Use this to access responsive utilities like screenWidth and setWidth.

```dart
extension ScreenUtilContextExtension on BuildContext {
  MediaQueryData? get mediaQueryData;
  ScreenUtilPlus get su;
}
```

```dart
ScreenUtilPlus get su => ScreenUtilPlus.of(this)
```

```dart
final width = context.su.screenWidth;
final scaled = context.su.setWidth(100);
```

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

### Screen Width Value

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Use the `.sw` extension to get the screen width value. Example: `1.sw`.

```dart
1.sw
```

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

### RSizedBox Usage Examples

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ResponsiveWidgets.md

Demonstrates how to use different constructors of RSizedBox for creating responsive rectangular, vertical, horizontal, and square sized boxes with child widgets.

```dart
// Rectangular
RSizedBox(width: 200, height: 100, child: child)

// Vertical spacing
RSizedBox.vertical(16, child: child)

// Horizontal spacing
RSizedBox.horizontal(8, child: child)

// Square
RSizedBox.square(dimension: 100, child: child)
```

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

### Custom RebuildFactor Example

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/types.md

Example of a custom RebuildFactor that only rebuilds on size changes, ignoring orientation. This helps optimize rebuilds by only triggering them when necessary.

```dart
// Custom rebuild factor: only rebuild on size changes, ignore orientation
RebuildFactor customFactor = (old, new) {
  return old.size != new.size;
};

ScreenUtilPlusInit(
  rebuildFactor: customFactor,
  child: MyApp(),
)
```

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

### init

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ScreenUtilPlus.md

Initialize the library from a BuildContext with design parameters. This is the primary method for setting up ScreenUtilPlus for your application.

```APIDOC
## init()

### Description
Initialize the library from a BuildContext with design parameters. This is the primary method for setting up ScreenUtilPlus for your application.

### Method Signature
```dart
static void init(
  BuildContext context,
  {
  Size designSize = defaultSize,
  bool splitScreenMode = false,
  bool minTextAdapt = false,
  FontSizeResolver? fontSizeResolver,
}
)
```

### Parameters
#### Required Parameters
- **context** (`BuildContext`) - The context to extract MediaQueryData from.

#### Optional Parameters
- **designSize** (`Size`) - Design canvas size in dp. Defaults to `Size(360, 690)`.
- **splitScreenMode** (`bool`) - Enable split-screen mode scaling. Defaults to `false`.
- **minTextAdapt** (`bool`) - Use minimum of width/height scales for text. Defaults to `false`.
- **fontSizeResolver** (`FontSizeResolver?`) - Custom font size resolution strategy. Defaults to `null`.

### Example
```dart
@override
void build(BuildContext context) {
  ScreenUtilPlus.init(context, designSize: const Size(360, 690));
  return MyApp();
}
```
```

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

### Apply Responsive Padding

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/Breakpoints.md

Use AdaptiveValues to apply padding that changes based on the screen's breakpoint. This example demonstrates setting different padding for extra-small, small, medium, and large screens.

```dart
final adaptive = AdaptiveValues.of(context);
return Padding(
  padding: adaptive.padding(
    xs: EdgeInsets.all(8),
    sm: EdgeInsets.all(12),
    md: EdgeInsets.all(16),
    lg: EdgeInsets.all(24),
  ),
  child: child,
);
```

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

### ScreenUtilPlus Initialization and Configuration

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ScreenUtilPlus.md

Provides static methods for initializing and configuring ScreenUtilPlus, essential for setting up responsive design based on a design size and other adaptive parameters.

```APIDOC
## ScreenUtilPlus Initialization and Configuration

### Description
Static methods to initialize and configure the ScreenUtilPlus utility for responsive design.

### Methods

- **`ScreenUtilPlus.init(BuildContext context, {Size designSize = defaultSize, bool splitScreenMode = false, bool minTextAdapt = false, FontSizeResolver? fontSizeResolver})`**
  Initializes ScreenUtilPlus with the given context, design size, and other configuration options.

- **`ScreenUtilPlus.ensureScreenSizeAndInit(BuildContext context, {Size designSize = defaultSize, bool splitScreenMode = false, bool minTextAdapt = false, FontSizeResolver? fontSizeResolver})`**
  Ensures the screen size is ready and then initializes ScreenUtilPlus. Useful for scenarios where screen size might not be immediately available.

- **`ScreenUtilPlus.configure({MediaQueryData? data, Size designSize = defaultSize, bool? splitScreenMode, bool? minTextAdapt, FontSizeResolver? fontSizeResolver})`**
  Configures ScreenUtilPlus with specific `MediaQueryData`, design size, and adaptive settings. This can be used to override default configurations.

- **`ScreenUtilPlus.enableScale({bool Function()? enableWH, bool Function()? enableText})`**
  Enables or disables scaling for width, height, and text based on provided boolean functions.

- **`ScreenUtilPlus.ensureScreenSize([ui.FlutterView? window, Duration duration = const Duration(milliseconds: 10)])`**
  Asynchronously ensures that the screen size information is available before proceeding. It can optionally take a `ui.FlutterView` and a duration for the check.

### Parameters

- **`context`** (BuildContext) - Required - The build context to access screen information.
- **`designSize`** (Size) - Optional - The reference design screen size (default: `defaultSize`).
- **`splitScreenMode`** (bool) - Optional - Enables split-screen mode adaptation (default: `false`).
- **`minTextAdapt`** (bool) - Optional - Enables minimum text adaptation (default: `false`).
- **`fontSizeResolver`** (FontSizeResolver?) - Optional - A custom function to resolve font sizes.
- **`window`** (ui.FlutterView?) - Optional - The Flutter view to use for screen size detection.
- **`duration`** (Duration) - Optional - The duration to wait for screen size availability (default: 10 milliseconds).
```

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

### Get MediaQueryData

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Access MediaQueryData using `context.mediaQueryData`.

```dart
context.mediaQueryData
```

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

### Get ResponsiveQuery

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Retrieve ResponsiveQuery using `context.responsive()`.

```dart
context.responsive()
```

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

### Get AdaptiveValues

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Retrieve AdaptiveValues using `context.adaptive()`.

```dart
context.adaptive()
```

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

### ScreenUtilPlusInit with Custom Options

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ScreenUtilPlusInit.md

Illustrates advanced configuration of ScreenUtilPlusInit using various options like minTextAdapt, splitScreenMode, rebuildFactor, fontSizeResolver, and enableScaleWH for fine-tuned responsiveness.

```dart
ScreenUtilPlusInit(
  designSize: const Size(375, 812),
  minTextAdapt: true,  // Text scales based on min(width, height)
  splitScreenMode: true,  // Support split-screen mode
  rebuildFactor: RebuildFactors.orientation,  // Only rebuild on orientation change
  fontSizeResolver: FontSizeResolvers.radius,  // Use radius-based font scaling
  enableScaleWH: () => !isTabletMode,  // Conditionally disable WH scaling
  builder: (context, child) {
    return MaterialApp(home: child);
  },
  child: HomePage(),
)
```

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

### Get Size Classes

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Access the size classes using `context.sizeClasses`.

```dart
context.sizeClasses
```

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

### Initialize ScreenUtilPlus

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Wrap your root widget with ScreenUtilPlusInit and configure design size, minimum text adaptation, and split screen mode.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilPlusInit(
      designSize: const Size(360, 690),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (context, child) {
        return MaterialApp(
          title: 'Flutter ScreenUtil Plus',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: child,
        );
      },
      child: const HomePage(),
    );
  }
}
```

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

### ScreenUtilPlusInit Widget

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/COMPLETION_SUMMARY.txt

Documentation for the ScreenUtilPlusInit StatefulWidget, used for initializing the ScreenUtilPlus package within the widget tree.

```APIDOC
## ScreenUtilPlusInit Widget

### Description
A StatefulWidget that integrates ScreenUtilPlus initialization into the Flutter widget tree, allowing for lifecycle management and scope integration.

### Constructor Parameters
- 11 constructor parameters available for customization, including builder, design size, and split screen support.

### Lifecycle and Observation
- Manages the lifecycle of ScreenUtilPlus initialization.
- Observes screen size changes for automatic updates.

### Builder Pattern
- Utilizes a builder pattern to provide access to ScreenUtilUtil instance within its scope.

### Usage Examples
- 5 complete integration examples demonstrating various use cases.
```

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

### Get ScreenUtilPlus Instance

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Access the ScreenUtilPlus instance via `context.su`.

```dart
context.su
```

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

### AdaptiveValues

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/Breakpoints.md

Convenience utilities for getting responsive values based on breakpoints.

```APIDOC
## AdaptiveValues

Convenience utilities for getting responsive values based on breakpoints.

### Class Definition

```dart
class AdaptiveValues {
  factory AdaptiveValues.of(BuildContext context, {Breakpoints? breakpoints});
  
  final BuildContext context;
  final Breakpoints breakpoints;
  
  double width({num? xs, num? sm, num? md, num? lg, num? xl, num? xxl});
  double height({num? xs, num? sm, num? md, num? lg, num? xl, num? xxl});
  double fontSize({num? xs, num? sm, num? md, num? lg, num? xl, num? xxl});
  double radius({num? xs, num? sm, num? md, num? lg, num? xl, num? xxl});
  EdgeInsets padding({EdgeInsets? xs, EdgeInsets? sm, EdgeInsets? md, EdgeInsets? lg, EdgeInsets? xl, EdgeInsets? xxl});
  EdgeInsets margin({EdgeInsets? xs, EdgeInsets? sm, EdgeInsets? md, EdgeInsets? lg, EdgeInsets? xl, EdgeInsets? xxl});
}
```

### Static Methods

#### of()

```dart
factory AdaptiveValues.of(BuildContext context, {Breakpoints? breakpoints})
```

Creates an AdaptiveValues instance for the given context.

**Example:**

```dart
final adaptive = AdaptiveValues.of(context);
final padding = adaptive.padding(xs: EdgeInsets.all(8), md: EdgeInsets.all(16));
```

### Methods

#### width()

```dart
double width({num? xs, num? sm, num? md, num? lg, num? xl, num? xxl})
```

Gets responsive width value based on breakpoint.

#### height()

Gets responsive height value based on breakpoint.

#### fontSize()

Gets responsive font size value based on breakpoint.

#### radius()

Gets responsive radius value based on breakpoint.

#### padding()

Gets responsive padding value based on breakpoint.

#### margin()

Gets responsive margin value based on breakpoint.

**Example:**

```dart
final adaptive = AdaptiveValues.of(context);
return Padding(
  padding: adaptive.padding(
    xs: EdgeInsets.all(8),
    sm: EdgeInsets.all(12),
    md: EdgeInsets.all(16),
    lg: EdgeInsets.all(24),
  ),
  child: child,
);
```
```

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

### ResponsiveQuery.of()

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/Breakpoints.md

Creates a ResponsiveQuery instance for the given context. This is the primary way to access responsive utilities.

```APIDOC
## ResponsiveQuery.of()

### Description
Creates a ResponsiveQuery instance for the given context. This is the primary way to access responsive utilities.

### Method
factory

### Signature
factory ResponsiveQuery.of(BuildContext context, {Breakpoints? breakpoints})

### Parameters
#### Path Parameters
- **context** (BuildContext) - required - The build context
- **breakpoints** (Breakpoints?) - optional - Custom breakpoints. Uses Bootstrap if null.

### Example
```dart
final query = ResponsiveQuery.of(context);
if (query.isAtLeast(Breakpoint.md)) {
  // Tablet or larger
}
```
```

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

### Use Responsive Extensions

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/REFERENCE.md

Utilize the .w, .h, .sp, and .r extensions for responsive width, height, font size, and radius respectively. Ensure ScreenUtilPlusInit is above the widgets using these extensions.

```dart
Container(
  width: 100.w,      // Responsive width
  height: 50.h,      // Responsive height
  padding: EdgeInsets.all(16).r,  // Responsive padding
  child: Text(
    'Hello',
    style: TextStyle(fontSize: 16.sp),  // Responsive font
  ),
)
```

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

### Get Screen Height

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ScreenUtilPlus.md

Returns the current screen height in logical pixels.

```dart
double get screenHeight
```

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

### Get Screen Width

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ScreenUtilPlus.md

Returns the current screen width in logical pixels.

```dart
double get screenWidth
```

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

### Get Screen Orientation

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ScreenUtilPlus.md

Retrieves the current screen orientation (portrait or landscape).

```dart
Orientation get orientation
```

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

### ResponsiveQuery for Values

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Use ResponsiveQuery to get values that adapt based on the current breakpoint.

```dart
final query = ResponsiveQuery.of(context);

// Get value based on current breakpoint
final padding = query.value(
  xs: 8.0,
  sm: 12.0,
  md: 16.0,
  lg: 24.0,
);
```

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

### Get Pixel Ratio

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ScreenUtilPlus.md

Retrieves the device pixel ratio from MediaQuery. This value can be null.

```dart
double? get pixelRatio
```

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

### ensureScreenSizeAndInit

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ScreenUtilPlus.md

Waits for screen size initialization, then initializes ScreenUtilPlus. This method combines the functionality of ensureScreenSize and init for convenience.

```APIDOC
## ensureScreenSizeAndInit()

### Description
Waits for screen size initialization, then initializes ScreenUtilPlus. This method combines the functionality of ensureScreenSize and init for convenience.

### Method Signature
```dart
static Future<void> ensureScreenSizeAndInit(
  BuildContext context,
  {
  Size designSize = defaultSize,
  bool splitScreenMode = false,
  bool minTextAdapt = false,
  FontSizeResolver? fontSizeResolver,
}
)
```

### Parameters
#### Required Parameters
- **context** (`BuildContext`) - The context to extract MediaQueryData from.

#### Optional Parameters
- **designSize** (`Size`) - Design canvas size in dp. Defaults to `Size(360, 690)`.
- **splitScreenMode** (`bool`) - Enable split-screen mode scaling. Defaults to `false`.
- **minTextAdapt** (`bool`) - Use minimum of width/height scales for text. Defaults to `false`.
- **fontSizeResolver** (`FontSizeResolver?`) - Custom font size resolution strategy. Defaults to `null`.

### Example
```dart
FutureBuilder(
  future: ScreenUtilPlus.ensureScreenSizeAndInit(
    context,
    designSize: const Size(375, 812),
  ),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return HomePage();
    }
    return const Scaffold(body: SizedBox.shrink());
  },
)
```
```

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

### ScreenUtilPlus Core Singleton

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/COMPLETION_SUMMARY.txt

Documentation for the core ScreenUtilPlus singleton class, including initialization, scaling methods, device type detection, and spacing helpers.

```APIDOC
## ScreenUtilPlus Singleton

### Description
The core singleton class for flutter_screenutil_plus, providing static methods for initialization and various utility functions for responsive UI design.

### Static Initialization
- **init()**: Initializes ScreenUtilPlus.
- **configure()**: Configures ScreenUtilPlus with custom settings.
- **ensureScreenSize()**: Ensures the screen size is correctly detected.

### Scaling Methods
- **setWidth(double width)**: Sets the width for scaling.
- **setHeight(double height)**: Sets the height for scaling.
- **radius(double radius)**: Scales a radius value.
- **diameter(double diameter)**: Scales a diameter value.
- **diagonal(double diagonal)**: Scales a diagonal value.
- **setSp(double fontSize)**: Scales a font size value.

### Device Type Detection
- Methods to detect and utilize device types for responsive layouts.

### Spacing Helpers
- Provides 9 variants of spacing helper methods for consistent UI spacing.

### Properties
- 15+ documented properties related to screen dimensions and scaling factors.
```

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

### Get Current Breakpoint

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Retrieve the current breakpoint (e.g., xs, sm, md) from the context.

```dart
// Get current breakpoint
final breakpoint = context.breakpoint; // xs, sm, md, lg, xl, xxl
```

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

### Using Size Classes with ScreenUtilPlus

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/Breakpoints.md

Demonstrates accessing size classes through ScreenUtilPlus and using ResponsiveQuery to select layouts based on size classes. This is useful for defining distinct UI structures for compact, regular, and expanded screen sizes.

```dart
class ResponsiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final sizeClasses = context.su.metrics; // Through ScreenUtilPlus
    
    return ResponsiveQuery.of(context).valueBySizeClass(
      compact: SingleColumnLayout(),
      regular: MultiColumnLayout(),
    );
  }
}
```

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

### Create Scaled BorderRadius

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Use `context.borderRadius(all: value)` to create scaled BorderRadius. Example: `context.borderRadius(all: 12)`.

```dart
context.borderRadius(all: 12)
```

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

### Create Scaled EdgeInsets

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Use `context.edgeInsets(all: value)` to create scaled EdgeInsets. Example: `context.edgeInsets(all: 16)`.

```dart
context.edgeInsets(all: 16)
```

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

### Use Context-Aware Responsive Extensions

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Utilize context-aware extensions (e.g., context.w, context.h, context.sp) for responsive UI adjustments, recommended for better performance with autoRebuild: false.

```dart
Container(
  width: context.w(100),   // Context-aware width
  height: context.h(50),   // Context-aware height
  padding: context.edgeInsets(all: 16), // Context-aware padding
  child: Text(
    'Hello World',
    style: TextStyle(fontSize: context.sp(16)), // Context-aware font
  ),
)
```

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

### Create Horizontal Spacing

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Use `context.horizontalSpace(value)` to create horizontal spacing. Example: `context.horizontalSpace(20)`.

```dart
context.horizontalSpace(20)
```

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

### Create Vertical Spacing

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Use `context.verticalSpace(value)` to create vertical spacing. Example: `context.verticalSpace(20)`.

```dart
context.verticalSpace(20)
```

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

### Migration to Context-Aware Extensions

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Illustrates the migration from the old extension syntax (e.g., `100.w`) to the new context-aware extension syntax (e.g., `context.w(100)`). The new syntax is more performant when `autoRebuild` is `false`.

```dart
// ❌ Old way (still works, but rebuilds entire tree)
Container(width: 100.w, height: 50.h)

// ✅ New way (efficient with autoRebuild: false)
Container(width: context.w(100), height: context.h(50))
```

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

### Maximum Font Size

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Use the `.spMax` extension to set a maximum font size. Example: `16.spMax`.

```dart
16.spMax
```

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

### Minimum Font Size

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Use the `.spMin` extension to set a minimum font size. Example: `12.spMin`.

```dart
12.spMin
```

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

### configure

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ScreenUtilPlus.md

Manually configure the ScreenUtilPlus instance with screen metrics and design parameters. This method allows for fine-grained control over the library's behavior.

```APIDOC
## configure()

### Description
Manually configure the ScreenUtilPlus instance with screen metrics and design parameters. This method allows for fine-grained control over the library's behavior.

### Method Signature
```dart
static void configure({
  MediaQueryData? data,
  Size designSize = defaultSize,
  bool? splitScreenMode,
  bool? minTextAdapt,
  FontSizeResolver? fontSizeResolver,
})
```

### Parameters
#### Optional Parameters
- **data** (`MediaQueryData?`) - Device screen information. If null, uses previously set data.
- **designSize** (`Size`) - The design canvas size in dp that the UI was designed for. Defaults to `Size(360, 690)`.
- **splitScreenMode** (`bool?`) - When true, uses `max(screenHeight, 700)` for height calculations. Keeps current value if null.
- **minTextAdapt** (`bool?`) - When true, uses minimum of width/height scale for text. Keeps current value if null.
- **fontSizeResolver** (`FontSizeResolver?`) - Custom function to resolve font sizes. Keeps current resolver if null.

### Example
```dart
ScreenUtilPlus.configure(
  data: MediaQuery.of(context),
  designSize: const Size(375, 812),
  minTextAdapt: true,
);
```
```

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

### Mobile-First Design Configuration

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/configuration.md

Configure ScreenUtil Plus for a mobile-first approach using a typical mobile screen size. `minTextAdapt` ensures text scales down, and `rebuildFactor` can be set to `size` for responsive UI.

```dart
ScreenUtilPlusInit(
  designSize: const Size(375, 812),  // iPhone 11 Pro
  minTextAdapt: true,
  rebuildFactor: RebuildFactors.size,
  fontSizeResolver: FontSizeResolvers.width,
  builder: (context, child) {
    return MaterialApp(
      theme: ResponsiveTheme.fromTheme(ThemeData.light()),
      home: child,
    );
  },
  child: HomePage(),
)
```

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

### Context-Aware Extensions for autoRebuild: false

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

When `autoRebuild` is set to `false`, use these context-aware extensions for efficient scaling of dimensions, font sizes, and other responsive values. Access the ScreenUtilPlus instance via `context.su`.

```dart
// ✅ Recommended with autoRebuild: false
context.w(100)          // Scale width
context.h(50)           // Scale height
context.r(20)           // Scale radius
context.sp(16)          // Scale font size
context.spMin(12)       // Scale font with minimum
context.dg(100)         // Scale diagonal
context.dm(100)         // Scale diameter

// Spacing helpers
context.verticalSpace(20)      // Vertical spacing
context.horizontalSpace(20)    // Horizontal spacing

// Complex values
context.edgeInsets(all: 16)    // Scaled EdgeInsets
context.edgeInsets(             // Custom EdgeInsets
  horizontal: 16,
  vertical: 8,
)
context.borderRadius(all: 12)  // Scaled BorderRadius

// Access ScreenUtilPlus instance
final su = context.su;         // Get ScreenUtilPlus instance
```

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

### Adapt to Screen Width

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Use the `.w` extension to adapt a value to the screen width. Example: `100.w`.

```dart
100.w
```

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

### AdaptiveValues for Sizing and Fonts

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Utilize AdaptiveValues to get responsive widths, font sizes, and other adaptive values.

```dart
final adaptive = AdaptiveValues.of(context);
final width = adaptive.width(xs: 50, sm: 100, md: 150, lg: 200);
final fontSize = adaptive.fontSize(xs: 12, sm: 14, md: 16, lg: 18);
```

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

### API Documentation Coverage - Configuration Options

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/INDEX.md

This entry details the number of documented configuration options and their specific names for the flutter_screenutil_plus library.

```markdown
| Category | Count | Files |
|----------|-------|-------|
| Configuration Options | 11 | designSize, minTextAdapt, splitScreenMode, rebuildFactor, fontSizeResolver, autoRebuild, builder, child, enableScaleWH, enableScaleText, ensureScreenSize |
```

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

### Scale Diagonal with Context

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Use `context.dg(value)` to scale a value based on the diagonal. Example: `context.dg(100)`.

```dart
context.dg(100)
```

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

### Get Text Scale Factor

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ScreenUtilPlus.md

Returns the number of font pixels per logical pixel, as determined by MediaQuery.

```dart
double get textScaleFactor
```

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

### File Structure Overview

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/INDEX.md

This snippet outlines the directory structure of the generated documentation for the flutter_screenutil_plus project. It indicates the purpose of each markdown file.

```markdown
output/
├── README.md                    # Start here - navigation guide
├── INDEX.md                     # This file
├── REFERENCE.md                 # Quick technical reference and patterns
├── types.md                     # Type definitions, enums, and aliases
├── configuration.md             # Setup options and configuration reference
└── api-reference/
    ├── ScreenUtilPlus.md        # Core singleton class (500+ lines)
    ├── ScreenUtilPlusInit.md    # Initialization widget (250+ lines)
    ├── Extensions.md            # All extension methods (400+ lines)
    ├── ResponsiveWidgets.md     # Widget library (600+ lines)
    ├── Breakpoints.md           # Breakpoint system and responsive queries (400+ lines)
    └── UtilityClasses.md        # Theme, font resolvers, rebuild factors (300+ lines)
```

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

### Adapt Based on Diagonal

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Use the `.dg` extension to adapt a value based on the screen's diagonal. Example: `100.dg`.

```dart
100.dg
```

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

### Initialize ScreenUtilPlus with Context

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/_autodocs/api-reference/ScreenUtilPlus.md

Initialize the ScreenUtilPlus library using a BuildContext. This method extracts MediaQueryData and applies design parameters like design size, split screen mode, text adaptation, and font size resolver.

```dart
static void init(
  BuildContext context,
  {
  Size designSize = defaultSize,
  bool splitScreenMode = false,
  bool minTextAdapt = false,
  FontSizeResolver? fontSizeResolver,
}
```

```dart
@override
void build(BuildContext context) {
  ScreenUtilPlus.init(context, designSize: const Size(360, 690));
  return MyApp();
}
```

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

### Adapt to Larger Dimension

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Use the `.dm` extension to adapt a value to the larger of the screen width or height. Example: `100.dm`.

```dart
100.dm
```

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

### Adapt to Smaller Dimension

Source: https://github.com/muhammadkamel/flutter_screenutil_plus/blob/master/README.md

Use the `.r` extension to adapt a value to the smaller of the screen width or height. Example: `100.r`.

```dart
100.r
```