### Install Sheet Package via Flutter CLI

Source: https://github.com/jamesblasco/modal_bottom_sheet/blob/main/sheet/README.md

Adds the Sheet package to your Flutter project using the Flutter command line interface. This command modifies the pubspec.yaml file to include the latest version of the sheet dependency. No additional configuration required after installation.

```shell
flutter pub add sheet
```

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

### Flutter GoRouter with Sheet Routes Example

Source: https://context7.com/jamesblasco/modal_bottom_sheet/llms.txt

This Dart code demonstrates the integration of 'sheet' package's SheetRoute with 'go_router' in a Flutter application. It defines routes for a home page and two types of modal bottom sheets (Settings and Profile) using Material and Cupertino styles respectively. Navigation is handled via context.push().

```dart
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:sheet/route.dart';
import 'package:sheet/sheet.dart';

final goRouter = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      pageBuilder: (context, state) => MaterialExtendedPage<void>(
        child: HomePage(),
      ),
      routes: [
        GoRoute(
          path: 'settings',
          pageBuilder: (context, state) => SheetPage<void>(
            initialExtent: 0.9,
            stops: [0.5, 0.9],
            fit: SheetFit.expand,
            builder: (context) => SettingsSheet(),
          ),
        ),
        GoRoute(
          path: 'profile',
          pageBuilder: (context, state) => CupertinoSheetPage<void>(
            initialExtent: 0.7,
            draggable: true,
            builder: (context) => ProfileSheet(),
          ),
        ),
      ],
    ),
  ],
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: goRouter,
      title: 'Sheet with GoRouter',
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => context.push('/settings'),
              child: Text('Open Settings Sheet'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => context.push('/profile'),
              child: Text('Open Profile Sheet'),
            ),
          ],
        ),
      ),
    );
  }
}

class SettingsSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      child: ListView(
        padding: EdgeInsets.all(20),
        children: [
          Text('Settings', style: TextStyle(fontSize: 28)),
          SwitchListTile(
            title: Text('Notifications'),
            value: true,
            onChanged: (value) {},
          ),
          SwitchListTile(
            title: Text('Dark Mode'),
            value: false,
            onChanged: (value) {},
          ),
        ],
      ),
    );
  }
}

class ProfileSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: CupertinoColors.systemBackground,
      child: Center(child: Text('Profile Content')),
    );
  }
}

```

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

### Adding Bottom Sheet Widget in Dart

Source: https://github.com/jamesblasco/modal_bottom_sheet/blob/main/docs/sheet/install.mdx

This Dart code demonstrates how to integrate a Sheet widget into a Flutter Scaffold to create an overlaying bottom sheet. It uses the sheet package's Sheet widget, which handles user interactions and appears hidden by default. Note that it relies on Flutter's material design theming unless RawSheet is used to remove it; ensure the 'body' and 'MySheetContent' variables are defined appropriately.

```dart
Scaffold(
    body: Stack(
        children: [
            body,
            Sheet(
                child: MySheetContent()
            )
        ]
    )
)
```

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

### Flutter Persistent Bottom Sheet with Sheet Widget

Source: https://context7.com/jamesblasco/modal_bottom_sheet/llms.txt

Demonstrates a persistent bottom sheet using the Sheet widget from the 'sheet' package. This example allows for extensive customization of the bottom sheet's behavior, including its extent bounds, physics, and sizing. It also shows how to control the sheet programmatically using a SheetController for actions like expanding or collapsing.

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

class PersistentSheetExample extends StatefulWidget {
  @override
  State<PersistentSheetExample> createState() => _PersistentSheetExampleState();
}

class _PersistentSheetExampleState extends State<PersistentSheetExample> {
  final SheetController controller = SheetController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // Background content
          Container(
            color: Colors.blue[100],
            child: Center(child: Text('Background Content')),
          ),

          // Persistent bottom sheet
          Sheet(
            controller: controller,
            initialExtent: 200, // Starting height in pixels
            minExtent: 100, // Minimum drag height
            maxExtent: 500, // Maximum drag height
            minInteractionExtent: 20, // Small peek when minimized
            fit: SheetFit.loose, // Or SheetFit.expand
            resizable: false, // false = translate, true = resize
            backgroundColor: Colors.white,
            elevation: 8,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
            ),
            physics: BouncingSheetPhysics(
              parent: SnappingSheetPhysics(),
            ),
            child: ListView(
              padding: EdgeInsets.all(16),
              children: [
                Text('Persistent Sheet', style: TextStyle(fontSize: 24)),
                SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () => controller.jumpTo(500),
                  child: Text('Expand to Max'),
                ),
                ElevatedButton(
                  onPressed: () => controller.animateTo(
                    100,
                    duration: Duration(milliseconds: 300),
                    curve: Curves.easeOut,
                  ),
                  child: Text('Collapse to Min'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}
```

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

### Flutter Material Modal Bottom Sheet with Custom PageRoute

Source: https://context7.com/jamesblasco/modal_bottom_sheet/llms.txt

Implements a custom PageRoute for modal bottom sheets in Flutter, ensuring proper animation coordination. It integrates with the modal_bottom_sheet package to display modals with Material Design animations. This example shows setting up a MaterialApp with a custom route for the home page and displaying a modal using showMaterialModalBottomSheet.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: (settings) {
        if (settings.name == '/') {
          return MaterialWithModalsPageRoute(
            builder: (context) => HomePage(),
            settings: settings,
          );
        }
        return MaterialPageRoute(
          builder: (context) => NotFoundPage(),
          settings: settings,
        );
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          child: Text('Show Modal'),
          onPressed: () => showMaterialModalBottomSheet(
            context: context,
            expand: true,
            builder: (context) => Container(
              child: Center(child: Text('Modal with proper animations')),
            ),
          ),
        ),
      ),
    );
  }
}
```

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

### Create Basic Draggable Sheet Widget in Flutter

Source: https://github.com/jamesblasco/modal_bottom_sheet/blob/main/sheet/README.md

Implements a fundamental Sheet widget with an initial vertical extent of 200 logical pixels. The sheet contains a colored container as its child and can be dragged vertically by default. This example demonstrates the minimal required configuration for a functional sheet.

```dart
Sheet(
 initialExtent: 200,
 child: Container(color: Colors.blue[100]),
)
```

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

### Navigate with SheetRoute Modal

Source: https://github.com/jamesblasco/modal_bottom_sheet/blob/main/sheet/README.md

Presents a modal bottom sheet route using SheetRoute that slides over the current navigation stack. The builder callback constructs the sheet's content widget. This replaces traditional modal bottom sheet navigation with enhanced customization options.

```dart
SheetRoute<void>(
  builder: (BuildContext) => Container(),
)
```

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

### Use SheetPage with Navigator 2.0 API

Source: https://github.com/jamesblasco/modal_bottom_sheet/blob/main/sheet/README.md

Integrates SheetPage into Flutter's Navigator 2.0 declarative routing system. Shows how to conditionally display a sheet based on application state. The barrierColor parameter controls the scrim overlay appearance.

```dart
Navigator(
  pages: <Page<dynamic>>[
    MaterialPage<bool>(
      key: const ValueKey<String>('BooksListPage'),
      child: BooksListScreen(
        books: books,
        onTapped: _handleBookTapped,
      ),
    ),
    if (_selectedBook != null)
      SheetPage<void>(
          key: ValueKey<Book?>(_selectedBook),
          child: BookDetailsScreen(book_selectedBook!),
          barrierColor: Colors.black26,
      )
  ],
)
```

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

### Control Sheet Position Programmatically

Source: https://github.com/jamesblasco/modal_bottom_sheet/blob/main/sheet/README.md

Demonstrates creating a SheetController and attaching it to a Sheet widget for programmatic control. Shows methods for jumping to absolute and relative positions, plus animation capabilities. The controller enables external widgets to manipulate sheet position without user drag interaction.

```dart
SheetController controller = SheetController();

Sheet(
 controller: controller,
 initialExtent: 200,
child: Container(color: Colors.blue[100]),
)

controller.jumpTo(400); 
controller.relativeJumpTo(1); // Value between 0 and 1


controller.animateTo(400, ...); 
controller.relativeAnimateTo(1, ...); // Value between 0 and 1
```

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

### Displaying Modal Sheet Route with SheetRoute in Dart

Source: https://context7.com/jamesblasco/modal_bottom_sheet/llms.txt

Implements a modal bottom sheet as a route with customizable animations, snap points, physics, and dismissible barriers. Requires Flutter Material, sheet/route, and sheet packages; inputs are context, extents, stops, and builder for content; outputs a pushed route that returns selected data via Navigator.pop. Limitations involve experimental status of the package and fixed animation durations.

```Dart
import 'package:flutter/material.dart';
import 'package:sheet/route.dart';
import 'package:sheet/sheet.dart';

void showSheetRoute(BuildContext context) {
  Navigator.of(context).push(
    SheetRoute<String>(
      initialExtent: 1.0, // 0.0 to 1.0 (full height)
      stops: [0.4, 0.7, 1.0], // Snap points
      draggable: true,
      fit: SheetFit.expand,
      barrierColor: Colors.black54,
      barrierDismissible: true,
      barrierLabel: 'Dismiss',
      duration: Duration(milliseconds: 400),
      animationCurve: Curves.easeOutCubic,
      willPopThreshold: 0.8, // Threshold for WillPopScope
      physics: BouncingSheetPhysics(),
      builder: (context) {
        return Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
          ),
          child: Column(
            children: [
              // Drag handle
              Container(
                margin: EdgeInsets.symmetric(vertical: 12),
                height: 5,
                width: 40,
                decoration: BoxDecoration(
                  color: Colors.grey[300],
                  borderRadius: BorderRadius.circular(2.5),
                ),
              ),
              Expanded(
                child: ListView.builder(
                  itemCount: 30,
                  itemBuilder: (context, index) => ListTile(
                    leading: Icon(Icons.music_note),
                    title: Text('Song ${index + 1}'),
                    onTap: () => Navigator.pop(context, 'Song $index'),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    ),
  ).then((result) {
    if (result != null) {
      print('Selected: $result');
    }
  });
}
```

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

### Show Cupertino Sheet - Dart

Source: https://context7.com/jamesblasco/modal_bottom_sheet/llms.txt

Demonstrates how to display a Cupertino-styled modal sheet using CupertinoSheetRoute. It leverages Cupertino widgets for a native iOS appearance and includes basic navigation elements.

```dart
import 'package:flutter/cupertino.dart';
import 'package:sheet/route.dart';
import 'package:sheet/sheet.dart';

void showCupertinoSheet(BuildContext context) {
  Navigator.of(context).push(
    CupertinoSheetRoute<void>( 
      initialExtent: 0.8, 
      stops: [0.5, 0.8, 1.0],
      draggable: true,
      backgroundColor: CupertinoColors.systemBackground,
      barrierColor: CupertinoColors.systemGrey.withOpacity(0.5), 
      builder: (context) => CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Select Option'),
          trailing: CupertinoButton(
            padding: EdgeInsets.zero,
            child: Text('Done'),
            onPressed: () => Navigator.pop(context),
          ),
        ),
        child: SafeArea(
          child: ListView(
            children: [
              CupertinoListSection.insetGrouped(
                children: [
                  CupertinoListTile(
                    leading: Icon(CupertinoIcons.camera),
                    title: Text('Take Photo'),
                    trailing: CupertinoListTileChevron(),
                    onTap: () => Navigator.pop(context),
                  ),
                  CupertinoListTile(
                    leading: Icon(CupertinoIcons.photo),
                    title: Text('Choose from Library'),
                    trailing: CupertinoListTileChevron(),
                    onTap: () => Navigator.pop(context),
                  ),
                  CupertinoListTile(
                    leading: Icon(CupertinoIcons.doc),
                    title: Text('Choose File'),
                    trailing: CupertinoListTileChevron(),
                    onTap: () => Navigator.pop(context),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    ),
  );
}
```

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

### Building Custom Styled Sheet with Sheet.raw in Dart

Source: https://context7.com/jamesblasco/modal_bottom_sheet/llms.txt

Creates a bottom sheet widget without default Material Design styling, enabling complete customization of appearance through a decoration builder. Depends on Flutter Material and the sheet package; inputs include extents, fit, physics, and child widget; outputs a customizable Widget for integration into Flutter apps. Limitations include manual handling of drag handles and potential performance impacts from complex decorations.

```Dart
import 'package:flutter/material.dart';
import 'package:sheet/sheet.dart';

Widget buildCustomSheet() {
  return Sheet.raw(
    initialExtent: 300,
    minExtent: 150,
    maxExtent: 600,
    fit: SheetFit.loose,
    resizable: true,
    physics: ClampingSheetPhysics(),
    decorationBuilder: (context, child) {
      // Custom decoration wrapper
      return Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Colors.purple, Colors.blue],
          ),
          borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
          boxShadow: [
            BoxShadow(
              color: Colors.black26,
              blurRadius: 20,
              spreadRadius: 5,
            ),
          ],
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
          child: child,
        ),
      );
    },
    child: Column(
      children: [
        Container(
          height: 6,
          width: 40,
          margin: EdgeInsets.symmetric(vertical: 10),
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(0.5),
            borderRadius: BorderRadius.circular(3),
          ),
        ),
        Expanded(
          child: ListView(
            padding: EdgeInsets.all(20),
            children: [
              Text(
                'Custom Sheet',
                style: TextStyle(fontSize: 28, color: Colors.white),
              ),
              SizedBox(height: 20),
              Text(
                'Fully customized appearance',
                style: TextStyle(color: Colors.white70),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}
```

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

### Show Bar-Style Modal in Dart

Source: https://context7.com/jamesblasco/modal_bottom_sheet/llms.txt

Displays a bottom sheet with a drag handle bar at the top, mimicking social media apps. It uses the modal_bottom_sheet package for Flutter, requiring BuildContext. Inputs include customization options like colors and shape. Limitations include reliance on Flutter's widget tree for proper rendering.

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

Future<void> showBarBottomSheet(BuildContext context) async {
  await showBarModalBottomSheet(
    context: context,
    expand: true,
    backgroundColor: Colors.white,
    barrierColor: Colors.black87,
    elevation: 2.0,
    bounce: true,
    enableDrag: true,
    topControl: Container(
      height: 6,
      width: 40,
      decoration: BoxDecoration(
        color: Colors.grey[300],
        borderRadius: BorderRadius.circular(3),
      ),
    ),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(15)),
    ),
    builder: (context) => ListView.builder(
      controller: ModalScrollController.of(context),
      itemCount: 50,
      itemBuilder: (context, index) => ListTile(
        leading: Icon(Icons.photo),
        title: Text('Photo ${index + 1}'),
        onTap: () => Navigator.pop(context),
      ),
    ),
  );
}
```

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

### Enable Drag Interaction for Hidden Sheet

Source: https://github.com/jamesblasco/modal_bottom_sheet/blob/main/sheet/README.md

Configures a sheet with initialExtent of 0 to be initially hidden while still allowing user interaction. The minInteractionExtent defines a small draggable area at the bottom edge. This enables users to drag up a sheet that isn't visually present.

```dart
Sheet(
 initialExtent: 0,
 minInteractionExtent: 20,
 child: Container(color: Colors.blue[100]),
)
```

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

### Overlay Sheet Using Stack Layout in Flutter

Source: https://github.com/jamesblasco/modal_bottom_sheet/blob/main/sheet/README.md

Positions a Sheet widget above existing content using Flutter's Stack layout widget. This pattern enables overlaying the draggable sheet on top of the main application interface. The sheet remains interactive while preserving access to underlying widgets.

```dart
Stack(
 children: [
  body,   
  Sheet(
    initialExtent: 200,
    child: Container(color: Colors.blue[100]),
  ),
 ],
)
```

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

### Show Material Modal Bottom Sheet (Dart)

Source: https://github.com/jamesblasco/modal_bottom_sheet/blob/main/docs/sheet_route/install.mdx

Displays a Material Design modal bottom sheet. It takes a build context and a builder function which returns the widget to be displayed within the bottom sheet. Various parameters can control its behavior, such as expandability, dismissibility, and animation.

```dart
showMaterialModalBottomSheet(
  context: context,
  builder: (context) => Container(),
)
```

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

### Show Nested Cupertino Modals in Dart

Source: https://context7.com/jamesblasco/modal_bottom_sheet/llms.txt

Displays stacked Cupertino modal bottom sheets within a CupertinoScaffold for nested presentations. Utilizes the modal_bottom_sheet package in Flutter, requiring a CupertinoApp context. Inputs are builder functions for content. Limitations include iOS-specific styling and potential animation conflicts.

```dart
import 'package:flutter/cupertino.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoScaffold(
        topRadius: Radius.circular(12),
        transitionBackgroundColor: CupertinoColors.black,
        body: CupertinoPageScaffold(
          navigationBar: CupertinoNavigationBar(middle: Text('Home')),
          child: Center(
            child: CupertinoButton(
              child: Text('Show Modal'),
              onPressed: () => CupertinoScaffold.showCupertinoModalBottomSheet(
                context: context,
                expand: true,
                backgroundColor: CupertinoColors.systemBackground,
                builder: (context) => CupertinoPageScaffold(
                  navigationBar: CupertinoNavigationBar(
                    middle: Text('First Modal'),
                    trailing: CupertinoButton(
                      padding: EdgeInsets.zero,
                      child: Text('Next'),
                      onPressed: () => CupertinoScaffold.showCupertinoModalBottomSheet(
                        context: context,
                        expand: false,
                        builder: (context) => Container(
                          height: 300,
                          child: Center(child: Text('Second Modal')),
                        ),
                      ),
                    ),
                  ),
                  child: Center(child: Text('Stacked modal content')),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
```

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

### Programmatic Sheet Control - Dart

Source: https://context7.com/jamesblasco/modal_bottom_sheet/llms.txt

Illustrates how to use SheetController to programmatically control the position of a sheet. It demonstrates jumping to specific extents and animating between positions.

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

class ControlledSheetExample extends StatefulWidget {
  @override
  State<ControlledSheetExample> createState() => _ControlledSheetExampleState();
}

class _ControlledSheetExampleState extends State<ControlledSheetExample> {
  late final SheetController sheetController = SheetController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Controlled Sheet')),
      body: Column(
        children: [
          Expanded(
            child: Stack(
              children: [
                Container(color: Colors.grey[200]),
                Sheet(
                  controller: sheetController,
                  initialExtent: 100,
                  minExtent: 50,
                  maxExtent: 400,
                  child: Container(
                    color: Colors.white,
                    child: Center(child: Text('Sheet Content')),
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.all(16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: () => sheetController.jumpTo(400),
                  child: Text('Expand'),
                ),
                ElevatedButton(
                  onPressed: () => sheetController.animateTo(
                    200,
                    duration: Duration(milliseconds: 300),
                    curve: Curves.easeInOut,
                  ),
                  child: Text('Mid'),
                ),
                ElevatedButton(
                  onPressed: () => sheetController.animateTo(
                    50,
                    duration: Duration(milliseconds: 300),
                    curve: Curves.easeIn,
                  ),
                  child: Text('Collapse'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    sheetController.dispose();
    super.dispose();
  }
}
```

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

### Implement Synchronized Scroll Control in Dart

Source: https://context7.com/jamesblasco/modal_bottom_sheet/llms.txt

Provides a scroll controller for modal content to synchronize dragging and scrolling within a bottom sheet. Part of the modal_bottom_sheet Flutter package, requires BuildContext from a modal builder. Inputs include item count and builder functions. Limitations involve proper attachment to ModalScrollController for synchronization.

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

Widget buildScrollableModal(BuildContext context) {
  return showMaterialModalBottomSheet(
    context: context,
    expand: true,
    builder: (context) {
      // Retrieve the modal's scroll controller
      final scrollController = ModalScrollController.of(context);

      return ListView.builder(
        controller: scrollController, // Sync with modal drag
        itemCount: 100,
        itemBuilder: (context, index) {
          return ListTile(
            leading: CircleAvatar(child: Text('${index + 1}')),
            title: Text('Item ${index + 1}'),
            subtitle: Text('Scrollable content in modal'),
            onTap: () {
              // When at top, drag closes sheet
              // When scrolled, drag scrolls content
              print('Tapped item $index');
            },
          );
        },
      );
    },
  );
}
```

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

### Show Cupertino Modal Bottom Sheet in Flutter

Source: https://github.com/jamesblasco/modal_bottom_sheet/blob/main/modal_bottom_sheet/README.md

Presents a Cupertino-style modal bottom sheet, mimicking the iOS 13 modal navigation. Similar to the Material version, it requires a `context` and a `builder` function to define the content of the bottom sheet.

```dart
showCupertinoModalBottomSheet(
  context: context,
  builder: (context) => Container(),
)
```

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

### Create Resizable Sheet in Flutter

Source: https://github.com/jamesblasco/modal_bottom_sheet/blob/main/sheet/README.md

Enables dynamic height adjustment of the sheet's child by setting resizable to true. As the user drags, the child widget's height changes instead of the sheet translating vertically. The sheet only begins translating after reaching minimum height constraints.

```dart
Sheet(
 initialExtent: 200,
 resizable:true
 child: Container(color: Colors.blue[100]),
)
```

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

### Animate UI Elements with Sheet Controller

Source: https://github.com/jamesblasco/modal_bottom_sheet/blob/main/sheet/README.md

Utilizes the SheetController's animation property to synchronize external UI animations with sheet movement. The AnimatedBuilder rebuilds whenever the sheet's position changes. This creates cohesive visual effects where other widgets respond to sheet drag gestures.

```dart
AnimatedBuilder(
 animation: controller.animation,
 builder: (context, child) {
     return ...;
 }
);
```

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

### Animated Sheet on Creation with DefaultSheetController in Flutter

Source: https://context7.com/jamesblasco/modal_bottom_sheet/llms.txt

Animate modal sheet appearance and behavior on creation using 'DefaultSheetController'. This widget provides a 'SheetController' to descendant 'Sheet' widgets, enabling programmatic control over animations. It's useful for initial sheet transitions or dynamic UI updates. Requires 'package:flutter/material.dart' and 'package:sheet/sheet.dart'.

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

class AnimatedSheetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultSheetController(
      onCreated: (controller) {
        // Animate sheet on creation
        Future.delayed(Duration(milliseconds: 500), () {
          controller.animateTo(
            400,
            duration: Duration(milliseconds: 600),
            curve: Curves.easeOutBack,
          );
        });
      },
      child: Scaffold(
        body: Stack(
          children: [
            Container(color: Colors.blue[50]),
            Sheet(
              controller: DefaultSheetController.of(context),
              initialExtent: 100,
              minExtent: 50,
              maxExtent: 600,
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
                ),
                child: Center(
                  child: Text('Animated on load', style: TextStyle(fontSize: 20)),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

```

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

### Display iOS-Styled Modal Bottom Sheet in Flutter

Source: https://context7.com/jamesblasco/modal_bottom_sheet/llms.txt

Creates a modal bottom sheet with iOS 13+ Cupertino design. This function supports features like background blur, platform-specific animations including previous route scaling, and customizable shadow effects. It's ideal for applications aiming for a native iOS look and feel.

```dart
import 'package:flutter/cupertino.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';

Future<void> showCupertinoBottomSheet(BuildContext context) async {
  await showCupertinoModalBottomSheet(
    context: context,
    expand: false, // Fit content height
    backgroundColor: CupertinoColors.systemBackground,
    barrierColor: CupertinoColors.systemFill,
    topRadius: Radius.circular(12),
    bounce: true,
    enableDrag: true,
    duration: Duration(milliseconds: 350),
    previousRouteAnimationCurve: Curves.easeOut,
    animationCurve: Curves.easeInOut,
    shadow: BoxShadow(
      color: CupertinoColors.systemGrey.withOpacity(0.3),
      blurRadius: 10,
      spreadRadius: 5,
    ),
    builder: (context) => CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Settings'),
        trailing: CupertinoButton(
          padding: EdgeInsets.zero,
          child: Text('Done'),
          onPressed: () => Navigator.pop(context),
        ),
      ),
      child: SafeArea(
        child: ListView(
          shrinkWrap: true,
          controller: ModalScrollController.of(context), // Sync scrolling
          children: [
            CupertinoListTile(title: Text('Notifications')),
            CupertinoListTile(title: Text('Privacy')),
            CupertinoListTile(title: Text('Account')),
          ],
        ),
      ),
    ),
  );
}
```

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

### Animate Previous Route with CupertinoScaffold

Source: https://github.com/jamesblasco/modal_bottom_sheet/blob/main/modal_bottom_sheet/README.md

Provides an alternative method to animate the previous route by wrapping it within a `CupertinoScaffold`. This approach is useful when direct modification of the route class is not feasible. It suggests using `CupertinoScaffold.showCupertinoModalBottomSheet` for presenting the modal.

```dart
routes: <String, WidgetBuilder>{
  '/previous_route_where_you_push_modal': (BuildContext context) => CupertinoScaffold(body: Container()),
 }
```

```dart
CupertinoScaffold.showCupertinoModalBottomSheet(context:context, builder: (context) => Container())
```

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

### Sheet Content Sizing Modes (Loose vs. Expand) in Flutter

Source: https://context7.com/jamesblasco/modal_bottom_sheet/llms.txt

Control how modal sheet content determines its height using the 'SheetFit' enum. 'SheetFit.loose' allows content to define its own height, while 'SheetFit.expand' forces content to fill the available height, requiring flexible widgets like 'Expanded'. Dependencies include 'package:flutter/material.dart' and 'package:sheet/sheet.dart'.

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

// Example 1: Loose fit - content determines height
Widget buildLooseFitSheet() {
  return Sheet(
    initialExtent: 300,
    fit: SheetFit.loose, // Content can be any height up to maxExtent
    child: Column(
      mainAxisSize: MainAxisSize.min, // Shrink-wraps content
      children: [
        Text('Title', style: TextStyle(fontSize: 24)),
        SizedBox(height: 20),
        Text('This content determines the sheet height'),
        SizedBox(height: 20),
        ElevatedButton(onPressed: () {}, child: Text('Action')),
      ],
    ),
  );
}

// Example 2: Expand fit - forces content to full height
Widget buildExpandFitSheet() {
  return Sheet(
    initialExtent: 300,
    minExtent: 100,
    maxExtent: 500,
    fit: SheetFit.expand, // Content forced to full height
    child: Column(
      children: [
        Text('Title', style: TextStyle(fontSize: 24)),
        Expanded(
          // Must use Expanded/Flexible with expand fit
          child: ListView.builder(
            itemCount: 50,
            itemBuilder: (context, index) => ListTile(
              title: Text('Item $index'),
            ),
          ),
        ),
      ],
    ),
  );
}

```

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

### Custom Sheet Drag Physics Behavior in Flutter

Source: https://context7.com/jamesblasco/modal_bottom_sheet/llms.txt

Implement custom drag physics for modal sheets, controlling behaviors like bouncing, clamping, snapping, and drag restrictions. This uses various 'SheetPhysics' subclasses like 'BouncingSheetPhysics', 'ClampingSheetPhysics', 'SnappingSheetPhysics', and 'NeverDraggableSheetPhysics'. Dependencies include 'package:flutter/material.dart' and 'package:sheet/sheet.dart'.

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

// Example 1: Bouncing physics
Widget buildBouncingSheet() {
  return Sheet(
    initialExtent: 300,
    minExtent: 100,
    maxExtent: 500,
    physics: BouncingSheetPhysics(
      parent: AlwaysDraggableSheetPhysics(),
    ),
    child: Container(child: Text('Bounces at boundaries')),
  );
}

// Example 2: Clamping physics (no bounce)
Widget buildClampingSheet() {
  return Sheet(
    initialExtent: 300,
    minExtent: 100,
    maxExtent: 500,
    physics: ClampingSheetPhysics(),
    child: Container(child: Text('Stops hard at boundaries')),
  );
}

// Example 3: Snapping physics with stops
Widget buildSnappingSheet() {
  return Sheet(
    initialExtent: 300,
    minExtent: 100,
    maxExtent: 500,
    physics: SnappingSheetPhysics(
      stops: [100, 300, 500], // Snap points in pixels
      parent: BouncingSheetPhysics(),
    ),
    child: Container(child: Text('Snaps to defined stops')),
  );
}

// Example 4: Never draggable
Widget buildLockedSheet() {
  return Sheet(
    initialExtent: 300,
    physics: NeverDraggableSheetPhysics(),
    child: Container(child: Text('Cannot be dragged')),
  );
}

// Example 5: Always draggable (even with scrollable content)
Widget buildAlwaysDraggableSheet() {
  return Sheet(
    initialExtent: 300,
    minExtent: 100,
    maxExtent: 500,
    physics: AlwaysDraggableSheetPhysics(),
    child: ListView.builder(
      itemCount: 20,
      itemBuilder: (context, index) => ListTile(
        title: Text('Item $index'),
      ),
    ),
  );
}

```

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

### Force Sheet to Expand to Maximum Height

Source: https://github.com/jamesblasco/modal_bottom_sheet/blob/main/sheet/README.md

Overrides default sizing behavior by setting fit to SheetFit.expand. This forces the sheet's child to occupy all available vertical space rather than sizing to its intrinsic height. Useful when the child widget needs to fill the entire sheet area.

```dart
Sheet(
 initialExtent: 200,
 fit: SheetFit.expand,
 child: Container(color: Colors.blue[100]),
)
```

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

### Material Modal Bottom Sheet with Scroll View (Dart)

Source: https://github.com/jamesblasco/modal_bottom_sheet/blob/main/docs/sheet_route/install.mdx

Demonstrates how to integrate a modal bottom sheet with a scrollable widget. By assigning ModalScrollController.of(context) to the scroll controller of a SingleChildScrollView, the scroll behavior can be synchronized with the modal's drag gestures.

```dart
showMaterialModalBottomSheet(
  context: context,
  builder: (context) => SingleChildScrollView(
    controller: ModalScrollController.of(context),
    child: Container(),
  ),
);
```

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

### Display Material Design Modal Bottom Sheet in Flutter

Source: https://context7.com/jamesblasco/modal_bottom_sheet/llms.txt

Shows a modal bottom sheet with Material Design styling. It supports customization of elevation, shape, background color, and drag behavior. The function returns a Future that resolves with a value when the sheet is dismissed, allowing for data passing back to the caller.

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

Future<String?> showMaterialBottomSheet(BuildContext context) async {
  final result = await showMaterialModalBottomSheet<String>(
    context: context,
    expand: true, // Fill entire screen
    backgroundColor: Colors.white,
    elevation: 8.0,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
    ),
    bounce: true, // Enable bounce effect at top
    enableDrag: true, // Allow drag to close
    isDismissible: true, // Dismiss by tapping barrier
    barrierColor: Colors.black54,
    duration: Duration(milliseconds: 400),
    closeProgressThreshold: 0.6, // 60% drag closes sheet
    builder: (context) => Container(
      height: 500,
      padding: EdgeInsets.all(20),
      child: Column(
        children: [
          Text('Material Bottom Sheet', style: TextStyle(fontSize: 24)),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () => Navigator.pop(context, 'confirmed'),
            child: Text('Confirm'),
          ),
          ElevatedButton(
            onPressed: () => Navigator.pop(context),
            child: Text('Cancel'),
          ),
        ],
      ),
    ),
  );

  if (result == 'confirmed') {
    print('User confirmed action');
  }
  return result;
}
```

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

### Constrain Sheet Movement with Min/Max Extent

Source: https://github.com/jamesblasco/modal_bottom_sheet/blob/main/sheet/README.md

Defines the allowable vertical range for sheet dragging using minExtent and maxExtent properties. These constraints prevent the sheet from moving below minExtent or above maxExtent. Both values are specified in logical pixels relative to the bottom of the screen.

```dart
Sheet(
 initialExtent: 200,
 minExtent: 100,
 maxExtent: 400,
 child: Container(color: Colors.blue[100]),
)
```

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

### Replace MaterialPageRoute with MaterialWithModalsPageRoute

Source: https://github.com/jamesblasco/modal_bottom_sheet/blob/main/modal_bottom_sheet/README.md

Demonstrates how to replace `MaterialPageRoute` with `MaterialWithModalsPageRoute` when pushing new routes. This change is necessary to enable animations between routes of different types. The new route class maintains compatibility with `PageTransitionsBuilder` and `PageTransitionsTheme`.

```dart
Navigator.of(context).push(MaterialWithModalsPageRoute(builder: (context) => Container()));
```

```dart
onGenerateRoute: (settings) {
    // ...
    return MaterialWithModalsPageRoute(settings: settings, builder: (context) => Container());
},
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.