Matthieu Pernelle
Committed by GitHub

:bug: (Annotated region) (#352)

* :bug: (Annotated region)

Move annatated region in _CupertinoBottomSheetContainer and made overlayStyle depend on transitionBackgroundColor luminance

* :bug: (OverlayStyle)

remove computed overlayStyle in showCupertinoModalBottomSheet function
@@ -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,9 +286,7 @@ class _CupertinoModalTransition extends StatelessWidget { @@ -268,9 +286,7 @@ 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( 289 + return AnimatedBuilder(
274 animation: curvedAnimation, 290 animation: curvedAnimation,
275 child: body, 291 child: body,
276 builder: (context, child) { 292 builder: (context, child) {
@@ -311,7 +327,6 @@ class _CupertinoModalTransition extends StatelessWidget { @@ -311,7 +327,6 @@ class _CupertinoModalTransition extends StatelessWidget {
311 ], 327 ],
312 ); 328 );
313 }, 329 },
314 - ),  
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 }