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,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 }