How to Create Custom Theme in Flutter: Simple Guide

To create a custom theme in Flutter, define a ThemeData object with your colors, fonts, and styles, then pass it to the MaterialApp widget's theme property. This lets you apply consistent styling across your app easily.

Syntax

Use the ThemeData class to define colors, fonts, and styles. Then assign it to the theme property of MaterialApp. For example:

• primaryColor: Main color for app bars and buttons.
• accentColor: Highlight color for widgets.
• textTheme: Defines font styles for texts.

dart

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.blue,
    accentColor: Colors.orange,
    textTheme: TextTheme(
      bodyText1: TextStyle(fontSize: 18, color: Colors.black),
    ),
  ),
  home: MyHomePage(),
)

Output

App with blue primary color, orange accents, and custom text style applied globally.

Example

This example shows a Flutter app with a custom theme that changes the primary color, accent color, and text style. The theme is applied globally, so all widgets use these styles by default.

dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Theme Demo',
      theme: ThemeData(
        primaryColor: Colors.teal,
        accentColor: Colors.amber,
        textTheme: TextTheme(
          bodyText1: TextStyle(fontSize: 20, color: Colors.teal.shade900),
          headline6: TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('Home Page')),
        body: Center(
          child: Builder(
            builder: (context) => Text('Hello with custom theme!', style: Theme.of(context).textTheme.bodyText1),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Output

App screen with teal app bar, amber floating button, and teal-colored text in center.

Common Pitfalls

Common mistakes when creating custom themes include:

• Not using Theme.of(context) to access theme styles inside widgets, causing inconsistent styling.
• Overriding theme styles locally without need, which breaks global consistency.
• Using deprecated properties like accentColor instead of colorScheme.secondary in newer Flutter versions.

dart

/* Wrong: Hardcoding colors instead of using theme */
Text('Hello', style: TextStyle(color: Colors.red))

/* Right: Use theme colors for consistency */
Text('Hello', style: Theme.of(context).textTheme.bodyText1)

Quick Reference

Key properties for ThemeData:

• primaryColor: Main color for app bars and buttons.
• colorScheme: Defines a full set of colors including primary, secondary, and more.
• textTheme: Styles for different text types.
• buttonTheme: Styles for buttons.
• iconTheme: Styles for icons.

Key Takeaways

Define a custom ThemeData and assign it to MaterialApp.theme for app-wide styling.

Use Theme.of(context) inside widgets to access theme styles and keep UI consistent.

Prefer colorScheme over deprecated properties like accentColor for modern Flutter apps.

Avoid hardcoding colors and fonts inside widgets to maintain a consistent look.

Customize text styles, colors, and widget themes inside ThemeData for full control.