CupertinoThemeData ignored for PlatformApp in IOS

[gkustas]

I am trying to create a basic dark mode theme for IOS. The material (Android) dark mode them works fine simply by using this:

final darkTheme = ThemeData.dark();

and then this in the PlatformApp constructor:

material: (_, __) => MaterialAppData(theme: darkTheme),

So, I assumed I could do this for IOS:

const cupertinoDark = CupertinoThemeData( brightness: Brightness.dark, primaryColor: Color(0xff5dd5f1), scaffoldBackgroundColor: Colors.black, primaryContrastingColor: Colors.black, textTheme: CupertinoTextThemeData( primaryColor: Color(0xff5dd5f1), textStyle: TextStyle(color: Colors.white)), );

and then this in the PlatformApp constructor:

cupertino: (_, __) => CupertinoAppData(theme: cupertinoDark),

When I run the app in IOS mode, nothing in the theme is used. I get an app theme that resembles the default theme, which is light mode, with black text, white backgrounds, etc. It doesn't seem to matter what I put into the theme, it's ignored.

I suspect I'm doing (or assuming) something wrong. Please advise. A sample of a dark mode platform widget app would be great!

flutter_platform_widgets 1.12.1 and 1.20.0 (both fail)

Flutter doctor -v:

[✓] Flutter (Channel stable, 2.10.2, on macOS 11.6.5 20G527 darwin-x64, locale en-US) • Flutter version 2.10.2 at /Users/george/Develop/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 097d3313d8 (2 months ago), 2022-02-18 19:33:08 -0600 • Engine revision a83ed0e5e3 • Dart version 2.16.1 • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0) • Android SDK at /Users/george/Library/Android/sdk/ • Platform android-31, build-tools 32.0.0 • ANDROID_HOME = /Users/george/Library/Android/sdk/ • ANDROID_SDK_ROOT = /Users/george/Library/Android/sdk/ • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822) • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1) • Xcode at /Applications/Xcode.app/Contents/Developer • CocoaPods version 1.11.2

[✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)

[✓] VS Code (version 1.66.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.40.0

[✓] Connected device (3 available) • George Kustas’s iPhone (mobile) • d3c69ceedee63f62fbc1638a5247e08afda0c9c6 • ios • iOS 14.8.1 18H107 • iPhone 8 (mobile) • 6D001806-E966-429F-BE76-D3C7109C2E97 • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator) • Chrome (web) • chrome • web-javascript • Google Chrome 101.0.4951.54

[✓] HTTP Host Availability • All required HTTP hosts are available

• No issues found!

[gkustas]

Answering my own question here. The solution is to follow the latest example for flutter_platform_widgets when building the top level Widget. From my main.dart, notice that instead of providing the theme in the PlatformProvider constructor, you need to wrap the the top level widget in a material theme that has a Cupertino override.

void main() async {
     ...
     runApp(MyApp());
}

final materialTheme = ThemeData(brightness: Brightness.dark, cupertinoOverrideTheme: cupertinoDark);

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
     return Theme(           // <===== This is the key - return Theme with material theme that has Cupertino Override
        data: materialTheme,
        child: PlatformProvider(
           ...    // <======= don't need to specify a cupertino or material theme here
         )
     );
  }