Recommended Dark/Light or custom Theme implementation in Flutter Cupertino

user_3516001 0
Viewed 6778

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)?

flutter
2 Answers

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

user_113158210

you can use the following package to control dark and light themes, also the theme is saved directly into shared preferences so when you reopen the application, the latest theme you chose will be loaded,use the package as provided in the read me section. https://pub.dartlang.org/packages/dynamic_theme

user_100757180
Related