CupertinoDynamicColor and friends (#37719)

packages/flutter/lib/cupertino.dart

@@ -18,6 +18,7 @@ export 'src/cupertino/colors.dart';
 export 'src/cupertino/date_picker.dart';
 export 'src/cupertino/dialog.dart';
 export 'src/cupertino/icons.dart';
+export 'src/cupertino/interface_level.dart';
 export 'src/cupertino/localizations.dart';
 export 'src/cupertino/nav_bar.dart';
 export 'src/cupertino/page_scaffold.dart';

packages/flutter/lib/src/cupertino/app.dart

@@ -8,6 +8,7 @@ import 'package:flutter/widgets.dart';
 import 'button.dart';
 import 'colors.dart';
 import 'icons.dart';
+import 'interface_level.dart';
 import 'localizations.dart';
 import 'route.dart';
 import 'theme.dart';
@@ -268,8 +269,12 @@ class _CupertinoAppState extends State<CupertinoApp> {
 
     return ScrollConfiguration(
       behavior: _AlwaysCupertinoScrollBehavior(),
+      child: CupertinoUserInterfaceLevel(
+        data: CupertinoUserInterfaceLevelData.base,
         child: CupertinoTheme(
           data: effectiveThemeData,
+          child: CupertinoSystemColors(
+            data: CupertinoSystemColors.of(context, useFallbackValues: true),
             child: WidgetsApp(
               key: GlobalObjectKey(this),
               navigatorKey: widget.navigatorKey,
@@ -309,6 +314,8 @@ class _CupertinoAppState extends State<CupertinoApp> {
               },
             ),
           ),
+        ),
+      ),
     );
   }
 }

packages/flutter/lib/src/cupertino/interface_level.dart

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../widgets/framework.dart';
+
+/// Indicates the visual level for a piece of content. Equivalent to `UIUserInterfaceLevel`
+/// from `UIKit`.
+///
+/// See also:
+///
+/// * `UIUserInterfaceLevel`, the UIKit equivalent: https://developer.apple.com/documentation/uikit/uiuserinterfacelevel.
+enum CupertinoUserInterfaceLevelData {
+  /// The level for your window's main content.
+  base,
+
+  /// The level for content visually above [base].
+  elevated,
+}
+
+/// Establishes a subtree in which [CupertinoUserInterfaceLevel.of] resolves to
+/// the given data.
+///
+/// Querying the current elevation status using [CupertinoUserInterfaceLevel.of]
+/// will cause your widget to rebuild automatically whenever the [CupertinoUserInterfaceLevelData]
+/// changes.
+///
+/// If no [CupertinoUserInterfaceLevel] is in scope then the [CupertinoUserInterfaceLevel.of]
+/// method will throw an exception, unless the `nullOk` argument is set to true,
+/// in which case it returns null.
+///
+/// See also:
+///
+/// * [CupertinoUserInterfaceLevelData], specifies the visual level for the content
+/// in the subtree [CupertinoUserInterfaceLevel] established.
+class CupertinoUserInterfaceLevel extends InheritedWidget {
+  /// Creates a [CupertinoUserInterfaceLevel] to change descendant Cupertino widget's
+  /// visual level.
+  const CupertinoUserInterfaceLevel({
+    Key key,
+    @required CupertinoUserInterfaceLevelData data,
+    Widget child,
+  }) : assert(data != null),
+      _data = data,
+      super(key: key, child: child);
+
+  final CupertinoUserInterfaceLevelData _data;
+
+  @override
+  bool updateShouldNotify(CupertinoUserInterfaceLevel oldWidget) => oldWidget._data != _data;
+
+  /// The data from the closest instance of this class that encloses the given
+  /// context.
+  ///
+  /// You can use this function to query the user interface elevation level within
+  /// the given [BuildContext]. When that information changes, your widget will
+  /// be scheduled to be rebuilt, keeping your widget up-to-date.
+  static CupertinoUserInterfaceLevelData of(BuildContext context, { bool nullOk = false }) {
+    assert(context != null);
+    assert(nullOk != null);
+    final CupertinoUserInterfaceLevel query = context.inheritFromWidgetOfExactType(CupertinoUserInterfaceLevel);
+    if (query != null)
+      return query._data;
+    if (nullOk)
+      return null;
+    throw FlutterError(
+      'CupertinoUserInterfaceLevel.of() called with a context that does not contain a CupertinoUserInterfaceLevel.\n'
+      'No CupertinoUserInterfaceLevel ancestor could be found starting from the context that was passed '
+      'to CupertinoUserInterfaceLevel.of(). This can happen because you do not have a WidgetsApp or '
+      'MaterialApp widget (those widgets introduce a CupertinoUserInterfaceLevel), or it can happen '
+      'if the context you use comes from a widget above those widgets.\n'
+      'The context used was:\n'
+      '  $context'
+    );
+  }
+}

packages/flutter/lib/src/cupertino/slider.dart

@@ -9,6 +9,7 @@ import 'package:flutter/gestures.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 
+import 'colors.dart';
 import 'theme.dart';
 import 'thumb_painter.dart';
 
@@ -228,7 +229,10 @@ class _CupertinoSliderState extends State<CupertinoSlider> with TickerProviderSt
     return _CupertinoSliderRenderObjectWidget(
       value: (widget.value - widget.min) / (widget.max - widget.min),
       divisions: widget.divisions,
-      activeColor: widget.activeColor ?? CupertinoTheme.of(context).primaryColor,
+      activeColor: CupertinoDynamicColor.resolve(
+        widget.activeColor ?? CupertinoTheme.of(context).primaryColor,
+        context
+      ),
       onChanged: widget.onChanged != null ? _handleChanged : null,
       onChangeStart: widget.onChangeStart != null ? _handleDragStart : null,
       onChangeEnd: widget.onChangeEnd != null ? _handleDragEnd : null,
@@ -257,12 +261,14 @@ class _CupertinoSliderRenderObjectWidget extends LeafRenderObjectWidget {
   final ValueChanged<double> onChangeEnd;
   final TickerProvider vsync;
 
+
   @override
   _RenderCupertinoSlider createRenderObject(BuildContext context) {
     return _RenderCupertinoSlider(
       value: value,
       divisions: divisions,
       activeColor: activeColor,
+      trackColor: CupertinoDynamicColor.resolve(CupertinoSystemColors.of(context).systemFill, context),
       onChanged: onChanged,
       onChangeStart: onChangeStart,
       onChangeEnd: onChangeEnd,
@@ -277,6 +283,7 @@ class _CupertinoSliderRenderObjectWidget extends LeafRenderObjectWidget {
       ..value = value
       ..divisions = divisions
       ..activeColor = activeColor
+      ..trackColor = CupertinoDynamicColor.resolve(CupertinoSystemColors.of(context).systemFill, context)
       ..onChanged = onChanged
       ..onChangeStart = onChangeStart
       ..onChangeEnd = onChangeEnd
@@ -287,7 +294,6 @@ class _CupertinoSliderRenderObjectWidget extends LeafRenderObjectWidget {
 }
 
 const double _kPadding = 8.0;
-const Color _kTrackColor = Color(0xFFB5B5B5);
 const double _kSliderHeight = 2.0 * (CupertinoThumbPainter.radius + _kPadding);
 const double _kSliderWidth = 176.0; // Matches Material Design slider.
 const Duration _kDiscreteTransitionDuration = Duration(milliseconds: 500);
@@ -299,6 +305,7 @@ class _RenderCupertinoSlider extends RenderConstrainedBox {
     @required double value,
     int divisions,
     Color activeColor,
+    Color trackColor,
     ValueChanged<double> onChanged,
     this.onChangeStart,
     this.onChangeEnd,
@@ -309,6 +316,7 @@ class _RenderCupertinoSlider extends RenderConstrainedBox {
        _value = value,
        _divisions = divisions,
        _activeColor = activeColor,
+       _trackColor = trackColor,
        _onChanged = onChanged,
        _textDirection = textDirection,
        super(additionalConstraints: const BoxConstraints.tightFor(width: _kSliderWidth, height: _kSliderHeight)) {
@@ -355,6 +363,15 @@ class _RenderCupertinoSlider extends RenderConstrainedBox {
     markNeedsPaint();
   }
 
+  Color get trackColor => _trackColor;
+  Color _trackColor;
+  set trackColor(Color value) {
+    if (value == _trackColor)
+      return;
+    _trackColor = value;
+    markNeedsPaint();
+  }
+
   ValueChanged<double> get onChanged => _onChanged;
   ValueChanged<double> _onChanged;
   set onChanged(ValueChanged<double> value) {
@@ -468,11 +485,11 @@ class _RenderCupertinoSlider extends RenderConstrainedBox {
       case TextDirection.rtl:
         visualPosition = 1.0 - _position.value;
         leftColor = _activeColor;
-        rightColor = _kTrackColor;
+        rightColor = trackColor;
         break;
       case TextDirection.ltr:
         visualPosition = _position.value;
-        leftColor = _kTrackColor;
+        leftColor = trackColor;
         rightColor = _activeColor;
         break;
     }

packages/flutter/lib/src/cupertino/text_theme.dart

@@ -213,6 +213,32 @@ class CupertinoTextThemeData extends Diagnosticable {
         (_isLight ? _kDefaultDateTimePickerLightTextStyle : _kDefaultDateTimePickerDarkTextStyle);
   }
 
+  /// Returns a copy of the current [CupertinoTextThemeData] with all the colors
+  /// resolved against the given [BuildContext].
+  CupertinoTextThemeData resolveFrom(BuildContext context, { bool nullOk = false }) {
+    Color convertColor(Color color) => color == null ? null : CupertinoDynamicColor.resolve(color, context, nullOk: nullOk);
+
+    TextStyle resolveTextStyle(TextStyle textStyle) {
+      return textStyle?.copyWith(
+        color: convertColor(textStyle.color),
+        backgroundColor: convertColor(textStyle.backgroundColor),
+        decorationColor: convertColor(textStyle.decorationColor),
+      );
+    }
+
+    return copyWith(
+      primaryColor: convertColor(_primaryColor),
+      textStyle: resolveTextStyle(_textStyle),
+      actionTextStyle: resolveTextStyle(_actionTextStyle),
+      tabLabelTextStyle: resolveTextStyle(_tabLabelTextStyle),
+      navTitleTextStyle : resolveTextStyle(_navTitleTextStyle),
+      navLargeTitleTextStyle: resolveTextStyle(_navLargeTitleTextStyle),
+      navActionTextStyle: resolveTextStyle(_navActionTextStyle),
+      pickerTextStyle: resolveTextStyle(_pickerTextStyle),
+      dateTimePickerTextStyle: resolveTextStyle(_dateTimePickerTextStyle),
+    );
+  }
+
   /// Returns a copy of the current [CupertinoTextThemeData] instance with
   /// specified overrides.
   CupertinoTextThemeData copyWith({

packages/flutter/lib/src/cupertino/theme.dart

@@ -54,7 +54,20 @@ class CupertinoTheme extends StatelessWidget {
   /// exist in the ancestry tree.
   static CupertinoThemeData of(BuildContext context) {
     final _InheritedCupertinoTheme inheritedTheme = context.inheritFromWidgetOfExactType(_InheritedCupertinoTheme);
-    return inheritedTheme?.theme?.data ?? const CupertinoThemeData();
+    return (inheritedTheme?.theme?.data ?? const CupertinoThemeData()).resolveFrom(context, nullOk: true);
+  }
+
+  /// Retrieve the [Brightness] value from the closest ancestor [CupertinoTheme]
+  /// widget.
+  ///
+  /// If no ancestral [CupertinoTheme] widget with explicit brightness value could
+  /// be found, the method will resort to the closest ancestor [MediaQuery] widget.
+  ///
+  /// Throws an exception if no such [CupertinoTheme] or [MediaQuery] widgets exist
+  /// in the ancestry tree, unless [nullOk] is set to true.
+  static Brightness brightnessOf(BuildContext context, { bool nullOk = false }) {
+    final _InheritedCupertinoTheme inheritedTheme = context.inheritFromWidgetOfExactType(_InheritedCupertinoTheme);
+    return inheritedTheme?.theme?.data?._brightness ?? MediaQuery.of(context, nullOk: nullOk)?.platformBrightness;
   }
 
   /// The widget below this widget in the tree.
@@ -229,6 +242,23 @@ class CupertinoThemeData extends Diagnosticable {
     );
   }
 
+  /// Return a new `CupertinoThemeData` whose colors are from this `CupertinoThemeData`,
+  /// but resolved aginst the given [BuildContext].
+  ///
+  /// It will be called in [CupertinoTheme.of].
+  @protected
+  CupertinoThemeData resolveFrom(BuildContext context, { bool nullOk = false }) {
+    Color convertColor(Color color) => color == null ? null : CupertinoDynamicColor.resolve(color, context, nullOk: nullOk);
+
+    return copyWith(
+      primaryColor: convertColor(primaryColor),
+      primaryContrastingColor: convertColor(primaryContrastingColor),
+      textTheme: textTheme?.resolveFrom(context, nullOk: nullOk),
+      barBackgroundColor: convertColor(barBackgroundColor),
+      scaffoldBackgroundColor: convertColor(scaffoldBackgroundColor),
+    );
+  }
+
   /// Create a copy of [CupertinoThemeData] with specified attributes overridden.
   ///
   /// Only the current instance's specified attributes are copied instead of
@@ -296,4 +326,39 @@ class _NoDefaultCupertinoThemeData extends CupertinoThemeData {
   final Color barBackgroundColor;
   @override
   final Color scaffoldBackgroundColor;
+
+  @override
+  _NoDefaultCupertinoThemeData resolveFrom(BuildContext context, { bool nullOk = false }) {
+    Color convertColor(Color color) => color == null
+      ? null
+      : CupertinoDynamicColor.resolve(color, context, nullOk: nullOk);
+
+    return _NoDefaultCupertinoThemeData(
+      brightness,
+      convertColor(primaryColor),
+      convertColor(primaryContrastingColor),
+      textTheme?.resolveFrom(context, nullOk: nullOk),
+      convertColor(barBackgroundColor),
+      convertColor(scaffoldBackgroundColor),
+    );
+  }
+
+  @override
+  CupertinoThemeData copyWith({
+    Brightness brightness,
+    Color primaryColor,
+    Color primaryContrastingColor,
+    CupertinoTextThemeData textTheme,
+    Color barBackgroundColor ,
+    Color scaffoldBackgroundColor
+  }) {
+    return _NoDefaultCupertinoThemeData(
+      brightness ?? this.brightness,
+      primaryColor ?? this.primaryColor,
+      primaryContrastingColor ?? this.primaryContrastingColor,
+      textTheme ?? this.textTheme,
+      barBackgroundColor ?? this.barBackgroundColor,
+      scaffoldBackgroundColor ?? this.scaffoldBackgroundColor,
+    );
+  }
 }

packages/flutter/lib/src/material/theme_data.dart

@@ -1417,33 +1417,42 @@ class MaterialBasedCupertinoThemeData extends CupertinoThemeData {
   /// The [materialTheme] parameter must not be null.
   MaterialBasedCupertinoThemeData({
       @required ThemeData materialTheme,
-  }) : assert(materialTheme != null),
-       _materialTheme = materialTheme,
+  }) : this._(
+    materialTheme,
+    (materialTheme.cupertinoOverrideTheme ?? const CupertinoThemeData()).noDefault(),
+  );
+
+  MaterialBasedCupertinoThemeData._(
+    this._materialTheme,
+    this._cupertinoOverrideTheme,
+  ) : assert(_materialTheme != null),
+      assert(_cupertinoOverrideTheme != null),
       // Pass all values to the superclass so Material-agnostic properties
       // like barBackgroundColor can still behave like a normal
       // CupertinoThemeData.
       super.raw(
-         materialTheme.cupertinoOverrideTheme?.brightness,
-         materialTheme.cupertinoOverrideTheme?.primaryColor,
-         materialTheme.cupertinoOverrideTheme?.primaryContrastingColor,
-         materialTheme.cupertinoOverrideTheme?.textTheme,
-         materialTheme.cupertinoOverrideTheme?.barBackgroundColor,
-         materialTheme.cupertinoOverrideTheme?.scaffoldBackgroundColor,
+        _cupertinoOverrideTheme.brightness,
+        _cupertinoOverrideTheme.primaryColor,
+        _cupertinoOverrideTheme.primaryContrastingColor,
+        _cupertinoOverrideTheme.textTheme,
+        _cupertinoOverrideTheme.barBackgroundColor,
+        _cupertinoOverrideTheme.scaffoldBackgroundColor,
       );
 
   final ThemeData _materialTheme;
+  final CupertinoThemeData _cupertinoOverrideTheme;
 
   @override
-  Brightness get brightness => _materialTheme.cupertinoOverrideTheme?.brightness ?? _materialTheme.brightness;
+  Brightness get brightness => _cupertinoOverrideTheme.brightness ?? _materialTheme.brightness;
 
   @override
-  Color get primaryColor => _materialTheme.cupertinoOverrideTheme?.primaryColor ?? _materialTheme.colorScheme.primary;
+  Color get primaryColor => _cupertinoOverrideTheme.primaryColor ?? _materialTheme.colorScheme.primary;
 
   @override
-  Color get primaryContrastingColor => _materialTheme.cupertinoOverrideTheme?.primaryContrastingColor ?? _materialTheme.colorScheme.onPrimary;
+  Color get primaryContrastingColor => _cupertinoOverrideTheme.primaryContrastingColor ?? _materialTheme.colorScheme.onPrimary;
 
   @override
-  Color get scaffoldBackgroundColor => _materialTheme.cupertinoOverrideTheme?.scaffoldBackgroundColor ?? _materialTheme.scaffoldBackgroundColor;
+  Color get scaffoldBackgroundColor => _cupertinoOverrideTheme.scaffoldBackgroundColor ?? _materialTheme.scaffoldBackgroundColor;
 
   /// Copies the [ThemeData]'s `cupertinoOverrideTheme`.
   ///
@@ -1457,7 +1466,7 @@ class MaterialBasedCupertinoThemeData extends CupertinoThemeData {
   /// new Material [Theme] and use `copyWith` on the Material [ThemeData]
   /// instead.
   @override
-  CupertinoThemeData copyWith({
+  MaterialBasedCupertinoThemeData copyWith({
     Brightness brightness,
     Color primaryColor,
     Color primaryContrastingColor,
@@ -1465,20 +1474,26 @@ class MaterialBasedCupertinoThemeData extends CupertinoThemeData {
     Color barBackgroundColor,
     Color scaffoldBackgroundColor,
   }) {
-    return _materialTheme.cupertinoOverrideTheme?.copyWith(
-      brightness: brightness,
-      primaryColor: primaryColor,
-      primaryContrastingColor: primaryContrastingColor,
-      textTheme: textTheme,
-      barBackgroundColor: barBackgroundColor,
-      scaffoldBackgroundColor: scaffoldBackgroundColor,
-    ) ?? CupertinoThemeData(
+    return MaterialBasedCupertinoThemeData._(
+      _materialTheme,
+      _cupertinoOverrideTheme.copyWith(
         brightness: brightness,
         primaryColor: primaryColor,
         primaryContrastingColor: primaryContrastingColor,
         textTheme: textTheme,
         barBackgroundColor: barBackgroundColor,
         scaffoldBackgroundColor: scaffoldBackgroundColor,
+      ),
+    );
+  }
+
+  @override
+  CupertinoThemeData resolveFrom(BuildContext context, { bool nullOk = false }) {
+    // Only the cupertino override theme part will be resolved.
+    // If the color comes from the material theme it's not resolved.
+    return MaterialBasedCupertinoThemeData._(
+      _materialTheme,
+      _cupertinoOverrideTheme.resolveFrom(context, nullOk: nullOk),
     );
   }
 }

packages/flutter/lib/src/widgets/media_query.dart

@@ -98,6 +98,7 @@ class MediaQueryData {
     this.alwaysUse24HourFormat = false,
     this.accessibleNavigation = false,
     this.invertColors = false,
+    this.highContrast = false,
     this.disableAnimations = false,
     this.boldText = false,
   });
@@ -121,6 +122,7 @@ class MediaQueryData {
       invertColors = window.accessibilityFeatures.invertColors,
       disableAnimations = window.accessibilityFeatures.disableAnimations,
       boldText = window.accessibilityFeatures.boldText,
+      highContrast = false,
       alwaysUse24HourFormat = window.alwaysUse24HourFormat;
 
   /// The size of the media in logical pixels (e.g, the size of the screen).
@@ -259,6 +261,13 @@ class MediaQueryData {
   ///  * [Window.AccessibilityFeatures], where the setting originates.
   final bool invertColors;
 
+  /// Whether the user requested a high contrast between foreground and background
+  /// content on iOS, via Settings -> Accessibility -> Increase Contrast.
+  ///
+  /// This flag is currently only updated on iOS devices that are running iOS 13
+  /// or above.
+  final bool highContrast;
+
   /// Whether the platform is requesting that animations be disabled or reduced
   /// as much as possible.
   ///
@@ -293,6 +302,7 @@ class MediaQueryData {
     EdgeInsets viewInsets,
     double physicalDepth,
     bool alwaysUse24HourFormat,
+    bool highContrast,
     bool disableAnimations,
     bool invertColors,
     bool accessibleNavigation,
@@ -309,6 +319,7 @@ class MediaQueryData {
       physicalDepth: physicalDepth ?? this.physicalDepth,
       alwaysUse24HourFormat: alwaysUse24HourFormat ?? this.alwaysUse24HourFormat,
       invertColors: invertColors ?? this.invertColors,
+      highContrast: highContrast ?? this.highContrast,
       disableAnimations: disableAnimations ?? this.disableAnimations,
       accessibleNavigation: accessibleNavigation ?? this.accessibleNavigation,
       boldText: boldText ?? this.boldText,
@@ -357,6 +368,7 @@ class MediaQueryData {
       ),
       viewInsets: viewInsets,
       alwaysUse24HourFormat: alwaysUse24HourFormat,
+      highContrast: highContrast,
       disableAnimations: disableAnimations,
       invertColors: invertColors,
       accessibleNavigation: accessibleNavigation,
@@ -404,6 +416,7 @@ class MediaQueryData {
         bottom: removeBottom ? 0.0 : null,
       ),
       alwaysUse24HourFormat: alwaysUse24HourFormat,
+      highContrast: highContrast,
       disableAnimations: disableAnimations,
       invertColors: invertColors,
       accessibleNavigation: accessibleNavigation,
@@ -451,6 +464,7 @@ class MediaQueryData {
         bottom: removeBottom ? 0.0 : null,
       ),
       alwaysUse24HourFormat: alwaysUse24HourFormat,
+      highContrast: highContrast,
       disableAnimations: disableAnimations,
       invertColors: invertColors,
       accessibleNavigation: accessibleNavigation,
@@ -472,6 +486,7 @@ class MediaQueryData {
         && typedOther.viewInsets == viewInsets
         && typedOther.physicalDepth == physicalDepth
         && typedOther.alwaysUse24HourFormat == alwaysUse24HourFormat
+        && typedOther.highContrast == highContrast
         && typedOther.disableAnimations == disableAnimations
         && typedOther.invertColors == invertColors
         && typedOther.accessibleNavigation == accessibleNavigation
@@ -490,6 +505,7 @@ class MediaQueryData {
       viewInsets,
       physicalDepth,
       alwaysUse24HourFormat,
+      highContrast,
       disableAnimations,
       invertColors,
       accessibleNavigation,
@@ -510,6 +526,7 @@ class MediaQueryData {
              'physicalDepth: $physicalDepth, '
              'alwaysUse24HourFormat: $alwaysUse24HourFormat, '
              'accessibleNavigation: $accessibleNavigation, '
+             'highContrast: $highContrast,'
              'disableAnimations: $disableAnimations, '
              'invertColors: $invertColors, '
              'boldText: $boldText'