Color and Style: global const vs theme

Photo by Brett Jordan on Unsplash

Are themes really that great?

He begins with the advice to use themes and points out the following advantages:

  • It prevents code repetition
  • It’s easier to adjust a property at one place and see the change everywhere.

It’s easier to reference properties anywhere in the code

This is even easier with global constants. The Intellisense popup lists all defined constants as soon as I enter the small k. This is a convention that is also used in Googles flutter and dart source code.

It prevents code repetition

This is also achieved. Define a constant once and use it anywhere.

It’s easier to adjust a property at one place and see the change everywhere.

This also applies here. If I adjust the global constant, all widgets that use it will change.

backgroundColor: Theme.of(context).accentColor,
backgroundColor: kAccentColor,
Text("Theming",style: Theme.of(context).textTheme.title,)
Text("Theming",style: kStyleTitle,)
theme: ThemeData( 
primarySwatch: Colors.lightBlue,
accentColor: Colors.teal,
fontFamily: 'Lato',
textTheme: ThemeData.light().textTheme.copyWith(
title: TextStyle(
fontSize: 20,
fontFamily: 'Lato',
fontWeight: FontWeight.bold,
),),)
const kStyleTitle = TextStyle( 
fontSize: 20, fontFamily: 'Lato', fontWeight: FontWeight.bold,
)
const Color kSliderColor = Color.fromARGB(0xff, 0xe1, 0x0c, 0x35);

And what about the runtime performance?

I expect the simple use of a constant takes less cpu cycles than looking up a value in the widget tree by the Theme.of(context) call.

So what’s the catch?

After this outweigh of the advantages what are the disadvantages of global constants?

  • Unexpected naming conflicts can occur, for example when an added plugin or updated library suddenly uses the same name.
The error message could hardly be better
It’s easy to find the constant in the Intellisense popup
const kTextFieldDecoration = InputDecoration( 
hintText: 'Enter a value',
contentPadding: EdgeInsets.symmetric(
vertical: 10.0, horizontal: 20.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(32.0)),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blueAccent, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blueAccent,
width: 2.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
);
const kMessageContainerDecoration = BoxDecoration( 
border: Border(
top: BorderSide(
color: Colors.lightBlueAccent, width: 2.0),
),
);

If you can’t live with global const

then wrap them as statics in a class like so:

class Constants{ 
String appName = "Flutter App";
static Color lightPrimary = Colors.white;
static Color darkPrimary = Colors.black;
}
barColor: isDark ? Constants.darkPrimary : Constants.lightPrimary,

Conclusion

This article was just comparing flutter standard theming versus global constants. I prefer using a collection of global const in a single file, which I name app_constants.dart.

Software Developer for more than 35 years, started with C and C++, after Java, Python, Groovy, Lua, Golang and Swift now focussing on Dart and Flutter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store