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: | ||
54 | 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 | ||
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) | ||
131 | + | ||
132 | +b. For inside navigaton add a new `Navigator` or `CupertinoTabScaffold` inside | ||
66 | 133 | ||
67 | -Also it support flutter features as WillPopScope. | 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