How to make Material Design widget in CupertinoApp use same brightness color with CupertinoThemeData?

Question

My CupertinoApp include a Material Design style widget(NavigationRail). I want all widget use same theme.

Some of my code:

@override
Widget build(BuildContext context) {
  final Brightness platformBrightness = WidgetsBinding.instance.window.platformBrightness;
  return Theme(
    data: ThemeData(
      brightness: platformBrightness,
    ),
    child: CupertinoApp(
      onGenerateTitle: (context) => S.of(context).AppName,
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        S.delegate
      ],
      supportedLocales: S.delegate.supportedLocales,
      theme: CupertinoThemeData(
        brightness: platformBrightness,
      ),
      home: const Scaffold(
        resizeToAvoidBottomInset: false,
        body: SafeArea(
          bottom: false,
          child: HomePage(),
        ),
      ),
    ),
  );
}

HomePage return

return Row(
  children: <Widget>[
    SingleChildScrollView(
      controller: ScrollController(),
      scrollDirection: Axis.vertical,
      child: IntrinsicHeight(
        child: AppRightSideControls(_controller.future),
      ),
    ),
    const VerticalDivider(thickness: 1, width: 1),
    // This is the main content.
    Expanded(
      ...
    ),
  ],
);


class AppRightSideControls extends StatelessWidget {
  ...

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _webViewControllerFuture,
      builder:
          (BuildContext context, AsyncSnapshot<WebViewController> snapshot) {
        ...
        return NavigationRail(
          labelType: NavigationRailLabelType.all,
          ...
        );
      },
    );
  }
}

I have try to make CupertinoApp as child of Theme. Make ThemeData and CupertinoThemeData use same brightness. But I got two colors each of black and white.

Answer 1

I have solved this question by cupertinoOverrideTheme and ColorScheme.

theme: ThemeData(
        brightness: Brightness.light,
        cupertinoOverrideTheme: const CupertinoThemeData(
            barBackgroundColor: Color(0xF0F9F9F9),
            brightness: Brightness.light,
            textTheme:
                CupertinoTextThemeData(primaryColor: CupertinoColors.label)),
        colorScheme: ColorScheme.fromSeed(
          seedColor: CupertinoColors.activeBlue,
          surface: const Color(0xF0F9F9F9),
          onSurface: CupertinoColors.label,
          onBackground: CupertinoColors.label,
          background: const Color(0xF0F9F9F9),
          brightness: Brightness.light,
        ),
        dividerColor: CupertinoColors.secondarySystemFill,
      ),
darkTheme: ThemeData(
        cupertinoOverrideTheme: const CupertinoThemeData(
            barBackgroundColor: Color(0xFF1b1b1b),
            brightness: Brightness.dark,
            textTheme: CupertinoTextThemeData(primaryColor: Colors.white)),
        brightness: Brightness.dark,
        primaryColor: CupertinoColors.systemBackground,
        colorScheme: ColorScheme.fromSeed(
          seedColor: CupertinoColors.activeOrange,
          surface: CupertinoColors.black,
          onSurface: CupertinoColors.white,
          onBackground: CupertinoColors.white,
          background: CupertinoColors.black,
          brightness: Brightness.dark,
        ),
        scaffoldBackgroundColor: CupertinoColors.black,
        dialogBackgroundColor: CupertinoColors.black,
        dividerColor: CupertinoColors.systemFill,
      ),