Flutter custom theme and switch to save

Hello, welcome to my attention, this article is a series of text about Flutter, Flutter introduced beginning from simple, step by step take you into the world of Flutter. You have some of the best mobile development experience, if not do not worry, at the bottom of my columns give me a message, I will do my best to answer you.

Previous, is to teach you how to publish your own Flutter library to the public library. Benpian me about Flutter is the eighth article, I believe that learning through before, we need to master the development of Flutter tips are well understood before. From the beginning of this column, I will be more biased in favor of exploring the practical use of Flutter development experience and solutions, as well as some tips.

Introduced before Flutter is a complete library itself offers a lot of mature controls and architectural ideas can be directly used, the subject of this to be introduced as well.

Now more and more applications support black / white theme switching, and more in Flutter is simple, providing ThemeData.dark and Theme.light two default themes Flutter library. When main.dart MaterialApp initialization settings directly into the can

MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );

A Custom Theme

Know how to set the theme, we look at how to customize the theme. Following the adoption of copyWith original theme styles, colors need to modify some of the themes in the custom.

ThemeData _buildDarkTheme() {
  const Color primaryColor = Color(0xFF0175c2);
  final ThemeData base = new ThemeData.dark();
  return base.copyWith(
    primaryColor: primaryColor,
    buttonColor: primaryColor,
    indicatorColor: Colors.white,
    accentColor: const Color(0xFF13B9FD),
    canvasColor: const Color(0xFF202124),
    scaffoldBackgroundColor: const Color(0xFF202124),
    backgroundColor: const Color(0xFF202124),
    errorColor: const Color(0xFFB00020),
    buttonTheme: const ButtonThemeData(
      textTheme: ButtonTextTheme.primary,
    ),
    textTheme: _buildTextTheme(base.textTheme),
    primaryTextTheme: _buildTextTheme(base.primaryTextTheme),
    accentTextTheme: _buildTextTheme(base.accentTextTheme),
  );
}

II. Use custom theme

Once you have a custom theme, we can use it to set the initial MaterialApp initialization time. In some places need special colors can be specified directly to the theme objects before use.

Text(widget.options.theme.toString(), 
     style: TextStyle(
     color: widget.options.theme.data.textTheme.body1.color),),

When the need to dynamically change the subject when using the setState StatefulWidget (() {}) method can be switched directly.

III. Save Theme

We hope that next time you start App also retains the last modified theme after theme change, then we will use shared_preferences saved.

void putAppString(String key, String value) async {
    (await SharedPreferences.getInstance()).setString(key, value);
  }

When the App starts removed from shared_preferences, then call to refresh Widget.

static Future<String> getAppString(String key) async {
    return (await SharedPreferences.getInstance()).getString(key);
}