modal_side_sheet

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that enables the integration of Material Design side sheets into applications across multiple platforms. It provides a customizable and responsive side sheet widget compatible with Android, iOS, Web, macOS, Windows, and Linux. The side sheet can be used to present supplementary content or actions in a modal fashion, enhancing user interaction without leaving the current screen. Built with Material design principles, it ensures consistency with native platform behaviors.

Use cases

Displaying detailed information in a modal overlay
Presenting action menus or options
Showing forms or input fields temporarily
Enhancing navigation with slide-in panels
Providing contextual controls without full-screen transitions

Key features

Material Design compliant side sheet
Cross-platform support (Android, iOS, Web, macOS, Windows, Linux)
Customizable appearance and behavior
Easy integration via pub add command
Supports both persistent and dismissible modes

Suitable for

Developers building cross-platform apps with consistent UI
Teams using Material Design guidelines
Apps needing temporary content overlays
Projects requiring lightweight modals
UX-focused interfaces with sliding panels

Considerations

May require additional styling for non-Material themes
Performance impact on large content lists
Limited customization compared to fully custom widgets
Not ideal for complex navigation structures
Requires careful handling of gestures on touch devices

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Side Sheet

A package to use Material side sheet into your Flutter project. Learn more about side sheet at Material.io

Platform Support

Android	iOS	MacOS	Web	Linux	Windows
✔️	✔️	✔️	✔️	✔️	✔️

Getting Started

This package comes with two types of side sheets, Standard side sheet and Modal side sheet.

Modal Side Sheet

Modal side sheets present content while blocking interaction with the rest of the screen. This side sheet generally used in mobile devices as per recommended by Material Design by Google. See also : Modal Side Sheet

You can use it by calling showModalSideSheet() function into your Flutter project.

ElevatedButton(
    onPressed: () {
        showModalSideSheet(
            context: context,
            ignoreAppBar: false,
            body: ListView.builder(
                itemBuilder: (context, index) {
                    return ListTile(
                        leading: Icon(Icons.face),
                        title: Text("I am on $index index"),
                        trailing: Icon(Icons.safety_divider),
                    );
                },
            ));
        },
    child: Text("Show Modal Side Sheet")),

Standard Side Sheet

Standard side sheets co-exist with the screen’s primary UI region, which allows viewing and interaction with both surfaces. They are used only on tablet and desktop. See also: Standard Side Sheet

This side sheet can be used with BodyWithSideSheet widget. Just place this widget into your Scaffold's body property.

@override
Widget build(BuildContext context){
    return Scaffold(
        appBar:AppBar(title:Text("Standard Side Sheet Demo")),
        body:BodyWithSideSheet(
            body:Container(
                child:Text("My App Body"),
            ),
            sheetBody:Container(
                child:Text("My Sheet Body"),
            ),
            show:true
        ),
    );
}

Contributing

This is fully open source project so you are welcome to sontribute to any features or bug-fixing.

Don't forgot to star and fork the repository and make your first pull request.

License

Project released under MIT License.

Search packages, repositories and app categories

Install package