flutterdartflutter-theme

Differences of using ThemeExtension vs class with static theme

Flutter 3 is out and I've been experimenting a little.

I have used the ThemeExtension

yt ref: https://www.youtube.com/watch?v=8-szcYzFVao

api ref: https://api.flutter.dev/flutter/material/ThemeData/extensions.html

and its great. However I'm starting to realize and ask myself I could have done the same result if I created a class with static const as properties such as colors, textstyles or any related theming.

Can someone enlighten me if why I should use ThemeExtensions instead?

Static class way:


// Setup
class AppColors {
  static const primaryColor = Color(0xFFFFFF);
  static const secondaryColor = Color(0xFFFFFF);
}


// Use case inside build

return Container(
  child: Text('Hello world'),
  color: AppColors.primaryColor,
)

ThemeExtension Way


// Setup
class AppColors extends ThemeExtension<AppColors>{
  final Color primaryColor;
  final Color secondaryColor;

  AppColors(this.primaryColor, this.secondaryColor);

  // .
  // ..
  // ... some @overrides such as copyWith() and lerp()
}


// Use case inside build

final colors = Theme.of(context).extensions<AppColors>()!;

return Container(
  child: Text('Hello world'),
  color: colors.primaryColor,
)

As you can see here setting up for ThemeExtension is quite huge compared on using just the static classes for theme to achieve the same result.

Solution

  • I think you should use Theme and/or ThemeExtension because: