Why do we use a custom theme in Flutter? You probably know the answer. We want to share a common Theme across the entire Flutter app.

What does a Theme include? It includes mostly the colors and fonts.

We need different type of colors in different places in our Flutter App. The Scaffold may have one background color. On the other hand, the AppBar may look great in another color. Or we can synchronize them.

However, firstly, we need to decide what kind of Theme we prefer. Dark or light?

It means a lot.

Why?

For the reason that Flutter takes some important decision after that.

Consider the code below. We have decided that our “Play with Lexis Quiz App” will have a dark theme. Consequently, we have declared that in our MaterialApp Widget theme property.

import 'package:flutter/material.dart';

import '../model/quiz_theme.dart';
import 'quiz_page.dart';

/// In a custom theme page we have described color and fonts
/// We may add more custom theme-features later
///

class QuizApp extends StatelessWidget {
  const QuizApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Playxis - Play + Lexis',
      theme: ThemeData.dark().copyWith(
        primaryColor: QuizTheme.primaryColor,
        scaffoldBackgroundColor: QuizTheme.scaffoldBackgroundColor,
      ),
      home: const QuizPage(),
    );
  }
}

The copyWith() method allows us to override the default properties. As a result, we can provide our own custom theme color here.

When Flutter sees that we have chosen a Dark theme, it automatically makes the Text white color.

Although we can override that property. We can make it light blue, or pink, or purple.

Moreover, we can do that in a Object Oriented Way. We can declare our all properties in a custom class.

As in this case, we have created a class in the “model” folder. We have chosen the “model” folder for maintaining the MVC approach. The model folder should act as the source of data.

Therefore, the QuizTheme Class goes as follows.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

/// In a custom theme page we have described color and fonts
/// We may add more custom theme-features later
///

class QuizTheme {
  static const Color primaryColor = Color(0xFF409B25);
  static const Color scaffoldBackgroundColor = Color(0xFF2C6F2E);
  static const Color appBarBackgroundColor = Color(0xFF2C6F2E);
  static const Color boxDecorationColor = Color(0xFFC5DA28);
  static const Color elevatedButtonPrimaryColor = Color(0xFF3C9415);
  static const Color dividerColor = Color(0xFFD9DB26);
  static const correctAnswerColor = Color(0xFFFACAFA);
  static const questionTextColor = Color(0xFFF8E1F8);
  static const answerColor = Color(0xFFFFFFFF);

  static TextStyle answerStyle = GoogleFonts.langar(
    textStyle: const TextStyle(
      color: QuizTheme.answerColor,
      fontSize: 20.0,
      fontWeight: FontWeight.bold,
    ),
  );

  static TextStyle questionStyle = GoogleFonts.laila(
    textStyle: const TextStyle(
      color: QuizTheme.questionTextColor,
      fontSize: 30.0,
      fontWeight: FontWeight.bold,
    ),
  );

  static TextStyle appbarStyle = GoogleFonts.salsa(
    textStyle: const TextStyle(
      color: QuizTheme.correctAnswerColor,
      fontSize: 20.0,
      fontWeight: FontWeight.bold,
    ),
  );
}

As we see, all Color properties are made static constant.

Why, because, any constant variable inside a class should always be static. So that it becomes the class constant. No object can either access it, or change it to change the value.

As a consequence, we can use this custom color and fonts where we want.

appBar: AppBar(
        title: Text(
          'Playxis - Play + Lexis',
          style: QuizTheme.appbarStyle,
        ),
        backgroundColor: QuizTheme.appBarBackgroundColor,
      ),

In the above code, we have used the AppBar text style and background color. However, we have defined them earlier. In QuizTheme Class.

static const Color appBarBackgroundColor = Color(0xFF2C6F2E);
...
static TextStyle appbarStyle = GoogleFonts.salsa(
    textStyle: const TextStyle(
      color: QuizTheme.correctAnswerColor,
      fontSize: 20.0,
      fontWeight: FontWeight.bold,
    ),
  );

For that reason, we can access the properties as class variable. Not as instance variable.

All across the Flutter App, we have used the custom theme class variables.

As a result, we now have a Flutter App that looks like the following.

---

---

If you want to run and change the code in your machine, please clone the project using this branch of GitHub repository.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter