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 234 additions and 112 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( 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 }
@@ -28,26 +28,29 @@ class AvatarBottomSheet extends StatelessWidget { @@ -28,26 +28,29 @@ class AvatarBottomSheet extends StatelessWidget {
28 builder: (context, child) => Transform.translate( 28 builder: (context, child) => Transform.translate(
29 offset: Offset(0, (1 - animation.value) * 100), 29 offset: Offset(0, (1 - animation.value) * 100),
30 child: Opacity( 30 child: Opacity(
31 - child: child,  
32 - opacity: max(0, animation.value * 2 - 1))), 31 + child: child, opacity: max(0, animation.value * 2 - 1))),
33 child: Row( 32 child: Row(
34 children: <Widget>[ 33 children: <Widget>[
35 SizedBox(width: 20), 34 SizedBox(width: 20),
36 CircleAvatar( 35 CircleAvatar(
37 - child: Text('JB'), 36 + child: Text(
  37 + 'JB',
  38 + style: TextStyle(color: Colors.black),
  39 + ),
38 radius: 32, 40 radius: 32,
  41 + backgroundColor: Colors.blueAccent,
39 ), 42 ),
40 ], 43 ],
41 ), 44 ),
42 - )), 45 + ),
  46 + ),
43 SizedBox(height: 12), 47 SizedBox(height: 12),
44 Flexible( 48 Flexible(
45 flex: 1, 49 flex: 1,
46 fit: FlexFit.loose, 50 fit: FlexFit.loose,
47 child: ClipRRect( 51 child: ClipRRect(
48 borderRadius: BorderRadius.only( 52 borderRadius: BorderRadius.only(
49 - topLeft: Radius.circular(15),  
50 - topRight: Radius.circular(15)), 53 + topLeft: Radius.circular(15), topRight: Radius.circular(15)),
51 child: Container( 54 child: Container(
52 decoration: BoxDecoration( 55 decoration: BoxDecoration(
53 color: Theme.of(context).scaffoldBackgroundColor, 56 color: Theme.of(context).scaffoldBackgroundColor,
@@ -55,14 +58,18 @@ class AvatarBottomSheet extends StatelessWidget { @@ -55,14 +58,18 @@ class AvatarBottomSheet extends StatelessWidget {
55 BoxShadow( 58 BoxShadow(
56 blurRadius: 10, 59 blurRadius: 10,
57 color: Colors.black12, 60 color: Colors.black12,
58 - spreadRadius: 5)  
59 - ]), 61 + spreadRadius: 5,
  62 + ),
  63 + ],
  64 + ),
60 width: double.infinity, 65 width: double.infinity,
61 child: MediaQuery.removePadding( 66 child: MediaQuery.removePadding(
62 - context: context, removeTop: true, child: child)), 67 + context: context, removeTop: true, child: child),
  68 + ),
63 ), 69 ),
64 ), 70 ),
65 - ]), 71 + ],
  72 + ),
66 ); 73 );
67 } 74 }
68 } 75 }