In Flutter development, we can make the design of Flutter look more consistent by defining a Theme, reusing colors and font styles.

The use of Theme

Theme is classified into global Theme and local Theme

Themes serve two purposes:

  • Once the theme is set, some widgets will automatically use the theme style (such as the color of the AppBar)
  • Some styles are managed centrally in themes and referenced directly elsewhere in the application

1.1. The global Theme

The global Theme affects the color and font style of the entire app.

It is very simple to use, just passing ThemeData to the MaterialApp constructor.

  • If the Theme is not set, the Flutter will use the preset style.
  • Of course, we can customize it.
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
 title: 'Flutter Demo'. theme: ThemeData(  // 1. Brightness: light-dark  brightness: Brightness.light,  // 2. PrimarySwatch: a combination of primaryColor and accentColor  primarySwatch: Colors.red,  // 3. Main color: navigation/bottom TabBar  primaryColor: Colors.pink,  // 4. Secondary color: FloatingActionButton/ button color  accentColor: Colors.orange,  // 5. Card theme  cardTheme: CardTheme(  color: Colors.greenAccent,  elevation: 10. shape: Border.all(width: 3, color: Colors.red),  margin: EdgeInsets.all(10)  ),  // 6. Button theme  buttonTheme: ButtonThemeData(  minWidth: 0. height: 25  ),  // 7. Text theme  textTheme: TextTheme(  title: TextStyle(fontSize: 30, color: Colors.blue),  display1: TextStyle(fontSize: 10),  )  ),  home: HYHomePage(),  );  } } Copy the code
Global theme

1.2. Local Theme

What if a specific Widget doesn’t want to use the global Theme directly, but wants to define its own Theme?

  • It’s as simple as wrapping the Theme around the Widget’s parent node

Create another new page with a new theme:

  • The Scaffold for the new page wraps a Theme and sets Data to a new ThemeData
class HYSecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(),
 child: Scaffold(  ),  );  } } Copy the code
A new theme

However, a lot of times we don’t want to completely use a new theme and make changes to the previous theme:

class HYSecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
 primaryColor: Colors.greenAccent  ),  child: Scaffold(  ),  );  } } Copy the code

1.3 error of Flutter Chinese website

But there is one caveat: accentColor is not overwritten here.

Why can’t it be covered? https://github.com/material-components/material-components-flutter-codelabs/issues/106

Let me quote some of the official responses:

image-20200325105126901

In fact, similar errors have occurred in Flutter’s official documents before. For example, Flutter Chinese had previously translated official documents

  • https://flutterchina.club/cookbook/design/themes/ including the error
image-20200325103731257

This issue was later corrected in the official documentation:

image-20200325103957271

Two. Dark Theme adaptation

2.1. darkTheme

There are many applications that need to adapt dark mode. How do you adapt dark mode in Flutter?

In fact, there are two parameters in the MaterialApp: theme and dartTheme:

  • We have adapted the dark theme by default as follows
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
 title: 'Flutter Demo'. theme: ThemeData.light(),  darkTheme: ThemeData.dark(),  home: HYHomePage(),  );  } } Copy the code
Topic adaptation

2.2. Adaptation in development

In development, to accommodate both themes (set to more themes), we can wrap an AppTheme

  • 1. Extract common styles into constants
  • 2. Encapsulate a bright theme
  • Encapsulate a dark theme
import 'package:flutter/material.dart';

class AppTheme {
  // 1. Extract the same style
  static const double _titleFontSize = 20;
  // 2. Bright theme  static final ThemeData lightTheme = ThemeData(  primarySwatch: Colors.pink,  primaryTextTheme: TextTheme(  title: TextStyle(  color: Colors.yellow,  fontSize: _titleFontSize  )  ),  textTheme: TextTheme(  body1: TextStyle(color: Colors.red)  )  );   // 3. Dark theme  static final ThemeData darkTheme = ThemeData(  primaryColor: Colors.grey,  primaryTextTheme: TextTheme(  title: TextStyle(  color: Colors.white,  fontSize: _titleFontSize  )  ),  textTheme: TextTheme(  title: TextStyle(color: Colors.white),  body1: TextStyle(color: Colors.white70)  )  ); } Copy the code

In the MaterialApp, you can decide which topic to use:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
 title: 'Flutter Demo'. theme: AppTheme.lightTheme,  darkTheme: AppTheme.darkTheme,  home: HYHomePage(),  );  } } Copy the code

Note: All content will be published on our official website. Later, Flutter will also update other technical articles, including TypeScript, React, Node, Uniapp, MPvue, data structures and algorithms, etc. We will also update some of our own learning experiences

The public,