Adding Material App theme in Flutter. The right way!

Setting up a good theme for a Mobile Application is a necessary part, and an excellent focus should be involved in creating that.

Before diving into the main section, let’s get a quick guide about Primary Color and Primary Swatch.

Primary Swatch

It’s a Material Color, which means it has different Shades available.

Primary Color

A Primary Color is just a color.

w.r.t the above statement a subpart of a Material Color is a Primary Color.

article thumbnail

Here’s how?

We will be using Material Color themes for our Flutter application.

Step#1

Create a new dart file as “app_theme.dart” and under this, add a snippet,

Snippet#1

import 'package:flutter/material.dart';

class AppTheme{
  static ThemeData applicationTheme() {
    return ThemeData(
      fontFamily: 'JosefinSans',
      floatingActionButtonTheme: const FloatingActionButtonThemeData(
        backgroundColor: Colors.lightBlue
      ),
      accentColor: Colors.blue,
      errorColor: const Color(0xffffffff),
    );
  }
}