Material 3 theme recipe for the flutter app
Tags: flutter, m3, theme, material
Published: 2022-10-30 02:44:28

---
title: Material 3 theme recipe for the flutter app
published: true
description: 
tags: #flutter #m3 #theme #material
---

## Apply Color scheme

### 1. Create the color scheme and export it using the theme builder. 
https://m3.material.io/theme-builder
![Material3 theme builder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyegw3a5gf0b9p7k6zmb.png)

For collaborating with UI designers, it can be generated from  Figma as well:
https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder
https://www.figma.com/community/file/1035203688168086460

The web version of the theme builder creates the `color_schemes.g.dart` file with an example(`main.g.dart`).
Copy the `color_schemes.g.dart` file into the project.

### 2. Set the theme with the MaterialApp()

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(useMaterial3: true, colorScheme: lightColorScheme),
      darkTheme: ThemeData(useMaterial3: true, colorScheme: darkColorScheme),
      themeMode: ThemeMode.light, // Default is system
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
```
The `themeMode` is the system by default. Change and verify if the colors are good.

## Apply typography

### 1. Create a typography file

```dart
// Example typography.dart file
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

final textTheme = TextTheme(
  displayLarge: GoogleFonts.inter(
    fontWeight: FontWeight.w400,
    fontSize: 57,
    height: 64 / 57,
    letterSpacing: -0.25,
  ),
  displayMedium: GoogleFonts.inter(
    fontWeight: FontWeight.w400,
    fontSize: 45,
    height: 52 / 45,
  ),
  displaySmall: GoogleFonts.inter(
    fontWeight: FontWeight.w400,
    fontSize: 36,
    height: 44 / 36,
  ),
  headlineLarge: GoogleFonts.inter(
    fontWeight: FontWeight.w400,
    fontSize: 32,
    height: 40 / 32,
  ),
  headlineMedium: GoogleFonts.inter(
    fontWeight: FontWeight.w400,
    fontSize: 28,
    height: 36 / 28,
  ),
  headlineSmall: GoogleFonts.inter(
    fontWeight: FontWeight.w400,
    fontSize: 24,
    height: 32 / 24,
  ),
  titleLarge: GoogleFonts.inter(
    fontWeight: FontWeight.w700,
    fontSize: 22,
    height: 28 / 22,
  ),
  titleMedium: GoogleFonts.inter(
    fontWeight: FontWeight.w600,
    fontSize: 16,
    height: 24 / 16,
    letterSpacing: 0.1,
  ),
  titleSmall: GoogleFonts.inter(
    fontWeight: FontWeight.w600,
    fontSize: 14,
    height: 20 / 14,
    letterSpacing: 0.1,
  ),
  labelLarge: GoogleFonts.inter(
    fontWeight: FontWeight.w700,
    fontSize: 14,
    height: 20 / 14,
  ),
  labelMedium: GoogleFonts.inter(
    fontWeight: FontWeight.w700,
    fontSize: 12,
    height: 16 / 12,
  ),
  labelSmall: GoogleFonts.inter(
    fontWeight: FontWeight.w700,
    fontSize: 11,
    height: 16 / 11,
  ),
  bodyLarge: GoogleFonts.inter(
    fontWeight: FontWeight.w400,
    fontSize: 16,
    height: 24 / 16,
  ),
  bodyMedium: GoogleFonts.inter(
    fontWeight: FontWeight.w400,
    fontSize: 14,
    height: 20 / 14,
  ),
  bodySmall: GoogleFonts.inter(
    fontWeight: FontWeight.w400,
    fontSize: 12,
    height: 16 / 12,
  ),
);
```

In the example, I used GoogleFont. Should you wish to use the google font, add the package.
```bash
flutter pub add google_fonts
```
Adjust the values according to the design.

### 2. Apply the typography to MaterialApp (textTheme)
```dart
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: lightColorScheme,
        textTheme: textTheme,
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        colorScheme: darkColorScheme,
        textTheme: textTheme,
      ),
```

## How to use the theme in your widgets
By default, everything should be set with the theme we defined. You can use these methods if you need to override them for some widgets.

```dart
// Method 1 - Read from the context and apply
final color = Theme.of(context).colorScheme.primary;
Container(color: color);

// Method 2 - Wrap the widget with the Theme
Theme(
      data: Theme.of(context).copyWith(
        textTheme: Theme.of(context)
            .textTheme
            .apply(displayColor: Colors.white, bodyColor: Colors.white),
      ),
      child: Widget(),
)
```
_Never hard code colors or text styles._

The complete code can be found on [github](https://github.com/leehack/flutter_skeleton/tree/add_theme)