Flutter 3: How to extend ThemeData

Crizant Lai
Geek Culture
Published in
3 min readMay 12, 2022


In 2019, I have written an article about extending the flutter ThemeData class by using Extension methods. In my opinion, that was just a workaround; it has some drawbacks and it’s not very elegant. With the release of Flutter 3.0, it comes with a better solution: the ThemeExtension class.

The New Solution

We are going to make the bootstrap flavoured colour scheme, just like the last time:

First of all, create a file custom_color_scheme.dart:

import 'package:flutter/material.dart';@immutable
class CustomColors extends ThemeExtension<CustomColors> {
const CustomColors({
required this.success,
required this.info,
required this.warning,
required this.danger,
final Color? success;
final Color? info;
final Color? warning;
final Color? danger;
CustomColors copyWith({
Color? success,
Color? info,
Color? warning,
Color? danger,
}) {
return CustomColors(
success: success ?? this.success,
info: info ?? this.info,
warning: warning ?? this.warning,
danger: danger ?? this.danger,
// Controls how the properties change on theme changes
CustomColors lerp(ThemeExtension<CustomColors>? other…



Crizant Lai
Geek Culture

A JavaScript/Node/Flutter developer who love technical stuffs.