flutter_package / modal_bottom_sheet

Go to a project
Toggle navigation Toggle navigation pinning
Jaime Blasco
Committed by GitHub
eb6bb71f 2 parents 783e012c 432019ff

Merge pull request #264 from jamesblasco/feat/sheet 

feat: adds sheet package
Inline Side-by-side
Showing 100 changed files with 336 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.

1 -{  
2 - "image": "cirrusci/flutter:beta",  
3 - "forwardPorts": [3000]  
4 -}  
@@ -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
  1 +name: sheet
  2 +on:
  3 + push:
  4 + branches:
  5 + - master
  6 + - main
  7 + pull_request:
  8 + paths:
  9 + - ".github/workflows/sheet.yaml"
  10 + - "sheet/**"
  11 +
  12 +jobs:
  13 + build:
  14 + uses: VeryGoodOpenSource/very_good_workflows/.github/workflows/flutter_package.yml@v1
  15 + with:
  16 + working_directory: sheet
  17 + min_coverage: 60 # Working to reach 100% XD
  18 +
  19 + pana:
  20 + uses: VeryGoodOpenSource/very_good_workflows/.github/workflows/pana.yml@v1
  21 + with:
  22 + working_directory: sheet
  23 + min_score: 110 # sheet is not in master yet
@@ -78,3 +78,5 @@ build/ @@ -78,3 +78,5 @@ build/
78 !/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages 78 !/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages
79 79
80 **/macos/Flutter/ephemeral/ 80 **/macos/Flutter/ephemeral/
  81 +
  82 +**/coverage
  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 +}
  1 +
  2 +# Flutter Modal Bottom Sheet
  3 +
  4 +[![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)
  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 +
  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
  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 +
  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 +```
  1 +# Miscellaneous
  2 +*.class
  3 +*.log
  4 +*.pyc
  5 +*.swp
  6 +.DS_Store
  7 +.atom/
  8 +.buildlog/
  9 +.history
  10 +.svn/
  11 +
  12 +# IntelliJ related
  13 +*.iml
  14 +*.ipr
  15 +*.iws
  16 +.idea/
  17 +
  18 +# Visual Studio Code related
  19 +.classpath
  20 +.project
  21 +.settings/
  22 +.vscode/*
  23 +
  24 +
  25 +# Flutter/Dart/Pub related
  26 +**/doc/api/
  27 +.dart_tool/
  28 +.flutter-plugins
  29 +.flutter-plugins-dependencies
  30 +.lock
  31 +.packages
  32 +.pub-cache/
  33 +.pub/
  34 +build/
  35 +
  36 +# Android related
  37 +**/android/**/gradle-wrapper.jar
  38 +**/android/.gradle
  39 +**/android/captures/
  40 +**/android/gradlew
  41 +**/android/gradlew.bat
  42 +**/android/local.properties
  43 +**/android/**/GeneratedPluginRegistrant.java
  44 +
  45 +# iOS/XCode related
  46 +**/ios/**/*.mode1v3
  47 +**/ios/**/*.mode2v3
  48 +**/ios/**/*.moved-aside
  49 +**/ios/**/*.pbxuser
  50 +**/ios/**/*.perspectivev3
  51 +**/ios/**/*sync/
  52 +**/ios/**/.sconsign.dblite
  53 +**/ios/**/.tags*
  54 +**/ios/**/.vagrant/
  55 +**/ios/**/DerivedData/
  56 +**/ios/**/Icon?
  57 +**/ios/**/Pods/
  58 +**/ios/**/.symlinks/
  59 +**/ios/**/profile
  60 +**/ios/**/xcuserdata
  61 +**/ios/.generated/
  62 +**/ios/Flutter/App.framework
  63 +**/ios/Flutter/Flutter.framework
  64 +**/ios/Flutter/Flutter.podspec
  65 +**/ios/Flutter/Generated.xcconfig
  66 +**/ios/Flutter/app.flx
  67 +**/ios/Flutter/app.zip
  68 +**/ios/Flutter/flutter_assets/
  69 +**/ios/Flutter/flutter_export_environment.sh
  70 +**/ios/ServiceDefinitions.json
  71 +**/ios/Runner/GeneratedPluginRegistrant.*
  72 +
  73 +# Exceptions to above rules.
  74 +!**/ios/**/default.mode1v3
  75 +!**/ios/**/default.mode2v3
  76 +!**/ios/**/default.pbxuser
  77 +!**/ios/**/default.perspectivev3
  78 +!/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages
  79 +
  80 +**/macos/Flutter/ephemeral/
  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 [![Awesome Flutter](https://img.shields.io/badge/Awesome-Flutter-blue.svg?longCache=true&style=flat-square)](https://github.com/Solido/awesome-flutter) 5 [![Awesome Flutter](https://img.shields.io/badge/Awesome-Flutter-blue.svg?longCache=true&style=flat-square)](https://github.com/Solido/awesome-flutter)
10 [![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) 6 [![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)
11 7