ThemeData configuration in Flutter

Introduction

ThemeData helps you set colors and styles for your whole app in one place. This makes your app look nice and consistent.

When you want all buttons to have the same color.

When you want to change the background color of your app easily.

When you want to set a default font style for all text.

When you want to switch between light and dark modes.

When you want to make your app look unique with custom colors.

Syntax

Flutter

ThemeData(
  primaryColor: Colors.blue,
  colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.orange),
  textTheme: TextTheme(
    bodyText1: TextStyle(fontSize: 16, color: Colors.black),
  ),
  brightness: Brightness.light,
)

primaryColor sets the main color used in your app.

brightness controls if the theme is light or dark.

Examples

Sets the main color to red for your app.

Flutter

ThemeData(primaryColor: Colors.red)

Changes the app to use a dark theme.

Flutter

ThemeData(brightness: Brightness.dark)

Customizes the style of big headings in your app.

Flutter

ThemeData(
  textTheme: TextTheme(
    headline1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
  ),
)

Sample App

This app uses ThemeData to set a green primary color and text style. The text on the home screen uses the theme's text style.

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ThemeData Demo',
      theme: ThemeData(
        primaryColor: Colors.green,
        brightness: Brightness.light,
        textTheme: const TextTheme(
          bodyText1: TextStyle(fontSize: 18, color: Colors.green),
        ),
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Center(
        child: Text(
          'Hello with Theme!',
          style: Theme.of(context).textTheme.bodyText1,
        ),
      ),
    );
  }
}

Important Notes

You can access theme colors anywhere using Theme.of(context).

Changing ThemeData updates the look of many widgets automatically.

Use brightness to easily switch between light and dark modes.

Summary

ThemeData sets colors and styles for your whole app.

It helps keep your app looking consistent and easy to change.

You can customize colors, fonts, and brightness with ThemeData.