Check the package [README](https://github.com/jamesblasco/modal_bottom_sheet/tree/main/modal_bottom_sheet) for more information
### Sheet (Experimental)
[Sheet](https://github.com/jamesblasco/modal_bottom_sheet/tree/main/sheet) is a new package that reimplements the modal bottom sheet behavior from scratch. It is expected to be easier to use, more performant, more stable, more customaziable and with more features. It is used in several released apps already. If you want to be part of it, I encourge you to give it a try and provide any feedback you might have :)
A fully customizable draggable bottom sheet for Flutter
Sheet is a new package that intends to replace [modal_bottom_sheet](https://pub.dev/packages/modal_bottom_sheet) in a near future
It allows to add a [Sheet] widget to any page or push a new [SheetRoute] to your navigator.
## Getting Started
Add the sheet package to your pubspec
```sh
flutter pub add sheet
```
Learn more about:
- Using [Sheet](modal_bottom_sheet/tree/main/sheet#sheet) to create bottom sheets inside your page
- Using [SheetRoute](modal_bottom_sheet/tree/main/sheet#sheetroute) or `SheetPage` to push a new modal bottom sheet route
## Sheet
```dart
Sheet(
initialExtent:200,
...
...
@@ -11,7 +32,7 @@ Sheet(
)
```
You can add it above any widget
You can add it above any other widget. Usually you might want to use a Stack for that
```dart
Stack(
...
...
@@ -28,64 +49,76 @@ Stack(
The widget has several parameters that allow fully costumization of the sheet
# Add an initial position
#### Add an initial position
Use `initialExtent` to set a initial offset from the bottom
```dart
Sheet(
initialExtent:200,
child:Container(color:Colors.blue[100]),
)
```
#### Clamp the sheet between a min and maximun values
You can set a `minExtent` and `maxExtent` to limit the position of the Sheet between those values
# Clamp the sheet between a min and maximun values
```dart
Sheet(
initialExtent:200,
minExtent:100,
maxExtent:400,
child:Container(color:Colors.blue[100]),
)
```
# Set a space value of interaction
#### Allow to open the sheet when is fully hidden
When the sheet is hidden you might wanna allow the user to drag up the
bottom sheet even if this one is no visible. You can define an area where
the interaction can be detected
When the sheet is hidden you might wanna allow the user to drag up the bottom sheet even if this one is no visible. You can define an area where the interaction can be detected
```dart
Sheet(
initialExtent:0,
minInteractionExtent:20,
child:Container(color:Colors.blue[100]),
)
```
# Fit modes
#### Fit modes
By default the sheet height will be the minimun between the max available height and the
one recommended by the child.
By default the sheet height will be the minimun between the max available height and the one recommended by the child.
It is possible to force the sheet child to be the maxium size available by setting `SheetFit.expand`
```dart
Sheet(
initialExtent:200,
fit:SheetFit.expand,
child:Container(color:Colors.blue[100]),
)
```
# Resizable
#### Resizable
By default the sheet has a fixed sized and it is translated according to the user scroll.
By default the sheet has a fixed sized and it is vertically translated according to the user drag.
It is posible to make the sheet change the height of the child by setting `resize: true`
This will force the child to fit the available visual space.
```dart
Sheet(
initialExtent:200,
resizable:true
child:Container(color:Colors.blue[100]),
)
```
# Resizable with min size extent
#### Resizable with min size extent
It is possible to set a min height for a resizable sheet. When the height reaches that min value, the sheet
will start translating instead of shrinking
will start vertically translating instead of shrinking
```dart
Sheet(
...
...
@@ -96,7 +129,7 @@ Sheet(
```
# Control the position of the sheet
#### Control the position of the sheet
It is possible to pass a `SheetController` to control programatically the position of the sheet.
controller.relativeAnimateTo(1,...);// Value between 0 and 1
```
The sheet controller also contains an animation value that can be used
to animate other parts of the ui in sync
The sheet controller also contains an animation value that can be used to animate other parts of the ui in sync
```dart
AnimatedBuilder(
...
...
@@ -129,5 +161,53 @@ AnimatedBuilder(
);
```
The sheet controller also contains an animation value that can be used
to animate other parts of the ui in sync
## Sheet Route
You can push a new modal bottom sheet route above your current page using `SheetRoute`
```dart
SheetRoute<void>(
builder: (BuildContext) => Container(),
)
```
Or you can also use `SheetPage` with the Navigator 2.0
```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,
)
],
)
```
An example using [GoRouter](https://pub.dev/packages/go_router) is available [here](https://github.com/jamesblasco/modal_bottom_sheet/blob/main/sheet/example/lib/examples/route/navigation/go_router.dart)
#### Set the initial position
Use `initialExtent` to set the initial position the bottom sheet will be dragged to:
