https://github.com/lalitjarwal/modal_side_sheet
A package to use Material side sheet into your Flutter project. Learn more about side sheet at Material.io
https://github.com/lalitjarwal/modal_side_sheet
flutter material-design material-ui modal package pub side-sheet
Last synced: 4 months ago
JSON representation
A package to use Material side sheet into your Flutter project. Learn more about side sheet at Material.io
- Host: GitHub
- URL: https://github.com/lalitjarwal/modal_side_sheet
- Owner: lalitjarwal
- License: other
- Created: 2021-08-17T09:33:56.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-17T13:47:51.000Z (almost 5 years ago)
- Last Synced: 2025-10-23T05:15:53.531Z (8 months ago)
- Topics: flutter, material-design, material-ui, modal, package, pub, side-sheet
- Language: C++
- Homepage: https://pub.dev/packages/modal_side_sheet
- Size: 102 KB
- Stars: 7
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Side Sheet
A package to use Material side sheet into your Flutter project.
Learn more about side sheet at [Material.io](https://material.io/components/sheets-side)
## 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](https://material.io/components/sheets-side#modal-side-sheet)
You can use it by calling `showModalSideSheet()` function into your Flutter project.
```dart
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](https://material.io/components/sheets-side#standard-side-sheet)
This side sheet can be used with `BodyWithSideSheet` widget.
Just place this widget into your `Scaffold`'s body property.
```dart
@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`.