Flutter 3: How to extend ThemeData
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; @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…