flutter_package / modal_bottom_sheet

Go to a project
Toggle navigation Toggle navigation pinning
Jaime Blasco
Committed by GitHub
8ec96679 2 parents a63a1d89 094a626b

Merge pull request #232 from bierbaumtim/example-darkmode 

Darkmode support for example
Inline Side-by-side
Showing 6 changed files with 503 additions and 381 deletions
@@ -26,7 +26,7 @@ apply plugin: 'kotlin-android' @@ -26,7 +26,7 @@ apply plugin: 'kotlin-android'
26 apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle" 26 apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
27 27
28 android { 28 android {
29 - compileSdkVersion 30 29 + compileSdkVersion 31
30 30
31 sourceSets { 31 sourceSets {
32 main.java.srcDirs += 'src/main/kotlin' 32 main.java.srcDirs += 'src/main/kotlin'
@@ -36,7 +36,7 @@ android { @@ -36,7 +36,7 @@ android {
36 // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html). 36 // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
37 applicationId "com.example.example" 37 applicationId "com.example.example"
38 minSdkVersion 16 38 minSdkVersion 16
39 - targetSdkVersion 30 39 + targetSdkVersion 31
40 versionCode flutterVersionCode.toInteger() 40 versionCode flutterVersionCode.toInteger()
41 versionName flutterVersionName 41 versionName flutterVersionName
42 } 42 }
@@ -9,7 +9,8 @@ @@ -9,7 +9,8 @@
9 android:theme="@style/LaunchTheme" 9 android:theme="@style/LaunchTheme"
10 android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" 10 android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
11 android:hardwareAccelerated="true" 11 android:hardwareAccelerated="true"
12 - android:windowSoftInputMode="adjustResize"> 12 + android:windowSoftInputMode="adjustResize"
  13 + android:exported="true">
13 <!-- Specifies an Android theme to apply to this Activity as soon as 14 <!-- Specifies an Android theme to apply to this Activity as soon as
14 the Android process has started. This theme is visible to the user 15 the Android process has started. This theme is visible to the user
15 while the Flutter UI initializes. After that, this theme continues 16 while the Flutter UI initializes. After that, this theme continues
1 buildscript { 1 buildscript {
2 - ext.kotlin_version = '1.3.50' 2 + ext.kotlin_version = '1.6.10'
3 repositories { 3 repositories {
4 google() 4 google()
5 jcenter() 5 jcenter()
@@ -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 }
@@ -17,52 +17,59 @@ class AvatarBottomSheet extends StatelessWidget { @@ -17,52 +17,59 @@ class AvatarBottomSheet extends StatelessWidget {
17 return AnnotatedRegion<SystemUiOverlayStyle>( 17 return AnnotatedRegion<SystemUiOverlayStyle>(
18 value: SystemUiOverlayStyle.light, 18 value: SystemUiOverlayStyle.light,
19 child: Column( 19 child: Column(
20 - mainAxisSize: MainAxisSize.min,  
21 - crossAxisAlignment: CrossAxisAlignment.start,  
22 - children: [  
23 - SizedBox(height: 12),  
24 - SafeArea(  
25 - bottom: false,  
26 - child: AnimatedBuilder(  
27 - animation: animation,  
28 - builder: (context, child) => Transform.translate(  
29 - offset: Offset(0, (1 - animation.value) * 100),  
30 - child: Opacity(  
31 - child: child,  
32 - opacity: max(0, animation.value * 2 - 1))),  
33 - child: Row(  
34 - children: <Widget>[  
35 - SizedBox(width: 20),  
36 - CircleAvatar(  
37 - child: Text('JB'),  
38 - radius: 32,  
39 - ),  
40 - ], 20 + mainAxisSize: MainAxisSize.min,
  21 + crossAxisAlignment: CrossAxisAlignment.start,
  22 + children: [
  23 + SizedBox(height: 12),
  24 + SafeArea(
  25 + bottom: false,
  26 + child: AnimatedBuilder(
  27 + animation: animation,
  28 + builder: (context, child) => Transform.translate(
  29 + offset: Offset(0, (1 - animation.value) * 100),
  30 + child: Opacity(
  31 + child: child, opacity: max(0, animation.value * 2 - 1))),
  32 + child: Row(
  33 + children: <Widget>[
  34 + SizedBox(width: 20),
  35 + CircleAvatar(
  36 + child: Text(
  37 + 'JB',
  38 + style: TextStyle(color: Colors.black),
  39 + ),
  40 + radius: 32,
  41 + backgroundColor: Colors.blueAccent,
41 ), 42 ),
42 - )),  
43 - SizedBox(height: 12),  
44 - Flexible(  
45 - flex: 1,  
46 - fit: FlexFit.loose,  
47 - child: ClipRRect(  
48 - borderRadius: BorderRadius.only(  
49 - topLeft: Radius.circular(15),  
50 - topRight: Radius.circular(15)),  
51 - child: Container(  
52 - decoration: BoxDecoration(  
53 - color: Theme.of(context).scaffoldBackgroundColor,  
54 - boxShadow: [  
55 - BoxShadow(  
56 - blurRadius: 10,  
57 - color: Colors.black12,  
58 - spreadRadius: 5)  
59 - ]),  
60 - width: double.infinity,  
61 - child: MediaQuery.removePadding(  
62 - context: context, removeTop: true, child: child)), 43 + ],
63 ), 44 ),
64 ), 45 ),
65 - ]), 46 + ),
  47 + SizedBox(height: 12),
  48 + Flexible(
  49 + flex: 1,
  50 + fit: FlexFit.loose,
  51 + child: ClipRRect(
  52 + borderRadius: BorderRadius.only(
  53 + topLeft: Radius.circular(15), topRight: Radius.circular(15)),
  54 + child: Container(
  55 + decoration: BoxDecoration(
  56 + color: Theme.of(context).scaffoldBackgroundColor,
  57 + boxShadow: [
  58 + BoxShadow(
  59 + blurRadius: 10,
  60 + color: Colors.black12,
  61 + spreadRadius: 5,
  62 + ),
  63 + ],
  64 + ),
  65 + width: double.infinity,
  66 + child: MediaQuery.removePadding(
  67 + context: context, removeTop: true, child: child),
  68 + ),
  69 + ),
  70 + ),
  71 + ],
  72 + ),
66 ); 73 );
67 } 74 }
68 } 75 }