flutter_package / modal_bottom_sheet

Go to a project
Toggle navigation Toggle navigation pinning
Jaime Blasco
8b86f346 1 parent 8dc33a38

fix: add sheet package

Inline Side-by-side
Showing 100 changed files with 252 additions and 14 deletions

Too many changes to show.
Reload with full diff Plain diff Email patch

To preserve performance only 100 of 100+ files are displayed.

{
"image": "cirrusci/flutter:beta",
"forwardPorts": [3000]
}
name: Flutter Test
on:
push:
branches:
- master
jobs:
build:
name: Sheet test
env:
my_secret: ${{secrets.commit_secret}}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- uses: subosito/flutter-action@v1
with:
channel: 'dev'
- run: |
cd sheet
flutter pub get
- run: |
tools/coverage.sh sheet
\ No newline at end of file
... ...
... ... @@ -15,14 +15,14 @@ jobs:
with:
channel: 'dev'
- run: |
cd example
cd modal_bottom_sheet/example
flutter config --enable-web
flutter pub get
- run: |
cd example
cd modal_bottom_sheet/example
flutter build web --release --dart-define=FLUTTER_WEB_USE_SKIA=true
- run: |
cd example/build/web
cd modal_bottom_sheet/example/build/web
git init
git config --global user.email git@jaimeblasco.com
git config --global user.name jamesblasco
... ...
... ... @@ -30,8 +30,14 @@ jobs:
dart --version
flutter --version
- name: Prepare dependencies
run: flutter pub get
run: |
cd modal_bottom_sheet
flutter pub get
- name: Analyse the repo
run: flutter analyze lib
run: |
cd modal_bottom_sheet
flutter analyze lib
- name: Run tests
run: flutter test
run: |
cd modal_bottom_sheet
flutter test
... ...
{
"name": "Modal Bottom Sheet Docs",
"theme": "#36B9B9",
"sidebar": [
[
"Overview",
"/"
],
[
"Sheet",
[
[
"Getting Started",
"/sheet/install"
],
[
"Parameters",
"/sheet/customize"
]
]
],
[
"Sheet Route",
[
[
"Getting Started",
"/sheet_route/install"
],
[
"Parameters",
"/sheet_route/customize"
],
[
"Cupertino Sheet Route",
"/sheet_route/cupertino"
]
]
]
]
}
\ No newline at end of file
... ...
# Flutter Modal Bottom Sheet
[![Awesome Flutter](https://img.shields.io/badge/Awesome-Flutter-blue.svg?longCache=true&style=flat-square)](https://github.com/Solido/awesome-flutter) [![Pub](https://img.shields.io/pub/v/modal_bottom_sheet.svg?logo=flutter&color=blue&style=flat-square)](https://pub.dev/packages/modal_bottom_sheet)
## Try it
Explore the [Web Demo](https://jamesblasco.github.io/modal_bottom_sheet/#/) or clone the repository.
Why not `showModalBottomSheet`?
Inspired by `showModalBottomSheet`, it completes with some must-need features:
- Support for inside scrollview + dragging down to close (`showModalBottomSheet` won't work correctly with scrollviews.
- Support for `WillPopScope` to prevent closing the dialog.
- Support for scroll to top when tapping status bar (iOS only)
- Cupertino modal bottom sheet
- Create custom modal bottom sheet
## First Steps
How to install it? [Follow Instructions](
https://pub.dev/packages/modal_bottom_sheet#-installing-tab-)
... ...
Customize
\ No newline at end of file
... ...
# Getting started
Learn how to add your own Sheet to your page
## Install
[Follow Instructions](https://pub.dev/packages/sheet#-installing-tab-)
## Add bottom sheet
```dart
Scaffold(
body: Stack(
children: [
body,
Sheet(
child: MySheetContent()
)
]
)
)
```
We add the `Sheet` widget above the content we want to overlap. By default this widget
takes all the space available and handles the user interaction with the sheet
> Notice Sheet uses material theming by default. You can remove it completely by using RawSheet
By default the sheet appears hidden, so you should be able to
\ No newline at end of file
... ...
## Cupertino Modal BottomSheet
iOS 13 came with an amazing new modal navigation and now it is available to use with Flutter.
```dart
showCupertinoModalBottomSheet(
context: context,
builder: (context) => Container(),
)
```
See generic paramameter in the Material section above
#### Cupertino specific params
The optional `backgroundColor` parameters can be passed in to customize the backgroundColor cupertino bottom sheets.
Useful if you want a blurred transparent background as the example Cupertino Photo Share
### CAUTION!: To animate the previous route some changes are needed.
> **Why?**
> `MaterialPageRoute` and `CupertinoPageRoute` do not allow animated translation to/from routes that are not the same type.
Replace your current route class with `MaterialWithModalsPageRoute`.
Notice this route type behaves the same as `MaterialPageRoute` and supports custom `PageTransitionsBuilder` and `PageTransitionsTheme`.
It supports native features as bouncing, blurred background, dark mode, stacking modals and inside navigation.
## Push new views inside the modal bottom sheet
a. If you want to push a new modal bottom sheet just call `showCupertinoModalBottomSheet` again (works with both options)
b. For inside navigaton add a new `Navigator` or `CupertinoTabScaffold` inside
c. Also it supports flutter features as WillPopScope to prevent the modal bottom to be closed.
## Build other BottomSheets
Try `showBarModalBottomSheet` for a bottomSheet with the appearance used by Facebook or Slack
Check in the example project `showAvatarModalBottomSheet` for how to create your own ModalBottomSheet
## Questions
[Ask a question](https://stackoverflow.com/questions/ask) and ping me @jamesblasco
## Found an issue or have a proposal?
[Create an issue](https://github.com/jamesblasco/modal_bottom_sheet/issues/new)
... ...
Customize
\ No newline at end of file
... ...
# Install
[Follow Instructions](https://pub.dev/packages/sheet#-installing-tab-)
Add your own Sheet to your page
## Material Modal BottomSheet
```dart
showMaterialModalBottomSheet(
context: context,
builder: (context) => Container(),
)
```
#### Generic params for all modal bottom sheets
| Param | Description |
|---|---|
|bool expand = false| The `expand` parameter specifies id the modal bottom sheet will be full screen size or will fit the content child|
|bool useRootNavigator = false| The `useRootNavigator` parameter ensures that the root navigator is used to display the bottom sheet when set to `true`. This is useful in the case that a modal bottom sheet needs to be displayed above all other content but the caller is inside another `Navigator`. |
|bool isDismissible = true| The `isDismissible` parameter specifies whether the bottom sheet will be dismissed when user taps on the scrim. |
|Color barrierColor | The `barrierColor` parameter controls the color of the scrim for this route |
|bool enableDrag = true| The `enableDrag` parameter specifies whether the bottom sheet can be dragged up and down and dismissed by swiping downwards. |
|AnimationController secondAnimation| The `secondAnimation` parameter allows you to provide an animation controller that will be used to animate push/pop of the modal route. Using this param is advised against and will be probably removed in future versions |
|bool bounce = false| The `bounce` parameter specifies if the bottom sheet can go beyond the top boundary while dragging |
|Duration duration = const Duration(milliseconds: 400)| The `duration` of modal opening |
|double closeProgressThreshold = 0.6| The `closeProgressThreshold` specifies when the bottom sheet will be dismissed when user drags it. |
#### Material params
The optional `backgroundColor`, `elevation`, `shape`, and `clipBehavior` parameters can be passed in to customize the appearance and behavior of material bottom sheets.
#### Using it with a scroll view inside
Assign the `ModalScrollController.of(context)` to your primary modal to sync the scroll with the modal's drag
```dart
showMaterialModalBottomSheet(
context: context,
builder: (context) => SingleChildScrollView(
controller: ModalScrollController.of(context),
child: Container(),
),
);
```
... ...
MIT License
Copyright (c) 2020 Jaime Blasco
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
... ...
... ... @@ -2,10 +2,6 @@
# Flutter Modal Bottom Sheet
**BREAKING CHANGE IN 1.0.0**
In the `builder` param remove `scrollController` and use `ModalScrollController.of(context)` instead to access the modal's scrollController. Check the CHANGELOG for more information
[![Awesome Flutter](https://img.shields.io/badge/Awesome-Flutter-blue.svg?longCache=true&style=flat-square)](https://github.com/Solido/awesome-flutter)
[![Pub](https://img.shields.io/pub/v/modal_bottom_sheet.svg?logo=flutter&color=blue&style=flat-square)](https://pub.dev/packages/modal_bottom_sheet)
... ...