flutter_package / modal_bottom_sheet

Go to a project
Toggle navigation Toggle navigation pinning
bierbaumtim
5fbd01a6 1 parent 6b18665f

add darkmode support to example 

* rework CupertinoShareSheet
* fix code formatting
* add DarkTheme for material
* add CupertinoTheme
* remove hardcoded colors
Inline Side-by-side
Showing 2 changed files with 212 additions and 98 deletions
@@ -7,38 +7,60 @@ import 'package:modal_bottom_sheet/modal_bottom_sheet.dart'; @@ -7,38 +7,60 @@ import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
7 class CupertinoSharePage extends StatelessWidget { 7 class CupertinoSharePage extends StatelessWidget {
8 @override 8 @override
9 Widget build(BuildContext context) { 9 Widget build(BuildContext context) {
10 - return Scaffold(  
11 - appBar: appBar(context),  
12 - body: CupertinoPageScaffold( 10 + final baseTextStyle = CupertinoTheme.of(context).textTheme.textStyle;
  11 +
  12 + return CupertinoPageScaffold(
  13 + backgroundColor: CupertinoTheme.of(context).scaffoldBackgroundColor,
  14 + navigationBar: CupertinoNavigationBar(
  15 + backgroundColor: CupertinoTheme.of(context).barBackgroundColor,
  16 + middle: Column(
  17 + children: <Widget>[
  18 + Text(
  19 + 'New York',
  20 + style: baseTextStyle,
  21 + ),
  22 + Text(
  23 + '1 February 11:45',
  24 + style: baseTextStyle.copyWith(
  25 + fontWeight: FontWeight.normal,
  26 + fontSize: 12,
  27 + ),
  28 + ),
  29 + ],
  30 + ),
  31 + trailing: CupertinoButton(
  32 + child: Text('Edit'),
  33 + padding: EdgeInsets.zero,
  34 + onPressed: () {},
  35 + ),
  36 + ),
  37 + child: Column(
  38 + children: [
  39 + Expanded(
13 child: Center( 40 child: Center(
14 child: Hero( 41 child: Hero(
15 tag: 'image', 42 tag: 'image',
16 child: Image.asset('assets/demo_image.jpeg'), 43 child: Image.asset('assets/demo_image.jpeg'),
17 - )),  
18 ), 44 ),
19 - bottomNavigationBar: bottomAppBar(context));  
20 - }  
21 -  
22 - PreferredSizeWidget appBar(BuildContext context) {  
23 - return CupertinoNavigationBar(  
24 - middle: Column(  
25 - children: <Widget>[  
26 - Text('New York', style: TextStyle(fontWeight: FontWeight.normal)),  
27 - Text('1 February 11:45',  
28 - style: TextStyle(fontWeight: FontWeight.normal, fontSize: 12))  
29 - ],  
30 ), 45 ),
31 - trailing: Text(  
32 - 'Edit',  
33 - style: TextStyle(  
34 - color: CupertinoTheme.of(context).primaryColor,  
35 ), 46 ),
  47 + bottomAppBar(context),
  48 + ],
36 ), 49 ),
37 ); 50 );
38 } 51 }
39 52
40 Widget bottomAppBar(BuildContext context) { 53 Widget bottomAppBar(BuildContext context) {
41 - return BottomAppBar( 54 + return Container(
  55 + decoration: BoxDecoration(
  56 + border: Border(
  57 + top: BorderSide(
  58 + width: 0.5,
  59 + color: CupertinoColors.separator.resolveFrom(context),
  60 + ),
  61 + ),
  62 + color: CupertinoTheme.of(context).barBackgroundColor,
  63 + ),
42 child: Row( 64 child: Row(
43 mainAxisAlignment: MainAxisAlignment.spaceBetween, 65 mainAxisAlignment: MainAxisAlignment.spaceBetween,
44 children: <Widget>[ 66 children: <Widget>[
@@ -80,9 +102,7 @@ class PhotoShareBottomSheet extends StatelessWidget { @@ -80,9 +102,7 @@ class PhotoShareBottomSheet extends StatelessWidget {
80 child: Material( 102 child: Material(
81 color: Colors.transparent, 103 color: Colors.transparent,
82 child: Scaffold( 104 child: Scaffold(
83 - backgroundColor: CupertinoTheme.of(context)  
84 - .scaffoldBackgroundColor  
85 - .withOpacity(0.95), 105 + backgroundColor: CupertinoTheme.of(context).scaffoldBackgroundColor,
86 extendBodyBehindAppBar: true, 106 extendBodyBehindAppBar: true,
87 appBar: appBar(context), 107 appBar: appBar(context),
88 body: CustomScrollView( 108 body: CustomScrollView(
@@ -96,8 +116,7 @@ class PhotoShareBottomSheet extends StatelessWidget { @@ -96,8 +116,7 @@ class PhotoShareBottomSheet extends StatelessWidget {
96 height: 318, 116 height: 318,
97 child: ListView( 117 child: ListView(
98 padding: EdgeInsets.all(12).copyWith( 118 padding: EdgeInsets.all(12).copyWith(
99 - right:  
100 - MediaQuery.of(context).size.width / 2 - 100), 119 + right: MediaQuery.of(context).size.width / 2 - 100),
101 reverse: true, 120 reverse: true,
102 scrollDirection: Axis.horizontal, 121 scrollDirection: Axis.horizontal,
103 physics: PageScrollPhysics(), 122 physics: PageScrollPhysics(),
@@ -108,21 +127,24 @@ class PhotoShareBottomSheet extends StatelessWidget { @@ -108,21 +127,24 @@ class PhotoShareBottomSheet extends StatelessWidget {
108 borderRadius: BorderRadius.circular(12), 127 borderRadius: BorderRadius.circular(12),
109 child: Hero( 128 child: Hero(
110 tag: 'image', 129 tag: 'image',
111 - child:  
112 - Image.asset('assets/demo_image.jpeg'),  
113 - ))), 130 + child: Image.asset('assets/demo_image.jpeg'),
  131 + ),
  132 + ),
  133 + ),
114 Padding( 134 Padding(
115 padding: EdgeInsets.symmetric(horizontal: 6), 135 padding: EdgeInsets.symmetric(horizontal: 6),
116 child: ClipRRect( 136 child: ClipRRect(
117 borderRadius: BorderRadius.circular(12), 137 borderRadius: BorderRadius.circular(12),
118 child: Image.asset('assets/demo_image.jpeg'), 138 child: Image.asset('assets/demo_image.jpeg'),
119 - )), 139 + ),
  140 + ),
120 Padding( 141 Padding(
121 padding: EdgeInsets.symmetric(horizontal: 6), 142 padding: EdgeInsets.symmetric(horizontal: 6),
122 child: ClipRRect( 143 child: ClipRRect(
123 borderRadius: BorderRadius.circular(12), 144 borderRadius: BorderRadius.circular(12),
124 child: Image.asset('assets/demo_image.jpeg'), 145 child: Image.asset('assets/demo_image.jpeg'),
125 - )), 146 + ),
  147 + ),
126 ], 148 ],
127 ), 149 ),
128 ), 150 ),
@@ -157,8 +179,7 @@ class PhotoShareBottomSheet extends StatelessWidget { @@ -157,8 +179,7 @@ class PhotoShareBottomSheet extends StatelessWidget {
157 width: 60, 179 width: 60,
158 decoration: BoxDecoration( 180 decoration: BoxDecoration(
159 image: DecorationImage( 181 image: DecorationImage(
160 - image:  
161 - AssetImage(app.imageUrl!), 182 + image: AssetImage(app.imageUrl!),
162 fit: BoxFit.cover), 183 fit: BoxFit.cover),
163 color: Colors.white, 184 color: Colors.white,
164 borderRadius: 185 borderRadius:
@@ -166,8 +187,8 @@ class PhotoShareBottomSheet extends StatelessWidget { @@ -166,8 +187,8 @@ class PhotoShareBottomSheet extends StatelessWidget {
166 ), 187 ),
167 ), 188 ),
168 shape: RoundedRectangleBorder( 189 shape: RoundedRectangleBorder(
169 - borderRadius:  
170 - BorderRadius.circular(15)), 190 + borderRadius: BorderRadius.circular(15),
  191 + ),
171 elevation: 12, 192 elevation: 12,
172 shadowColor: Colors.black12, 193 shadowColor: Colors.black12,
173 ), 194 ),
@@ -179,79 +200,148 @@ class PhotoShareBottomSheet extends StatelessWidget { @@ -179,79 +200,148 @@ class PhotoShareBottomSheet extends StatelessWidget {
179 style: TextStyle(fontSize: 11), 200 style: TextStyle(fontSize: 11),
180 ) 201 )
181 ], 202 ],
182 - )); 203 + ),
  204 + );
183 }, 205 },
184 itemCount: apps.length, 206 itemCount: apps.length,
185 ), 207 ),
186 ), 208 ),
187 ), 209 ),
188 SliverPadding( 210 SliverPadding(
189 - padding:  
190 - EdgeInsets.symmetric(horizontal: 18, vertical: 6), 211 + padding: EdgeInsets.symmetric(horizontal: 18, vertical: 6),
191 sliver: SliverList( 212 sliver: SliverList(
192 delegate: SliverChildListDelegate.fixed( 213 delegate: SliverChildListDelegate.fixed(
193 - List<Widget>.from(actions.map( 214 + List<Widget>.from(
  215 + actions.map(
194 (action) => Container( 216 (action) => Container(
195 padding: EdgeInsets.symmetric( 217 padding: EdgeInsets.symmetric(
196 vertical: 16, horizontal: 16), 218 vertical: 16, horizontal: 16),
197 child: Text( 219 child: Text(
198 action.title, 220 action.title,
199 - style: CupertinoTheme.of(context)  
200 - .textTheme  
201 - .textStyle,  
202 - )),  
203 - )).addItemInBetween(Divider( 221 + style:
  222 + CupertinoTheme.of(context).textTheme.textStyle,
  223 + ),
  224 + decoration: BoxDecoration(
  225 + borderRadius: BorderRadius.circular(8),
  226 + color: CupertinoColors
  227 + .tertiarySystemGroupedBackground
  228 + .resolveFrom(context),
  229 + ),
  230 + ),
  231 + ),
  232 + ).addItemInBetween(
  233 + Container(
  234 + width: double.infinity,
204 height: 1, 235 height: 1,
205 - ))),  
206 - )), 236 + color: CupertinoColors.separator.resolveFrom(context),
  237 + ),
  238 + ),
  239 + ),
  240 + ),
  241 + ),
207 SliverPadding( 242 SliverPadding(
208 - padding:  
209 - EdgeInsets.symmetric(horizontal: 18, vertical: 6), 243 + padding: EdgeInsets.symmetric(horizontal: 18, vertical: 6),
210 sliver: SliverList( 244 sliver: SliverList(
211 delegate: SliverChildListDelegate.fixed( 245 delegate: SliverChildListDelegate.fixed(
212 - List<Widget>.from(actions1.map( 246 + List<Widget>.from(
  247 + actions1.map(
213 (action) => Container( 248 (action) => Container(
214 padding: EdgeInsets.symmetric( 249 padding: EdgeInsets.symmetric(
215 vertical: 16, horizontal: 16), 250 vertical: 16, horizontal: 16),
216 child: Text( 251 child: Text(
217 action.title, 252 action.title,
218 - style: CupertinoTheme.of(context)  
219 - .textTheme  
220 - .textStyle,  
221 - )),  
222 - )).addItemInBetween(Divider( 253 + style:
  254 + CupertinoTheme.of(context).textTheme.textStyle,
  255 + ),
  256 + decoration: BoxDecoration(
  257 + borderRadius: BorderRadius.only(
  258 + topLeft: action == actions1.first
  259 + ? Radius.circular(8)
  260 + : Radius.zero,
  261 + topRight: action == actions1.first
  262 + ? Radius.circular(8)
  263 + : Radius.zero,
  264 + bottomLeft: action == actions1.last
  265 + ? Radius.circular(8)
  266 + : Radius.zero,
  267 + bottomRight: action == actions1.last
  268 + ? Radius.circular(8)
  269 + : Radius.zero,
  270 + ),
  271 + color: CupertinoColors
  272 + .tertiarySystemGroupedBackground
  273 + .resolveFrom(context),
  274 + ),
  275 + ),
  276 + ),
  277 + ).addItemInBetween(
  278 + Container(
  279 + width: double.infinity,
223 height: 1, 280 height: 1,
224 - ))),  
225 - )), 281 + color: CupertinoColors.separator.resolveFrom(context),
  282 + ),
  283 + ),
  284 + ),
  285 + ),
  286 + ),
226 SliverPadding( 287 SliverPadding(
227 - padding:  
228 - EdgeInsets.symmetric(horizontal: 18, vertical: 4), 288 + padding: EdgeInsets.symmetric(horizontal: 18, vertical: 4),
229 sliver: SliverList( 289 sliver: SliverList(
230 delegate: SliverChildListDelegate.fixed( 290 delegate: SliverChildListDelegate.fixed(
231 - List<Widget>.from(actions2.map( 291 + List<Widget>.from(
  292 + actions2.map(
232 (action) => Container( 293 (action) => Container(
233 padding: EdgeInsets.symmetric( 294 padding: EdgeInsets.symmetric(
234 vertical: 16, horizontal: 16), 295 vertical: 16, horizontal: 16),
235 child: Text( 296 child: Text(
236 action.title, 297 action.title,
237 - style: CupertinoTheme.of(context)  
238 - .textTheme  
239 - .textStyle,  
240 - )),  
241 - )).addItemInBetween(Divider( 298 + style:
  299 + CupertinoTheme.of(context).textTheme.textStyle,
  300 + ),
  301 + decoration: BoxDecoration(
  302 + borderRadius: BorderRadius.only(
  303 + topLeft: action == actions2.first
  304 + ? Radius.circular(8)
  305 + : Radius.zero,
  306 + topRight: action == actions2.first
  307 + ? Radius.circular(8)
  308 + : Radius.zero,
  309 + bottomLeft: action == actions2.last
  310 + ? Radius.circular(8)
  311 + : Radius.zero,
  312 + bottomRight: action == actions2.last
  313 + ? Radius.circular(8)
  314 + : Radius.zero,
  315 + ),
  316 + color: CupertinoColors
  317 + .tertiarySystemGroupedBackground
  318 + .resolveFrom(context),
  319 + ),
  320 + ),
  321 + ),
  322 + ).addItemInBetween(
  323 + Container(
  324 + width: double.infinity,
242 height: 1, 325 height: 1,
243 - ))),  
244 - )), 326 + color: CupertinoColors.separator.resolveFrom(context),
  327 + ),
  328 + ),
  329 + ),
  330 + ),
  331 + ),
245 SliverSafeArea( 332 SliverSafeArea(
246 top: false, 333 top: false,
247 sliver: SliverPadding( 334 sliver: SliverPadding(
248 padding: EdgeInsets.only( 335 padding: EdgeInsets.only(
249 bottom: 20, 336 bottom: 20,
250 - )), 337 + ),
  338 + ),
251 ) 339 )
252 ], 340 ],
253 ), 341 ),
254 - ))); 342 + ),
  343 + ),
  344 + );
255 } 345 }
256 346
257 Widget sliverContactsSection(BuildContext context) { 347 Widget sliverContactsSection(BuildContext context) {
@@ -323,7 +413,8 @@ class PhotoShareBottomSheet extends StatelessWidget { @@ -323,7 +413,8 @@ class PhotoShareBottomSheet extends StatelessWidget {
323 fit: BoxFit.cover, 413 fit: BoxFit.cover,
324 height: 40, 414 height: 40,
325 width: 40, 415 width: 40,
326 - )), 416 + ),
  417 + ),
327 SizedBox(width: 12), 418 SizedBox(width: 12),
328 Expanded( 419 Expanded(
329 child: Column( 420 child: Column(
@@ -349,7 +440,8 @@ class PhotoShareBottomSheet extends StatelessWidget { @@ -349,7 +440,8 @@ class PhotoShareBottomSheet extends StatelessWidget {
349 .actionTextStyle 440 .actionTextStyle
350 .copyWith( 441 .copyWith(
351 fontSize: 14, 442 fontSize: 14,
352 - fontWeight: FontWeight.normal), 443 + fontWeight: FontWeight.normal,
  444 + ),
353 ), 445 ),
354 SizedBox(width: 2), 446 SizedBox(width: 2),
355 Icon( 447 Icon(
@@ -358,9 +450,11 @@ class PhotoShareBottomSheet extends StatelessWidget { @@ -358,9 +450,11 @@ class PhotoShareBottomSheet extends StatelessWidget {
358 color: 450 color:
359 CupertinoTheme.of(context).primaryColor, 451 CupertinoTheme.of(context).primaryColor,
360 ) 452 )
361 - ]),  
362 ], 453 ],
363 - )), 454 + ),
  455 + ],
  456 + ),
  457 + ),
364 GestureDetector( 458 GestureDetector(
365 onTap: () => Navigator.of(context).pop(), 459 onTap: () => Navigator.of(context).pop(),
366 child: Align( 460 child: Align(
@@ -369,13 +463,15 @@ class PhotoShareBottomSheet extends StatelessWidget { @@ -369,13 +463,15 @@ class PhotoShareBottomSheet extends StatelessWidget {
369 margin: EdgeInsets.only(top: 14), 463 margin: EdgeInsets.only(top: 14),
370 padding: EdgeInsets.all(4), 464 padding: EdgeInsets.all(4),
371 decoration: BoxDecoration( 465 decoration: BoxDecoration(
372 - color: Colors.black.withOpacity(0.1), 466 + color: CupertinoColors.secondarySystemFill
  467 + .resolveFrom(context),
373 shape: BoxShape.circle, 468 shape: BoxShape.circle,
374 ), 469 ),
375 child: Icon( 470 child: Icon(
376 Icons.close, 471 Icons.close,
377 size: 24, 472 size: 24,
378 - color: Colors.black54, 473 + color: CupertinoColors.systemFill
  474 + .resolveFrom(context),
379 ), 475 ),
380 ), 476 ),
381 ), 477 ),
@@ -24,10 +24,17 @@ class MyApp extends StatelessWidget { @@ -24,10 +24,17 @@ class MyApp extends StatelessWidget {
24 Widget build(BuildContext context) { 24 Widget build(BuildContext context) {
25 return MaterialApp( 25 return MaterialApp(
26 theme: ThemeData(platform: TargetPlatform.iOS), 26 theme: ThemeData(platform: TargetPlatform.iOS),
  27 + darkTheme: ThemeData.dark().copyWith(platform: TargetPlatform.iOS),
27 title: 'BottomSheet Modals', 28 title: 'BottomSheet Modals',
28 builder: (context, Widget? child) => WebFrame( 29 builder: (context, Widget? child) => WebFrame(
  30 + child: CupertinoTheme(
  31 + data: CupertinoThemeData(
  32 + brightness: Theme.of(context).brightness,
  33 + scaffoldBackgroundColor: CupertinoColors.systemBackground,
  34 + ),
29 child: child!, 35 child: child!,
30 ), 36 ),
  37 + ),
31 onGenerateRoute: (RouteSettings settings) { 38 onGenerateRoute: (RouteSettings settings) {
32 switch (settings.name) { 39 switch (settings.name) {
33 case '/': 40 case '/':
@@ -40,14 +47,13 @@ class MyApp extends StatelessWidget { @@ -40,14 +47,13 @@ class MyApp extends StatelessWidget {
40 body: CupertinoScaffold( 47 body: CupertinoScaffold(
41 body: Builder( 48 body: Builder(
42 builder: (context) => CupertinoPageScaffold( 49 builder: (context) => CupertinoPageScaffold(
43 - backgroundColor: Colors.white,  
44 navigationBar: CupertinoNavigationBar( 50 navigationBar: CupertinoNavigationBar(
45 transitionBetweenRoutes: false, 51 transitionBetweenRoutes: false,
46 middle: Text('Normal Navigation Presentation'), 52 middle: Text('Normal Navigation Presentation'),
47 trailing: GestureDetector( 53 trailing: GestureDetector(
48 child: Icon(Icons.arrow_upward), 54 child: Icon(Icons.arrow_upward),
49 - onTap: () => CupertinoScaffold  
50 - .showCupertinoModalBottomSheet( 55 + onTap: () =>
  56 + CupertinoScaffold.showCupertinoModalBottomSheet(
51 expand: true, 57 expand: true,
52 context: context, 58 context: context,
53 backgroundColor: Colors.transparent, 59 backgroundColor: Colors.transparent,
@@ -60,23 +66,25 @@ class MyApp extends StatelessWidget { @@ -60,23 +66,25 @@ class MyApp extends StatelessWidget {
60 right: 40, 66 right: 40,
61 bottom: 20, 67 bottom: 20,
62 child: MaterialButton( 68 child: MaterialButton(
63 - onPressed: () => Navigator.of(  
64 - context)  
65 - .popUntil((route) =>  
66 - route.settings.name == '/'), 69 + onPressed: () => Navigator.of(context).popUntil(
  70 + (route) => route.settings.name == '/'),
67 child: Text('Pop back home'), 71 child: Text('Pop back home'),
68 ), 72 ),
69 ) 73 )
70 ], 74 ],
71 ), 75 ),
72 - )),  
73 ), 76 ),
74 - child: Center(child: Container()),  
75 ), 77 ),
76 ), 78 ),
  79 + child: Center(
  80 + child: Container(),
77 ), 81 ),
78 ), 82 ),
79 - settings: settings); 83 + ),
  84 + ),
  85 + ),
  86 + settings: settings,
  87 + );
80 }, 88 },
81 debugShowCheckedModeBanner: false, 89 debugShowCheckedModeBanner: false,
82 ); 90 );
@@ -98,7 +106,6 @@ class _MyHomePageState extends State<MyHomePage> { @@ -98,7 +106,6 @@ class _MyHomePageState extends State<MyHomePage> {
98 return Material( 106 return Material(
99 child: Scaffold( 107 child: Scaffold(
100 body: CupertinoPageScaffold( 108 body: CupertinoPageScaffold(
101 - backgroundColor: Colors.white,  
102 navigationBar: CupertinoNavigationBar( 109 navigationBar: CupertinoNavigationBar(
103 transitionBetweenRoutes: false, 110 transitionBetweenRoutes: false,
104 middle: Text('iOS13 Modal Presentation'), 111 middle: Text('iOS13 Modal Presentation'),
@@ -129,7 +136,8 @@ class _MyHomePageState extends State<MyHomePage> { @@ -129,7 +136,8 @@ class _MyHomePageState extends State<MyHomePage> {
129 context: context, 136 context: context,
130 backgroundColor: Colors.transparent, 137 backgroundColor: Colors.transparent,
131 builder: (context) => ModalFit(), 138 builder: (context) => ModalFit(),
132 - )), 139 + ),
  140 + ),
133 ListTile( 141 ListTile(
134 title: Text('Bar Modal'), 142 title: Text('Bar Modal'),
135 onTap: () => showBarModalBottomSheet( 143 onTap: () => showBarModalBottomSheet(
@@ -137,7 +145,8 @@ class _MyHomePageState extends State<MyHomePage> { @@ -137,7 +145,8 @@ class _MyHomePageState extends State<MyHomePage> {
137 context: context, 145 context: context,
138 backgroundColor: Colors.transparent, 146 backgroundColor: Colors.transparent,
139 builder: (context) => ModalInsideModal(), 147 builder: (context) => ModalInsideModal(),
140 - )), 148 + ),
  149 + ),
141 ListTile( 150 ListTile(
142 title: Text('Avatar Modal'), 151 title: Text('Avatar Modal'),
143 onTap: () => showAvatarModalBottomSheet( 152 onTap: () => showAvatarModalBottomSheet(
@@ -145,13 +154,15 @@ class _MyHomePageState extends State<MyHomePage> { @@ -145,13 +154,15 @@ class _MyHomePageState extends State<MyHomePage> {
145 context: context, 154 context: context,
146 backgroundColor: Colors.transparent, 155 backgroundColor: Colors.transparent,
147 builder: (context) => ModalInsideModal(), 156 builder: (context) => ModalInsideModal(),
148 - )), 157 + ),
  158 + ),
149 ListTile( 159 ListTile(
150 title: Text('Float Modal'), 160 title: Text('Float Modal'),
151 onTap: () => showFloatingModalBottomSheet( 161 onTap: () => showFloatingModalBottomSheet(
152 context: context, 162 context: context,
153 builder: (context) => ModalFit(), 163 builder: (context) => ModalFit(),
154 - )), 164 + ),
  165 + ),
155 ListTile( 166 ListTile(
156 title: Text('Cupertino Modal fit'), 167 title: Text('Cupertino Modal fit'),
157 onTap: () => showCupertinoModalBottomSheet( 168 onTap: () => showCupertinoModalBottomSheet(
@@ -159,7 +170,8 @@ class _MyHomePageState extends State<MyHomePage> { @@ -159,7 +170,8 @@ class _MyHomePageState extends State<MyHomePage> {
159 context: context, 170 context: context,
160 backgroundColor: Colors.transparent, 171 backgroundColor: Colors.transparent,
161 builder: (context) => ModalFit(), 172 builder: (context) => ModalFit(),
162 - )), 173 + ),
  174 + ),
163 section('COMPLEX CASES'), 175 section('COMPLEX CASES'),
164 ListTile( 176 ListTile(
165 title: Text('Cupertino Small Modal forced to expand'), 177 title: Text('Cupertino Small Modal forced to expand'),
@@ -175,9 +187,9 @@ class _MyHomePageState extends State<MyHomePage> { @@ -175,9 +187,9 @@ class _MyHomePageState extends State<MyHomePage> {
175 expand: true, 187 expand: true,
176 context: context, 188 context: context,
177 backgroundColor: Colors.transparent, 189 backgroundColor: Colors.transparent,
178 - builder: (context) =>  
179 - ModalInsideModal(reverse: true),  
180 - )), 190 + builder: (context) => ModalInsideModal(reverse: true),
  191 + ),
  192 + ),
181 ListTile( 193 ListTile(
182 title: Text('Cupertino Modal inside modal'), 194 title: Text('Cupertino Modal inside modal'),
183 onTap: () => showCupertinoModalBottomSheet( 195 onTap: () => showCupertinoModalBottomSheet(
@@ -185,7 +197,8 @@ class _MyHomePageState extends State<MyHomePage> { @@ -185,7 +197,8 @@ class _MyHomePageState extends State<MyHomePage> {
185 context: context, 197 context: context,
186 backgroundColor: Colors.transparent, 198 backgroundColor: Colors.transparent,
187 builder: (context) => ModalInsideModal(), 199 builder: (context) => ModalInsideModal(),
188 - )), 200 + ),
  201 + ),
189 ListTile( 202 ListTile(
190 title: Text('Cupertino Modal with inside navigation'), 203 title: Text('Cupertino Modal with inside navigation'),
191 onTap: () => showCupertinoModalBottomSheet( 204 onTap: () => showCupertinoModalBottomSheet(
@@ -202,7 +215,8 @@ class _MyHomePageState extends State<MyHomePage> { @@ -202,7 +215,8 @@ class _MyHomePageState extends State<MyHomePage> {
202 context: context, 215 context: context,
203 backgroundColor: Colors.transparent, 216 backgroundColor: Colors.transparent,
204 builder: (context) => ComplexModal(), 217 builder: (context) => ComplexModal(),
205 - )), 218 + ),
  219 + ),
206 ListTile( 220 ListTile(
207 title: Text('Modal with WillPopScope'), 221 title: Text('Modal with WillPopScope'),
208 onTap: () => showCupertinoModalBottomSheet( 222 onTap: () => showCupertinoModalBottomSheet(
@@ -210,21 +224,24 @@ class _MyHomePageState extends State<MyHomePage> { @@ -210,21 +224,24 @@ class _MyHomePageState extends State<MyHomePage> {
210 context: context, 224 context: context,
211 backgroundColor: Colors.transparent, 225 backgroundColor: Colors.transparent,
212 builder: (context) => ModalWillScope(), 226 builder: (context) => ModalWillScope(),
213 - )), 227 + ),
  228 + ),
214 ListTile( 229 ListTile(
215 title: Text('Modal with Nested Scroll'), 230 title: Text('Modal with Nested Scroll'),
216 onTap: () => showCupertinoModalBottomSheet( 231 onTap: () => showCupertinoModalBottomSheet(
217 expand: true, 232 expand: true,
218 context: context, 233 context: context,
219 builder: (context) => NestedScrollModal(), 234 builder: (context) => NestedScrollModal(),
220 - )), 235 + ),
  236 + ),
221 ListTile( 237 ListTile(
222 title: Text('Modal with PageView'), 238 title: Text('Modal with PageView'),
223 onTap: () => showBarModalBottomSheet( 239 onTap: () => showBarModalBottomSheet(
224 expand: true, 240 expand: true,
225 context: context, 241 context: context,
226 builder: (context) => ModalWithPageView(), 242 builder: (context) => ModalWithPageView(),
227 - )), 243 + ),
  244 + ),
228 SizedBox( 245 SizedBox(
229 height: 60, 246 height: 60,
230 ) 247 )
@@ -244,6 +261,7 @@ class _MyHomePageState extends State<MyHomePage> { @@ -244,6 +261,7 @@ class _MyHomePageState extends State<MyHomePage> {
244 child: Text( 261 child: Text(
245 title, 262 title,
246 style: Theme.of(context).textTheme.caption, 263 style: Theme.of(context).textTheme.caption,
247 - )); 264 + ),
  265 + );
248 } 266 }
249 } 267 }