Have Material widgets in a Cupertino App partially use Cupertino theme (#139253)

Fixes #138621

Fixes and issue where if a Material widget is used in a Cupertino App, then some parts of it's default Material 3 theming would show up as purplish. This could be fixed by wrapping your app with a Material theme, but that's a little awkward.

Material and Cupertino themes interact with each other a little oddly. If a theme of either is searched for but does not exist, then a default one is generated. So if a Material widget is in a Cupertino app that does not already have a Material theme, then a fallback Material theme will be created. This PR makes it so that, in this case when that Material theme is created, it's default colors will be based on the Cupertino theme.

Another oddity is that a Material theme always wraps itself with a Cupertino theme that's values are based on the Material theme. So before this change, a Material widget would theoretically add a new Material based Cupertino theme to the tree. So I added logic that would have the Material theme check to see if a Cupertino theme exists, before it overwrites it.

Before:
![image](https://github.com/flutter/flutter/assets/58190796/95874076-e943-48fa-ba9d-1d7b0f5a2f38)

After:
<img width="386" alt="Screenshot 2023-11-29 at 10 37 09�AM" src="https://github.com/flutter/flutter/assets/58190796/959ccfd9-3439-438e-ad36-20597334837a">

Update:
I changed it to not rely on the Material 3 flag. Instead, if a Material theme is searched for and there is already a Cupertino theme in the tree, then it will use that Cupertino theme instead of generating a new. Also, if a Material theme is searched for, and it does not find one already in the tree, but does find a Cupertino theme, then it will generate one with a color palette based off of that Cupertino theme's colors.

After with this change:
<img width="390" alt="Screenshot 2024-05-09 at 10 16 22�AM" src="https://github.com/flutter/flutter/assets/58190796/79765d04-a7a3-4eb5-9477-11668ed138e5">

We should still probably suggest for developers to include a Material theme in their Cupertino app if they wish to use widgets from both packages.

Author: MitchellGoodwin

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

@@ -63,7 +63,7 @@ class CupertinoTheme extends StatelessWidget {
   /// Resolves all the colors defined in that [CupertinoThemeData] against the
   /// given [BuildContext] on a best-effort basis.
   static CupertinoThemeData of(BuildContext context) {
-    final _InheritedCupertinoTheme? inheritedTheme = context.dependOnInheritedWidgetOfExactType<_InheritedCupertinoTheme>();
+    final InheritedCupertinoTheme? inheritedTheme = context.dependOnInheritedWidgetOfExactType<InheritedCupertinoTheme>();
     return (inheritedTheme?.theme.data ?? const CupertinoThemeData()).resolveFrom(context);
   }
 
@@ -83,7 +83,7 @@ class CupertinoTheme extends StatelessWidget {
   /// * [CupertinoThemeData.brightness], the property takes precedence over
   ///   [MediaQueryData.platformBrightness] for descendant Cupertino widgets.
   static Brightness brightnessOf(BuildContext context) {
-    final _InheritedCupertinoTheme? inheritedTheme = context.dependOnInheritedWidgetOfExactType<_InheritedCupertinoTheme>();
+    final InheritedCupertinoTheme? inheritedTheme = context.dependOnInheritedWidgetOfExactType<InheritedCupertinoTheme>();
     return inheritedTheme?.theme.data.brightness ?? MediaQuery.platformBrightnessOf(context);
   }
 
@@ -103,7 +103,7 @@ class CupertinoTheme extends StatelessWidget {
   /// * [brightnessOf], which throws if no valid [CupertinoTheme] or
   ///   [MediaQuery] exists, instead of returning null.
   static Brightness? maybeBrightnessOf(BuildContext context) {
-    final _InheritedCupertinoTheme? inheritedTheme = context.dependOnInheritedWidgetOfExactType<_InheritedCupertinoTheme>();
+    final InheritedCupertinoTheme? inheritedTheme = context.dependOnInheritedWidgetOfExactType<InheritedCupertinoTheme>();
     return inheritedTheme?.theme.data.brightness ?? MediaQuery.maybePlatformBrightnessOf(context);
   }
 
@@ -114,7 +114,7 @@ class CupertinoTheme extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return _InheritedCupertinoTheme(
+    return InheritedCupertinoTheme(
       theme: this,
       child: IconTheme(
         data: CupertinoIconThemeData(color: data.primaryColor),
@@ -130,12 +130,17 @@ class CupertinoTheme extends StatelessWidget {
   }
 }
 
-class _InheritedCupertinoTheme extends InheritedTheme {
-  const _InheritedCupertinoTheme({
+/// Provides a [CupertinoTheme] to all decendents.
+class InheritedCupertinoTheme extends InheritedTheme {
+  /// Creates an [InheritedTheme] that provides a [CupertinoTheme] to all
+  /// decendents.
+  const InheritedCupertinoTheme({
+    super.key,
     required this.theme,
     required super.child,
   });
 
+  /// The [CupertinoTheme] that is provided to widgets lower in the tree.
   final CupertinoTheme theme;
 
   @override
@@ -144,7 +149,7 @@ class _InheritedCupertinoTheme extends InheritedTheme {
   }
 
   @override
-  bool updateShouldNotify(_InheritedCupertinoTheme old) => theme.data != old.theme.data;
+  bool updateShouldNotify(InheritedCupertinoTheme oldWidget) => theme.data != oldWidget.theme.data;
 }
 
 /// Styling specifications for a [CupertinoTheme].

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

@@ -105,7 +105,10 @@ class Theme extends StatelessWidget {
     final _InheritedTheme? inheritedTheme = context.dependOnInheritedWidgetOfExactType<_InheritedTheme>();
     final MaterialLocalizations? localizations = Localizations.of<MaterialLocalizations>(context, MaterialLocalizations);
     final ScriptCategory category = localizations?.scriptCategory ?? ScriptCategory.englishLike;
-    final ThemeData theme = inheritedTheme?.theme.data ?? _kFallbackTheme;
+    final InheritedCupertinoTheme? inheritedCupertinoTheme = context.dependOnInheritedWidgetOfExactType<InheritedCupertinoTheme>();
+    final ThemeData theme = inheritedTheme?.theme.data ?? (
+      inheritedCupertinoTheme != null ? CupertinoBasedMaterialThemeData(themeData: inheritedCupertinoTheme.theme.data).materialTheme : _kFallbackTheme
+    );
     return ThemeData.localize(theme, theme.typography.geometryThemeFor(category));
   }
 
@@ -124,17 +127,20 @@ class Theme extends StatelessWidget {
     );
   }
 
+  CupertinoThemeData _inheritedCupertinoThemeData(BuildContext context) {
+    final InheritedCupertinoTheme? inheritedTheme = context.dependOnInheritedWidgetOfExactType<InheritedCupertinoTheme>();
+    return (inheritedTheme?.theme.data ?? MaterialBasedCupertinoThemeData(materialTheme: data)).resolveFrom(context);
+  }
+
   @override
   Widget build(BuildContext context) {
     return _InheritedTheme(
       theme: this,
       child: CupertinoTheme(
-        // We're using a MaterialBasedCupertinoThemeData here instead of a
-        // CupertinoThemeData because it defers some properties to the Material
-        // ThemeData.
-        data: MaterialBasedCupertinoThemeData(
-          materialTheme: data,
-        ),
+        // If a CupertinoThemeData doesn't exist, we're using a
+        // MaterialBasedCupertinoThemeData here instead of a CupertinoThemeData
+        // because it defers some properties to the Material ThemeData.
+        data: _inheritedCupertinoThemeData(context),
         child: _wrapsWidgetThemes(context, child),
       ),
     );

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

@@ -2210,6 +2210,33 @@ class MaterialBasedCupertinoThemeData extends CupertinoThemeData {
   }
 }
 
+/// A class for creating a Material theme with a color scheme based off of the
+/// colors from a [CupertinoThemeData]. This is intended to be used only in the
+/// case when a Material widget is unable to find a Material theme in the tree,
+/// but is able to find a Cupertino theme. Most often this will occur when a
+/// Material widget is used inside of a [CupertinoApp].
+///
+/// Besides the colors, this theme will use all the defaults from Material's
+/// [ThemeData], so if further customization is needed, it is best to manually
+/// add a Material [Theme] above the [CupertinoApp].
+class CupertinoBasedMaterialThemeData {
+  /// Creates a Material theme with a color scheme based off of the colors from
+  /// a [CupertinoThemeData].
+  CupertinoBasedMaterialThemeData({
+    required CupertinoThemeData themeData,
+  }) : materialTheme = ThemeData(
+      colorScheme: ColorScheme.fromSeed(
+        seedColor: themeData.primaryColor,
+        brightness: themeData.brightness ?? Brightness.light,
+        primary: themeData.primaryColor,
+        onPrimary: themeData.primaryContrastingColor,
+      )
+    );
+
+  /// The Material theme data with colors based on an existing [CupertinoThemeData].
+  final ThemeData materialTheme;
+}
+
 @immutable
 class _IdentityThemeDataCacheKey {
   const _IdentityThemeDataCacheKey(this.baseTheme, this.localTextGeometry);

packages/flutter/test/cupertino/app_test.dart

@@ -5,6 +5,7 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
@@ -448,6 +449,23 @@ void main() {
     debugBrightnessOverride = null;
   });
 
+  testWidgets('CupertinoApp creates a Material theme with colors based off of Cupertino theme', (WidgetTester tester) async {
+    late ThemeData appliedTheme;
+    await tester.pumpWidget(
+      CupertinoApp(
+        theme: const CupertinoThemeData(primaryColor: CupertinoColors.activeGreen),
+        home: Builder(
+          builder: (BuildContext context) {
+            appliedTheme = Theme.of(context);
+            return const SizedBox();
+          },
+        ),
+      ),
+    );
+
+    expect(appliedTheme.colorScheme.primary, CupertinoColors.activeGreen);
+  });
+
   testWidgets('Cursor color is resolved when CupertinoThemeData.brightness is null', (WidgetTester tester) async {
     debugBrightnessOverride = Brightness.dark;