modal_bottom_sheet

The modal_bottom_sheet package is inspired by Flutter's built-in showModalBottomSheet but provides several critical features missing from the standard implementation:

• Scrollview Integration: Supports dragging down to close when the sheet is inside a ScrollView (standard showModalBottomSheet often fails in these scenarios).
• Pop Control: Supports WillPopScope to allow developers to prevent the dialog from closing unexpectedly.
• iOS Enhancements: Includes support for 'scroll to top' when tapping the status bar on iOS.
• Cupertino Support: Provides a native-feeling Cupertino modal bottom sheet.
• Customization: Enables the creation of highly custom modal bottom sheets.

You can implement navigation within a modal bottom sheet using the following patterns:

1. Stacking Sheets: Call showCupertinoModalBottomSheet again to push a new modal bottom sheet on top of the current one.
2. Internal Navigation: Add a new Navigator or CupertinoTabScaffold inside the builder of the bottom sheet to allow navigation within the sheet itself.
3. Preventing Closure: Use Flutter's WillPopScope inside the sheet to intercept back gestures and prevent the modal from closing unexpectedly.

You can navigate within a modal bottom sheet using these patterns:

• Stacking Modals: To push a new modal on top of the current one, simply call showCupertinoModalBottomSheet (or the Material equivalent) again.
• Internal Navigation: To implement standard navigation inside the sheet, add a new Navigator or CupertinoTabScaffold as the child of the modal's builder.
• Intercepting Back Buttons: The package supports Flutter's WillPopScope (or PopScope) to prevent the modal from closing unexpectedly.

To enable smooth route animations when using modals, replace your standard route implementations with MaterialWithModalsPageRoute using one of the following methods:

1. Using Navigator.push:

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

2. Using onGenerateRoute:

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

3. Using pageRouteBuilder:

pageRouteBuilder: <T>(RouteSettings settings, WidgetBuilder builder) => MaterialWithModalsPageRoute<T>(settings: settings, builder: builder)

To ensure that a scroll view inside the bottom sheet stays in sync with the modal's drag-to-dismiss gesture, assign ModalScrollController.of(context) to the primary scroll view's controller property.

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

To implement a bottom sheet, wrap your page content in a Stack and place the Sheet widget above the content you want to overlap. By default, the Sheet widget occupies all available space and manages user interactions with the sheet content.

Note: Sheet uses Material theming by default. If you want to remove the Material theming entirely, use RawSheet instead.

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

To customize the launch screen for the iOS version of your Flutter app, you can either replace the image files directly in the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory or use Xcode for a more visual approach.

Using Xcode:

1. Open your Flutter project's iOS workspace using open ios/Runner.xcworkspace.
2. In the Xcode Project Navigator, select Runner/Assets.xcassets.
3. Drag and drop your desired images into the asset catalog.