Flutter Themes

Styling your Flutter app with consistent themes

🎨 What are Flutter Themes?

Flutter themes allow you to define consistent colors, fonts, and styles across your entire app. Themes make your app look professional and maintain visual consistency throughout all screens. 


// Simple theme example
MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.blue,
    brightness: Brightness.light,
  ),
  home: MyHomePage(),
)

Key Theme Concepts

🎨

Color Scheme

Define primary, secondary, and accent colors for your app's visual identity 

colorScheme: ColorScheme.fromSeed(
  seedColor: Colors.deepPurple,
)
✏️

Text Theme

Set consistent font styles, sizes, and weights throughout your application 

textTheme: TextTheme(
  headlineLarge: TextStyle(fontSize: 32),
)
🌙

Dark Mode

Support both light and dark themes for better user experience and accessibility 

darkTheme: ThemeData.dark(
  useMaterial3: true,
)
🎯

Custom Themes

Create unique themes matching your brand with custom colors and styles 

ThemeData(
  primarySwatch: Colors.teal,
  fontFamily: 'Roboto',
)

🔹 Basic Theme Setup

Create a simple theme for your Flutter app: 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Theme Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.light,
        useMaterial3: true,
      ),
      home: HomePage(),
    );
  }
}

Result:

Your app will use blue as the primary color with Material 3 design throughout all screens.

🔹 Light and Dark Theme

Support both light and dark modes in your app: 

MaterialApp(
  title: 'Theme Switcher',
  // Light theme
  theme: ThemeData(
    brightness: Brightness.light,
    primaryColor: Colors.blue,
    scaffoldBackgroundColor: Colors.white,
  ),
  // Dark theme
  darkTheme: ThemeData(
    brightness: Brightness.dark,
    primaryColor: Colors.blueGrey,
    scaffoldBackgroundColor: Colors.grey[900],
  ),
  // System theme mode
  themeMode: ThemeMode.system,
  home: HomePage(),
)

Result:

App automatically switches between light and dark theme based on system settings.

🔹 Custom Color Scheme

Define a custom color palette for your brand: 

ThemeData(
  colorScheme: ColorScheme(
    brightness: Brightness.light,
    primary: Color(0xFF6200EE),
    onPrimary: Colors.white,
    secondary: Color(0xFF03DAC6),
    onSecondary: Colors.black,
    error: Colors.red,
    onError: Colors.white,
    background: Colors.white,
    onBackground: Colors.black,
    surface: Colors.white,
    onSurface: Colors.black,
  ),
)

Result:

All widgets will use your custom color scheme consistently across the app.

🔹 Text Theme Customization

Customize typography for different text styles: 

ThemeData(
  textTheme: TextTheme(
    displayLarge: TextStyle(
      fontSize: 57,
      fontWeight: FontWeight.bold,
    ),
    headlineMedium: TextStyle(
      fontSize: 28,
      fontWeight: FontWeight.w600,
    ),
    bodyLarge: TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.normal,
    ),
    labelLarge: TextStyle(
      fontSize: 14,
      fontWeight: FontWeight.w500,
    ),
  ),
)

Result:

Text widgets automatically use the defined styles based on their type (headline, body, etc.).

🔹 Accessing Theme in Widgets

Use theme values in your widgets: 

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).primaryColor,
      child: Text(
        'Themed Text',
        style: Theme.of(context).textTheme.headlineMedium,
      ),
    );
  }
}

Result:

Widget uses colors and text styles from the app's theme automatically.

🧠 Test Your Knowledge

What property is used to set a dark theme in Flutter?