Flutter 3: How to extend ThemeData

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;
  @override
  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
  @override
  CustomColors lerp(ThemeExtension<CustomColors>? other…