Jaime Blasco
Committed by GitHub

Update README.md

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.