Showing
1 changed file
with
85 additions
and
8 deletions
| @@ -46,25 +46,92 @@ The optional `backgroundColor`, `elevation`, `shape`, and `clipBehavior` paramet | @@ -46,25 +46,92 @@ The optional `backgroundColor`, `elevation`, `shape`, and `clipBehavior` paramet | ||
| 46 | 46 | ||
| 47 | iOS 13 came with an amazing new modal navigation and now it is available to use with Flutter. | 47 | iOS 13 came with an amazing new modal navigation and now it is available to use with Flutter. |
| 48 | 48 | ||
| 49 | + | ||
| 50 | +```dart | ||
| 51 | +showCupertinoModalBottomSheet( | ||
| 52 | + context: context, | ||
| 53 | + builder: (context, scrollController) => Container(), | ||
| 54 | +}) | ||
| 55 | +``` | ||
| 56 | +See generic paramameter in the Material section above | ||
| 57 | + | ||
| 58 | +#### Cupertino specific params | ||
| 59 | +The optional `backgroundColor` parameters can be passed in to customize the backgroundColor cupertino bottom sheets. | ||
| 60 | +Useful if you want a blurred transparent background as the example Cupertino Photo Share | ||
| 61 | + | ||
| 62 | +### CAUTION!: To animate the previous route some changes are needed. | ||
| 63 | +> **Why?** | ||
| 64 | +> `MaterialPageRoute` and `CupertinoPageRoute` do not allow animated translation to/from routes that are not the same type. | ||
| 65 | + | ||
| 66 | +There are two options: | ||
| 67 | + | ||
| 49 | ### OPTION 1. Recommended. | 68 | ### OPTION 1. Recommended. |
| 50 | -1. use `showCupertinoModalBottomSheet` | ||
| 51 | -2. `MaterialPageRoute` does not allow animated translation for routes that are not `MaterialPageRoute` or `CupertinoPageRoute`. | 69 | + |
| 70 | +Replace your current route class with `MaterialWithModalsPageRoute`. | ||
| 71 | + | ||
| 52 | For this we created `MaterialWithModalsPageRoute` that needs to replace the route you are using now. | 72 | For this we created `MaterialWithModalsPageRoute` that needs to replace the route you are using now. |
| 53 | -Notice this route type works the same as `MaterialPageRoute` and will support custom `PageTransitionsTheme`. | 73 | +Notice this route type behaves the same as `MaterialPageRoute` and supports custom `PageTransitionsBuilder` and `PageTransitionsTheme`. |
| 74 | + | ||
| 75 | +How can I change my route class? See cases: | ||
| 76 | + | ||
| 77 | +1. Using `Navigator.of(context).push` | ||
| 78 | + | ||
| 79 | +```dart | ||
| 80 | +Navigator.of(context).push(MaterialPageRoute(builder: (context) => Container()));` | ||
| 81 | +``` | ||
| 82 | + Replace it with | ||
| 83 | + ```dart | ||
| 84 | + Navigator.of(context).push(MaterialWithModalsPageRoute(builder: (context) => Container())); | ||
| 85 | + ``` | ||
| 86 | +2. Using `onGenerateRoute` parameter of `MaterialApp`, `CupertinoApp` or `Navigator` | ||
| 87 | + ```dart | ||
| 88 | + onGenerateRoute: (settings) { | ||
| 89 | + ... | ||
| 90 | + return MaterialPageRoute(settings: settings, builder: (context) => Container()); | ||
| 91 | + }, | ||
| 92 | + ``` | ||
| 93 | + Replace it to | ||
| 94 | + ```dart | ||
| 95 | + onGenerateRoute: (settings) { | ||
| 96 | + ... | ||
| 97 | + return MaterialWithModalsPageRoute(settings: settings, builder: (context) => Container()); | ||
| 98 | + }, | ||
| 99 | + ``` | ||
| 100 | + 3. Using `pageRouteBuilder` parameter of `WidgetApp` | ||
| 101 | +```dart | ||
| 102 | +pageRouteBuilder: <T>(RouteSettings settings, WidgetBuilder builder) => MaterialWithModalsPageRoute<T>(settings: settings, builder: builder) | ||
| 103 | + ``` | ||
| 104 | + 4. Using `routes` parameter from `MaterialApp` or `CupertinoApp` | ||
| 105 | +Unfortunately this routes are `MaterialPageRoute` and `CupertinoPageRoute` respectively and cannot be changes. | ||
| 106 | +You can change the way you call the previous route with one of the previous methods or try option 2 | ||
| 54 | 107 | ||
| 55 | 108 | ||
| 56 | ### OPTION 2. | 109 | ### OPTION 2. |
| 57 | -1. Wrap previous page inside a `CupertinoScaffold`. | ||
| 58 | -2. Call `CupertinoScaffold.showCupertinoModalBottomSheet(context:context, builder: ...)` | 110 | + |
| 111 | +1. Wrap previous route inside a `CupertinoScaffold`. | ||
| 112 | + Example with `routes` parameter from `MaterialApp` or `CupertinoApp` | ||
| 113 | + ```dart | ||
| 114 | + routes: <String, WidgetBuilder>{ | ||
| 115 | + '/previous_route_where_you_push_modal': (BuildContext context) => CupertinoScaffold(body: Container()), | ||
| 116 | + }, | ||
| 117 | + ``` | ||
| 118 | + | ||
| 119 | +2. Push modal with this method | ||
| 120 | + ```dart | ||
| 121 | + CupertinoScaffold.showCupertinoModalBottomSheet(context:context, builder: (context) => Container()) | ||
| 122 | + ``` | ||
| 59 | 123 | ||
| 60 | These two options won't work correctly together. | 124 | These two options won't work correctly together. |
| 61 | 125 | ||
| 62 | It supports native features as bouncing, blurred background, dark mode, stacking modals and inside navigation. | 126 | It supports native features as bouncing, blurred background, dark mode, stacking modals and inside navigation. |
| 63 | 127 | ||
| 64 | -For stacking modals call `showCupertinoModalBottomSheet` inside a modal; | ||
| 65 | -For inside navigation use a CupertinoTabScaffold or a Navigator. | 128 | +## Push new views inside the modal bottom sheet |
| 129 | + | ||
| 130 | +a. If you want to push a new modal bottom sheet just call `showCupertinoModalBottomSheet` again (works with two option) | ||
| 66 | 131 | ||
| 67 | -Also it support flutter features as WillPopScope. | 132 | +b. For inside navigaton add a new `Navigator` or `CupertinoTabScaffold` inside |
| 133 | + | ||
| 134 | +c. Also it supports flutter features as WillPopScope to prevent the modal bottom to be closed. | ||
| 68 | 135 | ||
| 69 | ## Build other BottomSheets | 136 | ## Build other BottomSheets |
| 70 | 137 | ||
| @@ -72,7 +139,17 @@ Try `showBarModalBottomSheet` for a bottomSheet with the appearance used by Face | @@ -72,7 +139,17 @@ Try `showBarModalBottomSheet` for a bottomSheet with the appearance used by Face | ||
| 72 | 139 | ||
| 73 | Check in the example project `showAvatarModalBottomSheet` for how to create your own ModalBottomSheet | 140 | Check in the example project `showAvatarModalBottomSheet` for how to create your own ModalBottomSheet |
| 74 | 141 | ||
| 142 | +## Questions | ||
| 143 | + | ||
| 144 | +[Ask a question](https://stackoverflow.com/questions/ask) and ping me @jamesblasco | ||
| 145 | + | ||
| 146 | +## Found an issue or have a proposal? | ||
| 147 | + | ||
| 148 | +[Create an issue](https://github.com/jamesblasco/modal_bottom_sheet/issues/new) | ||
| 149 | + | ||
| 150 | + | ||
| 75 | ## Roadmap | 151 | ## Roadmap |
| 152 | + | ||
| 76 | - [ ] Support closing by dragging fast on a modal with a scroll view. | 153 | - [ ] Support closing by dragging fast on a modal with a scroll view. |
| 77 | 154 | ||
| 78 | - [ ] Improve animation curves when user is not dragging. | 155 | - [ ] Improve animation curves when user is not dragging. |
-
Please register or login to post a comment