Committed by
GitHub
(Annotated region) (#352)
*(Annotated region) Move annatated region in _CupertinoBottomSheetContainer and made overlayStyle depend on transitionBackgroundColor luminance *
(OverlayStyle) remove computed overlayStyle in showCupertinoModalBottomSheet function
Showing
1 changed file
with
68 additions
and
45 deletions
@@ -18,6 +18,7 @@ import 'package:flutter/material.dart' | @@ -18,6 +18,7 @@ import 'package:flutter/material.dart' | ||
18 | Colors, | 18 | Colors, |
19 | MaterialLocalizations, | 19 | MaterialLocalizations, |
20 | Theme, | 20 | Theme, |
21 | + ThemeData, | ||
21 | debugCheckHasMaterialLocalizations; | 22 | debugCheckHasMaterialLocalizations; |
22 | import 'package:flutter/services.dart'; | 23 | import 'package:flutter/services.dart'; |
23 | import 'package:flutter/widgets.dart'; | 24 | import 'package:flutter/widgets.dart'; |
@@ -30,6 +31,13 @@ const Radius _kDefaultTopRadius = Radius.circular(12); | @@ -30,6 +31,13 @@ const Radius _kDefaultTopRadius = Radius.circular(12); | ||
30 | const BoxShadow _kDefaultBoxShadow = | 31 | const BoxShadow _kDefaultBoxShadow = |
31 | BoxShadow(blurRadius: 10, color: Colors.black12, spreadRadius: 5); | 32 | BoxShadow(blurRadius: 10, color: Colors.black12, spreadRadius: 5); |
32 | 33 | ||
34 | +SystemUiOverlayStyle overlayStyleFromColor(Color color) { | ||
35 | + final brightness = ThemeData.estimateBrightnessForColor(color); | ||
36 | + return brightness == Brightness.dark | ||
37 | + ? SystemUiOverlayStyle.light | ||
38 | + : SystemUiOverlayStyle.dark; | ||
39 | +} | ||
40 | + | ||
33 | /// Cupertino Bottom Sheet Container | 41 | /// Cupertino Bottom Sheet Container |
34 | /// | 42 | /// |
35 | /// Clip the child widget to rectangle with top rounded corners and adds | 43 | /// Clip the child widget to rectangle with top rounded corners and adds |
@@ -40,17 +48,20 @@ class _CupertinoBottomSheetContainer extends StatelessWidget { | @@ -40,17 +48,20 @@ class _CupertinoBottomSheetContainer extends StatelessWidget { | ||
40 | final Color? backgroundColor; | 48 | final Color? backgroundColor; |
41 | final Radius topRadius; | 49 | final Radius topRadius; |
42 | final BoxShadow? shadow; | 50 | final BoxShadow? shadow; |
51 | + final SystemUiOverlayStyle? overlayStyle; | ||
43 | 52 | ||
44 | const _CupertinoBottomSheetContainer({ | 53 | const _CupertinoBottomSheetContainer({ |
45 | Key? key, | 54 | Key? key, |
46 | required this.child, | 55 | required this.child, |
47 | this.backgroundColor, | 56 | this.backgroundColor, |
48 | required this.topRadius, | 57 | required this.topRadius, |
58 | + this.overlayStyle, | ||
49 | this.shadow, | 59 | this.shadow, |
50 | }) : super(key: key); | 60 | }) : super(key: key); |
51 | 61 | ||
52 | @override | 62 | @override |
53 | Widget build(BuildContext context) { | 63 | Widget build(BuildContext context) { |
64 | + final scopedOverlayStyle = overlayStyle; | ||
54 | final topSafeAreaPadding = MediaQuery.of(context).padding.top; | 65 | final topSafeAreaPadding = MediaQuery.of(context).padding.top; |
55 | final topPadding = _kPreviousPageVisibleOffset + topSafeAreaPadding; | 66 | final topPadding = _kPreviousPageVisibleOffset + topSafeAreaPadding; |
56 | 67 | ||
@@ -58,7 +69,7 @@ class _CupertinoBottomSheetContainer extends StatelessWidget { | @@ -58,7 +69,7 @@ class _CupertinoBottomSheetContainer extends StatelessWidget { | ||
58 | BoxShadow(blurRadius: 10, color: Colors.black12, spreadRadius: 5); | 69 | BoxShadow(blurRadius: 10, color: Colors.black12, spreadRadius: 5); |
59 | final backgroundColor = this.backgroundColor ?? | 70 | final backgroundColor = this.backgroundColor ?? |
60 | CupertinoTheme.of(context).scaffoldBackgroundColor; | 71 | CupertinoTheme.of(context).scaffoldBackgroundColor; |
61 | - return Padding( | 72 | + Widget bottomSheetContainer = Padding( |
62 | padding: EdgeInsets.only(top: topPadding), | 73 | padding: EdgeInsets.only(top: topPadding), |
63 | child: ClipRRect( | 74 | child: ClipRRect( |
64 | borderRadius: BorderRadius.vertical(top: topRadius), | 75 | borderRadius: BorderRadius.vertical(top: topRadius), |
@@ -77,6 +88,13 @@ class _CupertinoBottomSheetContainer extends StatelessWidget { | @@ -77,6 +88,13 @@ class _CupertinoBottomSheetContainer extends StatelessWidget { | ||
77 | ), | 88 | ), |
78 | ), | 89 | ), |
79 | ); | 90 | ); |
91 | + if (scopedOverlayStyle != null) { | ||
92 | + bottomSheetContainer = AnnotatedRegion<SystemUiOverlayStyle>( | ||
93 | + value: scopedOverlayStyle, | ||
94 | + child: bottomSheetContainer, | ||
95 | + ); | ||
96 | + } | ||
97 | + return bottomSheetContainer; | ||
80 | } | 98 | } |
81 | } | 99 | } |
82 | 100 | ||
@@ -111,7 +129,6 @@ Future<T?> showCupertinoModalBottomSheet<T>({ | @@ -111,7 +129,6 @@ Future<T?> showCupertinoModalBottomSheet<T>({ | ||
111 | final barrierLabel = hasMaterialLocalizations | 129 | final barrierLabel = hasMaterialLocalizations |
112 | ? MaterialLocalizations.of(context).modalBarrierDismissLabel | 130 | ? MaterialLocalizations.of(context).modalBarrierDismissLabel |
113 | : ''; | 131 | : ''; |
114 | - | ||
115 | final result = | 132 | final result = |
116 | await Navigator.of(context, rootNavigator: useRootNavigator).push( | 133 | await Navigator.of(context, rootNavigator: useRootNavigator).push( |
117 | CupertinoModalBottomSheetRoute<T>( | 134 | CupertinoModalBottomSheetRoute<T>( |
@@ -121,6 +138,7 @@ Future<T?> showCupertinoModalBottomSheet<T>({ | @@ -121,6 +138,7 @@ Future<T?> showCupertinoModalBottomSheet<T>({ | ||
121 | backgroundColor: backgroundColor, | 138 | backgroundColor: backgroundColor, |
122 | topRadius: topRadius, | 139 | topRadius: topRadius, |
123 | shadow: shadow, | 140 | shadow: shadow, |
141 | + overlayStyle: overlayStyle, | ||
124 | ), | 142 | ), |
125 | secondAnimationController: secondAnimation, | 143 | secondAnimationController: secondAnimation, |
126 | expanded: expand, | 144 | expanded: expand, |
@@ -154,6 +172,9 @@ class CupertinoModalBottomSheetRoute<T> extends ModalSheetRoute<T> { | @@ -154,6 +172,9 @@ class CupertinoModalBottomSheetRoute<T> extends ModalSheetRoute<T> { | ||
154 | // Background color behind all routes | 172 | // Background color behind all routes |
155 | // Black by default | 173 | // Black by default |
156 | final Color? transitionBackgroundColor; | 174 | final Color? transitionBackgroundColor; |
175 | + @Deprecated( | ||
176 | + 'Will be ignored. OverlayStyle is computed from luminance of transitionBackgroundColor', | ||
177 | + ) | ||
157 | final SystemUiOverlayStyle? overlayStyle; | 178 | final SystemUiOverlayStyle? overlayStyle; |
158 | 179 | ||
159 | CupertinoModalBottomSheetRoute({ | 180 | CupertinoModalBottomSheetRoute({ |
@@ -230,7 +251,6 @@ class CupertinoModalBottomSheetRoute<T> extends ModalSheetRoute<T> { | @@ -230,7 +251,6 @@ class CupertinoModalBottomSheetRoute<T> extends ModalSheetRoute<T> { | ||
230 | animationCurve: previousRouteAnimationCurve, | 251 | animationCurve: previousRouteAnimationCurve, |
231 | topRadius: topRadius, | 252 | topRadius: topRadius, |
232 | backgroundColor: transitionBackgroundColor ?? Colors.black, | 253 | backgroundColor: transitionBackgroundColor ?? Colors.black, |
233 | - overlayStyle: overlayStyle, | ||
234 | ); | 254 | ); |
235 | } | 255 | } |
236 | } | 256 | } |
@@ -240,7 +260,6 @@ class _CupertinoModalTransition extends StatelessWidget { | @@ -240,7 +260,6 @@ class _CupertinoModalTransition extends StatelessWidget { | ||
240 | final Radius topRadius; | 260 | final Radius topRadius; |
241 | final Curve? animationCurve; | 261 | final Curve? animationCurve; |
242 | final Color backgroundColor; | 262 | final Color backgroundColor; |
243 | - final SystemUiOverlayStyle? overlayStyle; | ||
244 | 263 | ||
245 | final Widget body; | 264 | final Widget body; |
246 | 265 | ||
@@ -251,7 +270,6 @@ class _CupertinoModalTransition extends StatelessWidget { | @@ -251,7 +270,6 @@ class _CupertinoModalTransition extends StatelessWidget { | ||
251 | required this.topRadius, | 270 | required this.topRadius, |
252 | this.backgroundColor = Colors.black, | 271 | this.backgroundColor = Colors.black, |
253 | this.animationCurve, | 272 | this.animationCurve, |
254 | - this.overlayStyle, | ||
255 | }) : super(key: key); | 273 | }) : super(key: key); |
256 | 274 | ||
257 | @override | 275 | @override |
@@ -268,50 +286,47 @@ class _CupertinoModalTransition extends StatelessWidget { | @@ -268,50 +286,47 @@ class _CupertinoModalTransition extends StatelessWidget { | ||
268 | curve: animationCurve ?? Curves.easeOut, | 286 | curve: animationCurve ?? Curves.easeOut, |
269 | ); | 287 | ); |
270 | 288 | ||
271 | - return AnnotatedRegion<SystemUiOverlayStyle>( | ||
272 | - value: overlayStyle ?? SystemUiOverlayStyle.light, | ||
273 | - child: AnimatedBuilder( | ||
274 | - animation: curvedAnimation, | ||
275 | - child: body, | ||
276 | - builder: (context, child) { | ||
277 | - final progress = curvedAnimation.value; | ||
278 | - final yOffset = progress * paddingTop; | ||
279 | - final scale = 1 - progress / 10; | ||
280 | - final radius = progress == 0 | ||
281 | - ? 0.0 | ||
282 | - : (1 - progress) * startRoundCorner + progress * topRadius.x; | ||
283 | - return Stack( | ||
284 | - children: <Widget>[ | ||
285 | - Container(color: backgroundColor), | ||
286 | - Transform.translate( | ||
287 | - offset: Offset(0, yOffset), | ||
288 | - child: Transform.scale( | ||
289 | - scale: scale, | ||
290 | - alignment: Alignment.topCenter, | ||
291 | - child: ClipRRect( | ||
292 | - borderRadius: BorderRadius.circular(radius), | ||
293 | - child: CupertinoUserInterfaceLevel( | ||
294 | - data: CupertinoUserInterfaceLevelData.elevated, | ||
295 | - child: Builder( | ||
296 | - builder: (context) => CupertinoTheme( | ||
297 | - data: createPreviousRouteTheme( | ||
298 | - context, | ||
299 | - curvedAnimation, | ||
300 | - ), | ||
301 | - child: CupertinoUserInterfaceLevel( | ||
302 | - data: CupertinoUserInterfaceLevelData.base, | ||
303 | - child: child!, | ||
304 | - ), | 289 | + return AnimatedBuilder( |
290 | + animation: curvedAnimation, | ||
291 | + child: body, | ||
292 | + builder: (context, child) { | ||
293 | + final progress = curvedAnimation.value; | ||
294 | + final yOffset = progress * paddingTop; | ||
295 | + final scale = 1 - progress / 10; | ||
296 | + final radius = progress == 0 | ||
297 | + ? 0.0 | ||
298 | + : (1 - progress) * startRoundCorner + progress * topRadius.x; | ||
299 | + return Stack( | ||
300 | + children: <Widget>[ | ||
301 | + Container(color: backgroundColor), | ||
302 | + Transform.translate( | ||
303 | + offset: Offset(0, yOffset), | ||
304 | + child: Transform.scale( | ||
305 | + scale: scale, | ||
306 | + alignment: Alignment.topCenter, | ||
307 | + child: ClipRRect( | ||
308 | + borderRadius: BorderRadius.circular(radius), | ||
309 | + child: CupertinoUserInterfaceLevel( | ||
310 | + data: CupertinoUserInterfaceLevelData.elevated, | ||
311 | + child: Builder( | ||
312 | + builder: (context) => CupertinoTheme( | ||
313 | + data: createPreviousRouteTheme( | ||
314 | + context, | ||
315 | + curvedAnimation, | ||
316 | + ), | ||
317 | + child: CupertinoUserInterfaceLevel( | ||
318 | + data: CupertinoUserInterfaceLevelData.base, | ||
319 | + child: child!, | ||
305 | ), | 320 | ), |
306 | ), | 321 | ), |
307 | ), | 322 | ), |
308 | ), | 323 | ), |
309 | ), | 324 | ), |
310 | ), | 325 | ), |
311 | - ], | ||
312 | - ); | ||
313 | - }, | ||
314 | - ), | 326 | + ), |
327 | + ], | ||
328 | + ); | ||
329 | + }, | ||
315 | ); | 330 | ); |
316 | } | 331 | } |
317 | 332 | ||
@@ -390,11 +405,13 @@ class CupertinoScaffoldInheirted extends InheritedWidget { | @@ -390,11 +405,13 @@ class CupertinoScaffoldInheirted extends InheritedWidget { | ||
390 | final AnimationController? animation; | 405 | final AnimationController? animation; |
391 | 406 | ||
392 | final Radius? topRadius; | 407 | final Radius? topRadius; |
408 | + final Color transitionBackgroundColor; | ||
393 | 409 | ||
394 | const CupertinoScaffoldInheirted({ | 410 | const CupertinoScaffoldInheirted({ |
395 | this.animation, | 411 | this.animation, |
396 | required super.child, | 412 | required super.child, |
397 | this.topRadius, | 413 | this.topRadius, |
414 | + required this.transitionBackgroundColor, | ||
398 | }) : super(); | 415 | }) : super(); |
399 | 416 | ||
400 | @override | 417 | @override |
@@ -440,6 +457,9 @@ class CupertinoScaffold extends StatefulWidget { | @@ -440,6 +457,9 @@ class CupertinoScaffold extends StatefulWidget { | ||
440 | Duration? duration, | 457 | Duration? duration, |
441 | RouteSettings? settings, | 458 | RouteSettings? settings, |
442 | BoxShadow? shadow, | 459 | BoxShadow? shadow, |
460 | + @Deprecated( | ||
461 | + 'Will be ignored. OverlayStyle is computed from luminance of transitionBackgroundColor', | ||
462 | + ) | ||
443 | SystemUiOverlayStyle? overlayStyle, | 463 | SystemUiOverlayStyle? overlayStyle, |
444 | }) async { | 464 | }) async { |
445 | assert(debugCheckHasMediaQuery(context)); | 465 | assert(debugCheckHasMediaQuery(context)); |
@@ -451,6 +471,9 @@ class CupertinoScaffold extends StatefulWidget { | @@ -451,6 +471,9 @@ class CupertinoScaffold extends StatefulWidget { | ||
451 | barrierLabel = MaterialLocalizations.of(context).modalBarrierDismissLabel; | 471 | barrierLabel = MaterialLocalizations.of(context).modalBarrierDismissLabel; |
452 | } | 472 | } |
453 | final topRadius = CupertinoScaffold.of(context)!.topRadius; | 473 | final topRadius = CupertinoScaffold.of(context)!.topRadius; |
474 | + final transitionBackgroundColor = | ||
475 | + CupertinoScaffold.of(context)!.transitionBackgroundColor; | ||
476 | + final overlayStyle = overlayStyleFromColor(transitionBackgroundColor); | ||
454 | final result = await Navigator.of(context, rootNavigator: useRootNavigator) | 477 | final result = await Navigator.of(context, rootNavigator: useRootNavigator) |
455 | .push(CupertinoModalBottomSheetRoute<T>( | 478 | .push(CupertinoModalBottomSheetRoute<T>( |
456 | closeProgressThreshold: closeProgressThreshold, | 479 | closeProgressThreshold: closeProgressThreshold, |
@@ -461,6 +484,7 @@ class CupertinoScaffold extends StatefulWidget { | @@ -461,6 +484,7 @@ class CupertinoScaffold extends StatefulWidget { | ||
461 | backgroundColor: backgroundColor, | 484 | backgroundColor: backgroundColor, |
462 | topRadius: topRadius ?? _kDefaultTopRadius, | 485 | topRadius: topRadius ?? _kDefaultTopRadius, |
463 | shadow: shadow, | 486 | shadow: shadow, |
487 | + overlayStyle: overlayStyle, | ||
464 | ), | 488 | ), |
465 | expanded: expand, | 489 | expanded: expand, |
466 | barrierLabel: barrierLabel, | 490 | barrierLabel: barrierLabel, |
@@ -473,7 +497,6 @@ class CupertinoScaffold extends StatefulWidget { | @@ -473,7 +497,6 @@ class CupertinoScaffold extends StatefulWidget { | ||
473 | previousRouteAnimationCurve: previousRouteAnimationCurve, | 497 | previousRouteAnimationCurve: previousRouteAnimationCurve, |
474 | duration: duration, | 498 | duration: duration, |
475 | settings: settings, | 499 | settings: settings, |
476 | - overlayStyle: overlayStyle, | ||
477 | )); | 500 | )); |
478 | return result; | 501 | return result; |
479 | } | 502 | } |
@@ -495,12 +518,12 @@ class _CupertinoScaffoldState extends State<CupertinoScaffold> | @@ -495,12 +518,12 @@ class _CupertinoScaffoldState extends State<CupertinoScaffold> | ||
495 | return CupertinoScaffoldInheirted( | 518 | return CupertinoScaffoldInheirted( |
496 | animation: animationController, | 519 | animation: animationController, |
497 | topRadius: widget.topRadius, | 520 | topRadius: widget.topRadius, |
521 | + transitionBackgroundColor: widget.transitionBackgroundColor, | ||
498 | child: _CupertinoModalTransition( | 522 | child: _CupertinoModalTransition( |
499 | secondaryAnimation: animationController, | 523 | secondaryAnimation: animationController, |
500 | body: widget.body, | 524 | body: widget.body, |
501 | topRadius: widget.topRadius, | 525 | topRadius: widget.topRadius, |
502 | backgroundColor: widget.transitionBackgroundColor, | 526 | backgroundColor: widget.transitionBackgroundColor, |
503 | - overlayStyle: widget.overlayStyle, | ||
504 | ), | 527 | ), |
505 | ); | 528 | ); |
506 | } | 529 | } |
-
Please register or login to post a comment