Recommended Dark/Light or custom Theme implementation in Flutter Cupertino

Question

I’m currently implementing an iOS style app in flutter using the CupertinoApp class and Cupertino widgets. Now I would like to implement a different Theme for the application (like feedly did), so that the user can switch between both during runtime.

Unlike a MaterialApp, CupertinoApp has no property to set the theme.

MaterialApp with theme property:

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

CupertinoApp without theme property:

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Flutter Demo',
      // theme: ThemeData(
      //   primarySwatch: Colors.blue,
      // ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

It looks like sb. is working on a CupertinoTheme which actually seems to be a Theme for a MaterialApp and not for a CupertinoApp.

What's the recommended way to define themes and change them during runtime in a Cupertino style app (e.g. Dark and Light Theme)?

Answer 1

First of all CupertinoThemeData is an alternative for ThemeData:

import 'package:flutter/cupertino.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Flutter Demo',
      theme: CupertinoThemeData(),
      home: MyHomePage(),
     );
    }
  }

CupertinoThemeData has a 'raw' property which contains these properties: Brightness, primaryColor, primaryContrastingColor, textTheme and so on. Would you want to choose either dark or light? that's too easy!!

CupertinoThemeData.raw(Brightness.light)
CupertinoThemeData.raw(Brightness.dark)

but if you want to change it during runtime you should write a function:

CupertinoThemeData generalTheme(Brightness brightness) {
  CupertinoThemeData _basicCupertinoTheme = CupertinoThemeData.raw(
    brightness,
    ...
}

As you see, you can send an argument to function but don't forget to use setState method. For more info check out CupertinoThemeData.raw constructor