Setup: Theming

Why set up a theme?#

You don't need any theming to start building a Flutter app. If your goal is to start pumping out widgets as fast as possible, you can skip all this and use the ThemeData the Flutter CLI generated for you:

  primarySwatch: Colors.blue,

This will generate a complete Material Design palette based on the color blue (#2196F3).

The danger of this is at some point, you'll probably decide you want something a little different. Like a red button, maybe. You'll do this:

  child: Text("Permanently delete all my data"),

And maybe you'll look at it in your Simulator and decide you need a slightly darker red for better contrast with the text, so you'll change Colors.red to Colors.red.shade400.

Before you know it you've done this 100 times. At worst, you haven't been consistent and your app looks like it was finger-painted by a kindergarten class. At best, the app looks fine but if you want to change something, you have to change it in a hundred places.

And what if you want to add dark mode? Wow, that sounds painful.

You can save yourself a lot of trouble by starting with a theme handler and some universal colors.

theme_provider#

I recommend the theme_provider Pub package for all your theming needs. It helps you define multiple Material themes (and any custom colors you want) and use them throughout your app. If you need to change a color, you'll only have to update it in one place.

Go ahead and add it as a dependency now.

Creating a theme#

Create a new file in lib/ called theme.dart. Then create a class that implements AppThemeOptions:

class RevExTheme implements AppThemeOptions {}

AppThemeOptions doesn't have any fields or methods, it's just there to provide a type.

From here you can add any information you want to use to generate your theme. For now, let's add a theme name, a description, a brightness (which can be Brightness.dark or Brightness.light), three background colors, and accompanying text colors:

class RevExTheme implements AppThemeOptions {

You can add more colors (or other things) later, as needed.

Let's generate a theme based on your colors: