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