bierbaumtim

improve fidelity for CupertinoBottomSheet

* set CupertinoUserInterfaceLabel to elevated for top route
* animate theme for route in background
@@ -4,7 +4,15 @@ @@ -4,7 +4,15 @@
4 4
5 import 'dart:async'; 5 import 'dart:async';
6 6
7 -import 'package:flutter/cupertino.dart' show CupertinoTheme, CupertinoApp; 7 +import 'package:flutter/cupertino.dart'
  8 + show
  9 + CupertinoApp,
  10 + CupertinoColors,
  11 + CupertinoDynamicColor,
  12 + CupertinoTheme,
  13 + CupertinoThemeData,
  14 + CupertinoUserInterfaceLevel,
  15 + CupertinoUserInterfaceLevelData;
8 import 'package:flutter/material.dart' 16 import 'package:flutter/material.dart'
9 show 17 show
10 Colors, 18 Colors,
@@ -61,7 +69,10 @@ class _CupertinoBottomSheetContainer extends StatelessWidget { @@ -61,7 +69,10 @@ class _CupertinoBottomSheetContainer extends StatelessWidget {
61 child: MediaQuery.removePadding( 69 child: MediaQuery.removePadding(
62 context: context, 70 context: context,
63 removeTop: true, //Remove top Safe Area 71 removeTop: true, //Remove top Safe Area
64 - child: child, 72 + child: CupertinoUserInterfaceLevel(
  73 + data: CupertinoUserInterfaceLevelData.elevated,
  74 + child: child,
  75 + ),
65 ), 76 ),
66 ), 77 ),
67 ), 78 ),
@@ -271,8 +282,23 @@ class _CupertinoModalTransition extends StatelessWidget { @@ -271,8 +282,23 @@ class _CupertinoModalTransition extends StatelessWidget {
271 scale: scale, 282 scale: scale,
272 alignment: Alignment.topCenter, 283 alignment: Alignment.topCenter,
273 child: ClipRRect( 284 child: ClipRRect(
274 - borderRadius: BorderRadius.circular(radius),  
275 - child: child), 285 + borderRadius: BorderRadius.circular(radius),
  286 + child: CupertinoUserInterfaceLevel(
  287 + data: CupertinoUserInterfaceLevelData.elevated,
  288 + child: Builder(
  289 + builder: (context) => CupertinoTheme(
  290 + data: createPreviousRouteTheme(
  291 + context,
  292 + curvedAnimation,
  293 + ),
  294 + child: CupertinoUserInterfaceLevel(
  295 + data: CupertinoUserInterfaceLevelData.base,
  296 + child: child!,
  297 + ),
  298 + ),
  299 + ),
  300 + ),
  301 + ),
276 ), 302 ),
277 ), 303 ),
278 ], 304 ],
@@ -281,6 +307,76 @@ class _CupertinoModalTransition extends StatelessWidget { @@ -281,6 +307,76 @@ class _CupertinoModalTransition extends StatelessWidget {
281 ), 307 ),
282 ); 308 );
283 } 309 }
  310 +
  311 + CupertinoThemeData createPreviousRouteTheme(
  312 + BuildContext context,
  313 + Animation<double> animation,
  314 + ) {
  315 + final cTheme = CupertinoTheme.of(context);
  316 +
  317 + final systemBackground = CupertinoDynamicColor.resolve(
  318 + cTheme.scaffoldBackgroundColor,
  319 + context,
  320 + );
  321 +
  322 + final barBackgroundColor = CupertinoDynamicColor.resolve(
  323 + cTheme.barBackgroundColor,
  324 + context,
  325 + );
  326 +
  327 + var previousRouteTheme = cTheme;
  328 +
  329 + if (cTheme.scaffoldBackgroundColor is CupertinoDynamicColor) {
  330 + final dynamicScaffoldBackgroundColor =
  331 + cTheme.scaffoldBackgroundColor as CupertinoDynamicColor;
  332 +
  333 + /// BackgroundColor for the previous route with forced using
  334 + /// of the elevated colors
  335 + final elevatedScaffoldBackgroundColor =
  336 + CupertinoDynamicColor.withBrightnessAndContrast(
  337 + color: dynamicScaffoldBackgroundColor.elevatedColor,
  338 + darkColor: dynamicScaffoldBackgroundColor.darkElevatedColor,
  339 + highContrastColor:
  340 + dynamicScaffoldBackgroundColor.highContrastElevatedColor,
  341 + darkHighContrastColor:
  342 + dynamicScaffoldBackgroundColor.darkHighContrastElevatedColor,
  343 + );
  344 +
  345 + previousRouteTheme = previousRouteTheme.copyWith(
  346 + scaffoldBackgroundColor: ColorTween(
  347 + begin: systemBackground,
  348 + end: elevatedScaffoldBackgroundColor.resolveFrom(context),
  349 + ).evaluate(animation),
  350 + primaryColor: CupertinoColors.placeholderText.resolveFrom(context),
  351 + );
  352 + }
  353 +
  354 + if (cTheme.barBackgroundColor is CupertinoDynamicColor) {
  355 + final dynamicBarBackgroundColor =
  356 + cTheme.barBackgroundColor as CupertinoDynamicColor;
  357 +
  358 + /// NavigationBarColor for the previous route with forced using
  359 + /// of the elevated colors
  360 + final elevatedBarBackgroundColor =
  361 + CupertinoDynamicColor.withBrightnessAndContrast(
  362 + color: dynamicBarBackgroundColor.elevatedColor,
  363 + darkColor: dynamicBarBackgroundColor.darkElevatedColor,
  364 + highContrastColor: dynamicBarBackgroundColor.highContrastElevatedColor,
  365 + darkHighContrastColor:
  366 + dynamicBarBackgroundColor.darkHighContrastElevatedColor,
  367 + );
  368 +
  369 + previousRouteTheme = previousRouteTheme.copyWith(
  370 + barBackgroundColor: ColorTween(
  371 + begin: barBackgroundColor,
  372 + end: elevatedBarBackgroundColor.resolveFrom(context),
  373 + ).evaluate(animation),
  374 + primaryColor: CupertinoColors.placeholderText.resolveFrom(context),
  375 + );
  376 + }
  377 +
  378 + return previousRouteTheme;
  379 + }
284 } 380 }
285 381
286 class _CupertinoScaffold extends InheritedWidget { 382 class _CupertinoScaffold extends InheritedWidget {