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 448 additions and 334 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(  
13 - child: Center(  
14 - child: Hero(  
15 - tag: 'image',  
16 - child: Image.asset('assets/demo_image.jpeg'),  
17 - )),  
18 - ),  
19 - bottomNavigationBar: bottomAppBar(context));  
20 - } 10 + final baseTextStyle = CupertinoTheme.of(context).textTheme.textStyle;
21 11
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 - ),  
31 - trailing: Text(  
32 - 'Edit',  
33 - style: TextStyle(  
34 - color: CupertinoTheme.of(context).primaryColor, 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 ), 35 ),
36 ), 36 ),
  37 + child: Column(
  38 + children: [
  39 + Expanded(
  40 + child: Center(
  41 + child: Hero(
  42 + tag: 'image',
  43 + child: Image.asset('assets/demo_image.jpeg'),
  44 + ),
  45 + ),
  46 + ),
  47 + bottomAppBar(context),
  48 + ],
  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>[
@@ -76,182 +98,250 @@ class PhotoShareBottomSheet extends StatelessWidget { @@ -76,182 +98,250 @@ class PhotoShareBottomSheet extends StatelessWidget {
76 @override 98 @override
77 Widget build(BuildContext context) { 99 Widget build(BuildContext context) {
78 return BackdropFilter( 100 return BackdropFilter(
79 - filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),  
80 - child: Material(  
81 - color: Colors.transparent,  
82 - child: Scaffold(  
83 - backgroundColor: CupertinoTheme.of(context)  
84 - .scaffoldBackgroundColor  
85 - .withOpacity(0.95),  
86 - extendBodyBehindAppBar: true,  
87 - appBar: appBar(context),  
88 - body: CustomScrollView(  
89 - physics: ClampingScrollPhysics(),  
90 - controller: ModalScrollController.of(context),  
91 - slivers: <Widget>[  
92 - SliverSafeArea(  
93 - bottom: false,  
94 - sliver: SliverToBoxAdapter(  
95 - child: Container(  
96 - height: 318,  
97 - child: ListView(  
98 - padding: EdgeInsets.all(12).copyWith(  
99 - right:  
100 - MediaQuery.of(context).size.width / 2 - 100),  
101 - reverse: true,  
102 - scrollDirection: Axis.horizontal,  
103 - physics: PageScrollPhysics(), 101 + filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),
  102 + child: Material(
  103 + color: Colors.transparent,
  104 + child: Scaffold(
  105 + backgroundColor: CupertinoTheme.of(context).scaffoldBackgroundColor,
  106 + extendBodyBehindAppBar: true,
  107 + appBar: appBar(context),
  108 + body: CustomScrollView(
  109 + physics: ClampingScrollPhysics(),
  110 + controller: ModalScrollController.of(context),
  111 + slivers: <Widget>[
  112 + SliverSafeArea(
  113 + bottom: false,
  114 + sliver: SliverToBoxAdapter(
  115 + child: Container(
  116 + height: 318,
  117 + child: ListView(
  118 + padding: EdgeInsets.all(12).copyWith(
  119 + right: MediaQuery.of(context).size.width / 2 - 100),
  120 + reverse: true,
  121 + scrollDirection: Axis.horizontal,
  122 + physics: PageScrollPhysics(),
  123 + children: <Widget>[
  124 + Padding(
  125 + padding: EdgeInsets.symmetric(horizontal: 6),
  126 + child: ClipRRect(
  127 + borderRadius: BorderRadius.circular(12),
  128 + child: Hero(
  129 + tag: 'image',
  130 + child: Image.asset('assets/demo_image.jpeg'),
  131 + ),
  132 + ),
  133 + ),
  134 + Padding(
  135 + padding: EdgeInsets.symmetric(horizontal: 6),
  136 + child: ClipRRect(
  137 + borderRadius: BorderRadius.circular(12),
  138 + child: Image.asset('assets/demo_image.jpeg'),
  139 + ),
  140 + ),
  141 + Padding(
  142 + padding: EdgeInsets.symmetric(horizontal: 6),
  143 + child: ClipRRect(
  144 + borderRadius: BorderRadius.circular(12),
  145 + child: Image.asset('assets/demo_image.jpeg'),
  146 + ),
  147 + ),
  148 + ],
  149 + ),
  150 + ),
  151 + ),
  152 + ),
  153 + SliverToBoxAdapter(
  154 + child: Divider(height: 1),
  155 + ),
  156 + sliverContactsSection(context),
  157 + SliverToBoxAdapter(
  158 + child: Divider(height: 1),
  159 + ),
  160 + SliverToBoxAdapter(
  161 + child: Container(
  162 + height: 120,
  163 + padding: EdgeInsets.only(top: 12),
  164 + child: ListView.builder(
  165 + padding: EdgeInsets.all(10),
  166 + scrollDirection: Axis.horizontal,
  167 + itemBuilder: (context, index) {
  168 + final app = apps[index];
  169 + return Container(
  170 + width: 72,
  171 + margin: EdgeInsets.symmetric(horizontal: 4),
  172 + child: Column(
104 children: <Widget>[ 173 children: <Widget>[
105 - Padding(  
106 - padding: EdgeInsets.symmetric(horizontal: 6),  
107 - child: ClipRRect(  
108 - borderRadius: BorderRadius.circular(12),  
109 - child: Hero(  
110 - tag: 'image',  
111 - child:  
112 - Image.asset('assets/demo_image.jpeg'),  
113 - ))),  
114 - Padding(  
115 - padding: EdgeInsets.symmetric(horizontal: 6), 174 + if (app.imageUrl != null)
  175 + Material(
116 child: ClipRRect( 176 child: ClipRRect(
117 - borderRadius: BorderRadius.circular(12),  
118 - child: Image.asset('assets/demo_image.jpeg'),  
119 - )),  
120 - Padding(  
121 - padding: EdgeInsets.symmetric(horizontal: 6),  
122 - child: ClipRRect(  
123 - borderRadius: BorderRadius.circular(12),  
124 - child: Image.asset('assets/demo_image.jpeg'),  
125 - )), 177 + child: Container(
  178 + height: 60,
  179 + width: 60,
  180 + decoration: BoxDecoration(
  181 + image: DecorationImage(
  182 + image: AssetImage(app.imageUrl!),
  183 + fit: BoxFit.cover),
  184 + color: Colors.white,
  185 + borderRadius:
  186 + BorderRadius.circular(15)),
  187 + ),
  188 + ),
  189 + shape: RoundedRectangleBorder(
  190 + borderRadius: BorderRadius.circular(15),
  191 + ),
  192 + elevation: 12,
  193 + shadowColor: Colors.black12,
  194 + ),
  195 + SizedBox(height: 8),
  196 + Text(
  197 + app.title,
  198 + maxLines: 2,
  199 + textAlign: TextAlign.center,
  200 + style: TextStyle(fontSize: 11),
  201 + )
126 ], 202 ],
127 ), 203 ),
  204 + );
  205 + },
  206 + itemCount: apps.length,
  207 + ),
  208 + ),
  209 + ),
  210 + SliverPadding(
  211 + padding: EdgeInsets.symmetric(horizontal: 18, vertical: 6),
  212 + sliver: SliverList(
  213 + delegate: SliverChildListDelegate.fixed(
  214 + List<Widget>.from(
  215 + actions.map(
  216 + (action) => Container(
  217 + padding: EdgeInsets.symmetric(
  218 + vertical: 16, horizontal: 16),
  219 + child: Text(
  220 + action.title,
  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,
  235 + height: 1,
  236 + color: CupertinoColors.separator.resolveFrom(context),
128 ), 237 ),
129 ), 238 ),
130 ), 239 ),
131 - SliverToBoxAdapter(  
132 - child: Divider(height: 1),  
133 - ),  
134 - sliverContactsSection(context),  
135 - SliverToBoxAdapter(  
136 - child: Divider(height: 1), 240 + ),
  241 + ),
  242 + SliverPadding(
  243 + padding: EdgeInsets.symmetric(horizontal: 18, vertical: 6),
  244 + sliver: SliverList(
  245 + delegate: SliverChildListDelegate.fixed(
  246 + List<Widget>.from(
  247 + actions1.map(
  248 + (action) => Container(
  249 + padding: EdgeInsets.symmetric(
  250 + vertical: 16, horizontal: 16),
  251 + child: Text(
  252 + action.title,
  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,
  280 + height: 1,
  281 + color: CupertinoColors.separator.resolveFrom(context),
  282 + ),
  283 + ),
137 ), 284 ),
138 - SliverToBoxAdapter(  
139 - child: Container(  
140 - height: 120,  
141 - padding: EdgeInsets.only(top: 12),  
142 - child: ListView.builder(  
143 - padding: EdgeInsets.all(10),  
144 - scrollDirection: Axis.horizontal,  
145 - itemBuilder: (context, index) {  
146 - final app = apps[index];  
147 - return Container(  
148 - width: 72,  
149 - margin: EdgeInsets.symmetric(horizontal: 4),  
150 - child: Column(  
151 - children: <Widget>[  
152 - if (app.imageUrl != null)  
153 - Material(  
154 - child: ClipRRect(  
155 - child: Container(  
156 - height: 60,  
157 - width: 60,  
158 - decoration: BoxDecoration(  
159 - image: DecorationImage(  
160 - image:  
161 - AssetImage(app.imageUrl!),  
162 - fit: BoxFit.cover),  
163 - color: Colors.white,  
164 - borderRadius:  
165 - BorderRadius.circular(15)),  
166 - ),  
167 - ),  
168 - shape: RoundedRectangleBorder(  
169 - borderRadius:  
170 - BorderRadius.circular(15)),  
171 - elevation: 12,  
172 - shadowColor: Colors.black12,  
173 - ),  
174 - SizedBox(height: 8),  
175 - Text(  
176 - app.title,  
177 - maxLines: 2,  
178 - textAlign: TextAlign.center,  
179 - style: TextStyle(fontSize: 11),  
180 - )  
181 - ],  
182 - ));  
183 - },  
184 - itemCount: apps.length, 285 + ),
  286 + ),
  287 + SliverPadding(
  288 + padding: EdgeInsets.symmetric(horizontal: 18, vertical: 4),
  289 + sliver: SliverList(
  290 + delegate: SliverChildListDelegate.fixed(
  291 + List<Widget>.from(
  292 + actions2.map(
  293 + (action) => Container(
  294 + padding: EdgeInsets.symmetric(
  295 + vertical: 16, horizontal: 16),
  296 + child: Text(
  297 + action.title,
  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,
  325 + height: 1,
  326 + color: CupertinoColors.separator.resolveFrom(context),
185 ), 327 ),
186 ), 328 ),
187 ), 329 ),
188 - SliverPadding(  
189 - padding:  
190 - EdgeInsets.symmetric(horizontal: 18, vertical: 6),  
191 - sliver: SliverList(  
192 - delegate: SliverChildListDelegate.fixed(  
193 - List<Widget>.from(actions.map(  
194 - (action) => Container(  
195 - padding: EdgeInsets.symmetric(  
196 - vertical: 16, horizontal: 16),  
197 - child: Text(  
198 - action.title,  
199 - style: CupertinoTheme.of(context)  
200 - .textTheme  
201 - .textStyle,  
202 - )),  
203 - )).addItemInBetween(Divider(  
204 - height: 1,  
205 - ))),  
206 - )),  
207 - SliverPadding(  
208 - padding:  
209 - EdgeInsets.symmetric(horizontal: 18, vertical: 6),  
210 - sliver: SliverList(  
211 - delegate: SliverChildListDelegate.fixed(  
212 - List<Widget>.from(actions1.map(  
213 - (action) => Container(  
214 - padding: EdgeInsets.symmetric(  
215 - vertical: 16, horizontal: 16),  
216 - child: Text(  
217 - action.title,  
218 - style: CupertinoTheme.of(context)  
219 - .textTheme  
220 - .textStyle,  
221 - )),  
222 - )).addItemInBetween(Divider(  
223 - height: 1,  
224 - ))),  
225 - )),  
226 - SliverPadding(  
227 - padding:  
228 - EdgeInsets.symmetric(horizontal: 18, vertical: 4),  
229 - sliver: SliverList(  
230 - delegate: SliverChildListDelegate.fixed(  
231 - List<Widget>.from(actions2.map(  
232 - (action) => Container(  
233 - padding: EdgeInsets.symmetric(  
234 - vertical: 16, horizontal: 16),  
235 - child: Text(  
236 - action.title,  
237 - style: CupertinoTheme.of(context)  
238 - .textTheme  
239 - .textStyle,  
240 - )),  
241 - )).addItemInBetween(Divider(  
242 - height: 1,  
243 - ))),  
244 - )),  
245 - SliverSafeArea(  
246 - top: false,  
247 - sliver: SliverPadding(  
248 - padding: EdgeInsets.only(  
249 - bottom: 20,  
250 - )),  
251 - )  
252 - ], 330 + ),
253 ), 331 ),
254 - ))); 332 + SliverSafeArea(
  333 + top: false,
  334 + sliver: SliverPadding(
  335 + padding: EdgeInsets.only(
  336 + bottom: 20,
  337 + ),
  338 + ),
  339 + )
  340 + ],
  341 + ),
  342 + ),
  343 + ),
  344 + );
255 } 345 }
256 346
257 Widget sliverContactsSection(BuildContext context) { 347 Widget sliverContactsSection(BuildContext context) {
@@ -317,28 +407,29 @@ class PhotoShareBottomSheet extends StatelessWidget { @@ -317,28 +407,29 @@ class PhotoShareBottomSheet extends StatelessWidget {
317 children: <Widget>[ 407 children: <Widget>[
318 SizedBox(width: 18), 408 SizedBox(width: 18),
319 ClipRRect( 409 ClipRRect(
320 - borderRadius: BorderRadius.circular(4),  
321 - child: Image.asset(  
322 - 'assets/demo_image.jpeg',  
323 - fit: BoxFit.cover,  
324 - height: 40,  
325 - width: 40,  
326 - )), 410 + borderRadius: BorderRadius.circular(4),
  411 + child: Image.asset(
  412 + 'assets/demo_image.jpeg',
  413 + fit: BoxFit.cover,
  414 + height: 40,
  415 + width: 40,
  416 + ),
  417 + ),
327 SizedBox(width: 12), 418 SizedBox(width: 12),
328 Expanded( 419 Expanded(
329 - child: Column(  
330 - mainAxisAlignment: MainAxisAlignment.center,  
331 - crossAxisAlignment: CrossAxisAlignment.stretch,  
332 - children: <Widget>[  
333 - Text(  
334 - '1 Photo selected',  
335 - style: CupertinoTheme.of(context)  
336 - .textTheme  
337 - .textStyle  
338 - .copyWith(fontWeight: FontWeight.w600),  
339 - ),  
340 - SizedBox(height: 4),  
341 - Row( 420 + child: Column(
  421 + mainAxisAlignment: MainAxisAlignment.center,
  422 + crossAxisAlignment: CrossAxisAlignment.stretch,
  423 + children: <Widget>[
  424 + Text(
  425 + '1 Photo selected',
  426 + style: CupertinoTheme.of(context)
  427 + .textTheme
  428 + .textStyle
  429 + .copyWith(fontWeight: FontWeight.w600),
  430 + ),
  431 + SizedBox(height: 4),
  432 + Row(
342 crossAxisAlignment: CrossAxisAlignment.baseline, 433 crossAxisAlignment: CrossAxisAlignment.baseline,
343 textBaseline: TextBaseline.alphabetic, 434 textBaseline: TextBaseline.alphabetic,
344 children: <Widget>[ 435 children: <Widget>[
@@ -348,8 +439,9 @@ class PhotoShareBottomSheet extends StatelessWidget { @@ -348,8 +439,9 @@ class PhotoShareBottomSheet extends StatelessWidget {
348 .textTheme 439 .textTheme
349 .actionTextStyle 440 .actionTextStyle
350 .copyWith( 441 .copyWith(
351 - fontSize: 14,  
352 - fontWeight: FontWeight.normal), 442 + fontSize: 14,
  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 - ],  
363 - )), 453 + ],
  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,9 +24,16 @@ class MyApp extends StatelessWidget { @@ -24,9 +24,16 @@ 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(
29 - child: child!, 30 + child: CupertinoTheme(
  31 + data: CupertinoThemeData(
  32 + brightness: Theme.of(context).brightness,
  33 + scaffoldBackgroundColor: CupertinoColors.systemBackground,
  34 + ),
  35 + child: child!,
  36 + ),
30 ), 37 ),
31 onGenerateRoute: (RouteSettings settings) { 38 onGenerateRoute: (RouteSettings settings) {
32 switch (settings.name) { 39 switch (settings.name) {
@@ -36,47 +43,48 @@ class MyApp extends StatelessWidget { @@ -36,47 +43,48 @@ class MyApp extends StatelessWidget {
36 settings: settings); 43 settings: settings);
37 } 44 }
38 return MaterialPageRoute( 45 return MaterialPageRoute(
39 - builder: (context) => Scaffold(  
40 - body: CupertinoScaffold(  
41 - body: Builder(  
42 - builder: (context) => CupertinoPageScaffold(  
43 - backgroundColor: Colors.white,  
44 - navigationBar: CupertinoNavigationBar(  
45 - transitionBetweenRoutes: false,  
46 - middle: Text('Normal Navigation Presentation'),  
47 - trailing: GestureDetector(  
48 - child: Icon(Icons.arrow_upward),  
49 - onTap: () => CupertinoScaffold  
50 - .showCupertinoModalBottomSheet(  
51 - expand: true,  
52 - context: context,  
53 - backgroundColor: Colors.transparent,  
54 - builder: (context) => Stack(  
55 - children: <Widget>[  
56 - ModalWithScroll(),  
57 - Positioned(  
58 - height: 40,  
59 - left: 40,  
60 - right: 40,  
61 - bottom: 20,  
62 - child: MaterialButton(  
63 - onPressed: () => Navigator.of(  
64 - context)  
65 - .popUntil((route) =>  
66 - route.settings.name == '/'),  
67 - child: Text('Pop back home'),  
68 - ),  
69 - )  
70 - ],  
71 - ),  
72 - )), 46 + builder: (context) => Scaffold(
  47 + body: CupertinoScaffold(
  48 + body: Builder(
  49 + builder: (context) => CupertinoPageScaffold(
  50 + navigationBar: CupertinoNavigationBar(
  51 + transitionBetweenRoutes: false,
  52 + middle: Text('Normal Navigation Presentation'),
  53 + trailing: GestureDetector(
  54 + child: Icon(Icons.arrow_upward),
  55 + onTap: () =>
  56 + CupertinoScaffold.showCupertinoModalBottomSheet(
  57 + expand: true,
  58 + context: context,
  59 + backgroundColor: Colors.transparent,
  60 + builder: (context) => Stack(
  61 + children: <Widget>[
  62 + ModalWithScroll(),
  63 + Positioned(
  64 + height: 40,
  65 + left: 40,
  66 + right: 40,
  67 + bottom: 20,
  68 + child: MaterialButton(
  69 + onPressed: () => Navigator.of(context).popUntil(
  70 + (route) => route.settings.name == '/'),
  71 + child: Text('Pop back home'),
  72 + ),
  73 + )
  74 + ],
73 ), 75 ),
74 - child: Center(child: Container()),  
75 ), 76 ),
76 ), 77 ),
77 ), 78 ),
  79 + child: Center(
  80 + child: Container(),
  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'),
@@ -123,43 +130,48 @@ class _MyHomePageState extends State<MyHomePage> { @@ -123,43 +130,48 @@ class _MyHomePageState extends State<MyHomePage> {
123 builder: (context) => CupertinoSharePage()))), 130 builder: (context) => CupertinoSharePage()))),
124 section('STYLES'), 131 section('STYLES'),
125 ListTile( 132 ListTile(
126 - title: Text('Material fit'),  
127 - onTap: () => showMaterialModalBottomSheet(  
128 - expand: false,  
129 - context: context,  
130 - backgroundColor: Colors.transparent,  
131 - builder: (context) => ModalFit(),  
132 - )), 133 + title: Text('Material fit'),
  134 + onTap: () => showMaterialModalBottomSheet(
  135 + expand: false,
  136 + context: context,
  137 + backgroundColor: Colors.transparent,
  138 + builder: (context) => ModalFit(),
  139 + ),
  140 + ),
133 ListTile( 141 ListTile(
134 - title: Text('Bar Modal'),  
135 - onTap: () => showBarModalBottomSheet(  
136 - expand: true,  
137 - context: context,  
138 - backgroundColor: Colors.transparent,  
139 - builder: (context) => ModalInsideModal(),  
140 - )), 142 + title: Text('Bar Modal'),
  143 + onTap: () => showBarModalBottomSheet(
  144 + expand: true,
  145 + context: context,
  146 + backgroundColor: Colors.transparent,
  147 + builder: (context) => ModalInsideModal(),
  148 + ),
  149 + ),
141 ListTile( 150 ListTile(
142 - title: Text('Avatar Modal'),  
143 - onTap: () => showAvatarModalBottomSheet(  
144 - expand: true,  
145 - context: context,  
146 - backgroundColor: Colors.transparent,  
147 - builder: (context) => ModalInsideModal(),  
148 - )), 151 + title: Text('Avatar Modal'),
  152 + onTap: () => showAvatarModalBottomSheet(
  153 + expand: true,
  154 + context: context,
  155 + backgroundColor: Colors.transparent,
  156 + builder: (context) => ModalInsideModal(),
  157 + ),
  158 + ),
149 ListTile( 159 ListTile(
150 - title: Text('Float Modal'),  
151 - onTap: () => showFloatingModalBottomSheet(  
152 - context: context,  
153 - builder: (context) => ModalFit(),  
154 - )), 160 + title: Text('Float Modal'),
  161 + onTap: () => showFloatingModalBottomSheet(
  162 + context: context,
  163 + builder: (context) => ModalFit(),
  164 + ),
  165 + ),
155 ListTile( 166 ListTile(
156 - title: Text('Cupertino Modal fit'),  
157 - onTap: () => showCupertinoModalBottomSheet(  
158 - expand: false,  
159 - context: context,  
160 - backgroundColor: Colors.transparent,  
161 - builder: (context) => ModalFit(),  
162 - )), 167 + title: Text('Cupertino Modal fit'),
  168 + onTap: () => showCupertinoModalBottomSheet(
  169 + expand: false,
  170 + context: context,
  171 + backgroundColor: Colors.transparent,
  172 + builder: (context) => ModalFit(),
  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'),
@@ -170,22 +182,23 @@ class _MyHomePageState extends State<MyHomePage> { @@ -170,22 +182,23 @@ class _MyHomePageState extends State<MyHomePage> {
170 builder: (context) => ModalFit(), 182 builder: (context) => ModalFit(),
171 )), 183 )),
172 ListTile( 184 ListTile(
173 - title: Text('Reverse list'),  
174 - onTap: () => showBarModalBottomSheet(  
175 - expand: true,  
176 - context: context,  
177 - backgroundColor: Colors.transparent,  
178 - builder: (context) =>  
179 - ModalInsideModal(reverse: true),  
180 - )), 185 + title: Text('Reverse list'),
  186 + onTap: () => showBarModalBottomSheet(
  187 + expand: true,
  188 + context: context,
  189 + backgroundColor: Colors.transparent,
  190 + builder: (context) => ModalInsideModal(reverse: true),
  191 + ),
  192 + ),
181 ListTile( 193 ListTile(
182 - title: Text('Cupertino Modal inside modal'),  
183 - onTap: () => showCupertinoModalBottomSheet(  
184 - expand: true,  
185 - context: context,  
186 - backgroundColor: Colors.transparent,  
187 - builder: (context) => ModalInsideModal(),  
188 - )), 194 + title: Text('Cupertino Modal inside modal'),
  195 + onTap: () => showCupertinoModalBottomSheet(
  196 + expand: true,
  197 + context: context,
  198 + backgroundColor: Colors.transparent,
  199 + builder: (context) => ModalInsideModal(),
  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(
@@ -195,36 +208,40 @@ class _MyHomePageState extends State<MyHomePage> { @@ -195,36 +208,40 @@ class _MyHomePageState extends State<MyHomePage> {
195 builder: (context) => ModalWithNavigator(), 208 builder: (context) => ModalWithNavigator(),
196 )), 209 )),
197 ListTile( 210 ListTile(
198 - title:  
199 - Text('Cupertino Navigator + Scroll + WillPopScope'),  
200 - onTap: () => showCupertinoModalBottomSheet(  
201 - expand: true,  
202 - context: context,  
203 - backgroundColor: Colors.transparent,  
204 - builder: (context) => ComplexModal(),  
205 - )), 211 + title:
  212 + Text('Cupertino Navigator + Scroll + WillPopScope'),
  213 + onTap: () => showCupertinoModalBottomSheet(
  214 + expand: true,
  215 + context: context,
  216 + backgroundColor: Colors.transparent,
  217 + builder: (context) => ComplexModal(),
  218 + ),
  219 + ),
206 ListTile( 220 ListTile(
207 - title: Text('Modal with WillPopScope'),  
208 - onTap: () => showCupertinoModalBottomSheet(  
209 - expand: true,  
210 - context: context,  
211 - backgroundColor: Colors.transparent,  
212 - builder: (context) => ModalWillScope(),  
213 - )), 221 + title: Text('Modal with WillPopScope'),
  222 + onTap: () => showCupertinoModalBottomSheet(
  223 + expand: true,
  224 + context: context,
  225 + backgroundColor: Colors.transparent,
  226 + builder: (context) => ModalWillScope(),
  227 + ),
  228 + ),
214 ListTile( 229 ListTile(
215 - title: Text('Modal with Nested Scroll'),  
216 - onTap: () => showCupertinoModalBottomSheet(  
217 - expand: true,  
218 - context: context,  
219 - builder: (context) => NestedScrollModal(),  
220 - )), 230 + title: Text('Modal with Nested Scroll'),
  231 + onTap: () => showCupertinoModalBottomSheet(
  232 + expand: true,
  233 + context: context,
  234 + builder: (context) => NestedScrollModal(),
  235 + ),
  236 + ),
221 ListTile( 237 ListTile(
222 - title: Text('Modal with PageView'),  
223 - onTap: () => showBarModalBottomSheet(  
224 - expand: true,  
225 - context: context,  
226 - builder: (context) => ModalWithPageView(),  
227 - )), 238 + title: Text('Modal with PageView'),
  239 + onTap: () => showBarModalBottomSheet(
  240 + expand: true,
  241 + context: context,
  242 + builder: (context) => ModalWithPageView(),
  243 + ),
  244 + ),
228 SizedBox( 245 SizedBox(
229 height: 60, 246 height: 60,
230 ) 247 )
@@ -240,10 +257,11 @@ class _MyHomePageState extends State<MyHomePage> { @@ -240,10 +257,11 @@ class _MyHomePageState extends State<MyHomePage> {
240 257
241 Widget section(String title) { 258 Widget section(String title) {
242 return Padding( 259 return Padding(
243 - padding: EdgeInsets.fromLTRB(16, 20, 16, 8),  
244 - child: Text(  
245 - title,  
246 - style: Theme.of(context).textTheme.caption,  
247 - )); 260 + padding: EdgeInsets.fromLTRB(16, 20, 16, 8),
  261 + child: Text(
  262 + title,
  263 + style: Theme.of(context).textTheme.caption,
  264 + ),
  265 + );
248 } 266 }
249 } 267 }