Flutter Theming

When designing mobile apps, it’s important to create a cohesive design by sharing colors and font styles.

But how can we ensure all the colors and styles are applied consistently across all the pages in your app?

The answer is to use Flutter’s theming system by following two main steps:

Creating an app theme by setting the theme property of the MaterialApp constructor.
Apply the theme by using Theme.of(context) when specifying a widget’s styling properties.

As of Flutter 3.16, Material 3 is Flutter’s default theme (while older Flutter versions were still using the Material 2 specification).

To get a better idea of how all the Flutter widgets look with this theme, check this Material 3 demo:

Flutter Material 3 demo

Note: click Material 2 toggle on the bottom left corner to see the difference between Material 3 and Material 2.

With Material 3, you can create light and dark color schemes based on a given seed color, and this is easily done by passing a ColorScheme.fromSeed object to the colorScheme property of your MaterialApp.

For more details about theming, read this page on the official docs:

Use themes to share colors and font styles

To learn more about Material 3, head here:

Material Design for Flutter

To find out how to get the most value out of your Flutter app’s them, check this video about ThemeExtensions:

ThemeExtensions | Decoding Flutter

And if you want to build some advanced themes without getting lost amongst dozens of ThemeData properties and sub-themes, consider using the FlexColorScheme package by Mike Rydstrom:

flex_color_scheme

What about iOS?

Material 3 is the default design system on Android, so it makes sense to use it in your Flutter apps.

However, a different design system is used across all Apple platforms, following Apple’s Human Interface Guidelines.

And if you want your Flutter apps to follow this system on iOS, consider using the Cupertino widgets:

Cupertino (iOS-style) widgets

Automatic platform adaptations

Beyond the UI, there are many differences between Android and iOS, including:

Navigation transitions and back navigation
Different scroll physics and overscroll behavior
Typography and iconography
Text editing and gestures

To make your life easier, Flutter apps are adaptive by default, and they follow the look and feel of the platform they are running in. Learn more about it here:

Automatic platform adaptations

Daily Challenge - Material Design Codelabs

The official documentation contains many codelabs about designing Flutter UIs.

If you want to level up your theming skills, try completing these codelabs:

Happy coding!