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
themeproperty of the
- 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:
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
For more details about theming, read this page on the official docs:
To learn more about Material 3, head here:
To find out how to get the most value out of your Flutter app’s them, check this video about ThemeExtensions:
What about iOS?
Material 3 is the default design system on Android, so it makes sense to use it in your Flutter apps.
And if you want your Flutter apps to follow this system on iOS, consider using the Cupertino 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:
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:
- MDC-101 Flutter: Material Components Basics
- MDC-102 Flutter: Material Structure and Layout
- MDC-103 Flutter: Material Theming with Color, Shape, Elevation, and Type
- MDC-104 Flutter: Material Advanced Components