Flutter customizes themes and toggles save

Keywords: Android Mobile

Hello, welcome to follow me. This is a series of articles about Flutter that will take you step by step into the world of Flutter, starting with a simple introduction to Flutter.You'd better have some mobile development experience. If you don't, don't worry. Leave a message at the bottom of my column and I'll do my best to answer it.

Last post was about how to publish your own Flutter library to the public library.This is my eighth article on Flutter, and I believe that through previous studies, you've learned all the tricks you need to master in flutter development.Starting with this column, I'll be more inclined to introduce issues and solutions, as well as some tips, that you may encounter when developing with Flutter in practice.

Previously, Flutter is a complete library that provides a number of mature controls and architectural ideas that can be used directly, as are the topics covered in this article.

More and more applications now support black/white theme switching, which is simpler in Flutter, where two default themes, ThemeData.dark and Theme.light, are available in the Flutter library.Set it directly when main.dart initializes MaterialApp

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

1. Custom Themes

Now that you know how to set a theme, let's see how to customize it.After copyWith in the original theme style, modify some colors that need to be customized into the theme.

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),
  );
}

2. Use custom themes

Once you have a custom theme, you can set it up for use during the initial MaterialApp initialization.The theme object can be obtained directly and reused where a specific color is required.

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

When you need to change the theme dynamically, you can switch directly by using the setState(() {}) method of the StatefulWidget.

3. Save Theme

We want App to keep the last modified theme the next time it starts after the theme changes, so we'll save it with shared_preferences.

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

Remove from shared_preferences when App starts and call Widget refresh.

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

Posted by vboyz on Mon, 01 Jul 2019 09:53:45 -0700