This is the third part of my journey to build and publish a Flutter based app for the App Store and Google Play.
2014 Baseline Material color theme
Material Design made its debut with a built-in, baseline theme with 12 colours named and defined. Much has changed but these building blocks are important to understand as you think about the colours in your app.
Primary #6200EE |
Primary Variant #3700B3 |
Secondary #03DAC6 |
Secondary Variant #018786 |
Background #FFFFFF |
Surface #FFFFFF |
Error #B00020 |
On Primary #FFFFFF |
On Secondary #000000 |
On Background #000000 |
On Surface #000000 |
On Error #FFFFFF |
TL:DR – The colours in mobile apps can look good if you pay attention to themes and colour choices. I like to use tools to help me visualise the app colours and this article shows how.
Contents
- 2014 Baseline Material color theme
- Making apps look good with colour
- Choosing colours
- Shades and tints from our logo applied to the baseline Material color theme
- Material Design Color Pallettes
- Material Design Color Tool
- Add the colour pallette to your project
- Edit
main.dart
to add the code for these specific colours - Light and dark appearance
- Light and Dark appearance
- Move the Logo to the App Bar
- Move the logo to the App Bar
- "On" colors
Making apps look good with colour
Lets face it, the image, the app name and title in the appBar created last time don't look good at all. Lets add some depth through a color pallette. That is easy to do because Material design is all about colours, right? There's only one way to find out!
The Material Design color system helps create a coherent set of colours for your app, ensuring accessible text and controls, while supporting dark and light variation on modern devices. You can use the Material Design Colour Tool to create, and apply colour pallettes to the app. Lets try to do that in a consistent way with a recap of some information about this color theme.
Lots of apps just use the baseline or fall back to it. But you can customise it, and you really should, because apps which are just running on the defaults look outmoded and dated pretty fast.
Choosing colours
There is only one defining colour in this app so far, the logo #e5440d
. The logo itself needs to be visible in the app and not clash in the app. Logos are often a contributor to branding and colour issues for mobile apps and it is wise to steer clear of the discussion of these issues with your clients as they can derail your project.
One approach which avoids such friction is to take complementary colours and apply them to the mobile app. So lets take a shade and tints of the logo colour as the basis for our color pallette. Of course you may have a designer and a set of colours to use. This is just a quick hack to choose some colours that don't clash with the logo for this app.
One place you can find shades and tints for colours is at color-hex.com.
The colour chosen for the primary colour #892807
is a shade of the logo colour #e5440d
and the colour chosen for the secondary colour #ec7c55
is a tint of the logo colour #e5440d
Shades and tints from our logo applied to the baseline Material color theme
Applying these colours to the Primary and Secondary names identified in the baseline Material color theme gives you this group of colours.
Primary #892807 |
Primary Variant #570000 |
Secondary #ec7c55 |
Secondary Variant #bf5531 |
Background #FFFFFF |
Surface #FFFFFF |
Error #C5032B |
On Primary #FFFFFF |
On Secondary #000000 |
On Background #000000 |
On Surface #000000 |
On Error #FFFFFF |
Presented like this it looks pretty nice for the purposes of this app.
Material Design Color Pallettes
But there's more to Material Design than the 12 named colours. Material relies upon a palette of colours represented as 'swatches' of multiple colurs of complementary shades. The 2014 Material Design guidelines provided many of these and its fine to use them of course. But if you are going to the trouble of creating a set of primary and secondary theme colours it makes sense to create a complementary Material Design Colour Pallette. Google provide the Material Design Colour Tool for this purpose.
Enter #892807
as 'Primary color' and #ec7c55
as 'Secondary color'
Material Design Color Tool
Select the 'View in color tool' link to see a mockup of a material design with these colours applied. You can also see accessibility information about text legibility.
Of course it is an approximation and does not represent code. It is very helpful to get the colours quickly into your app to see real device screens and brightness and it can be helpful to show your client or sponsor early on in the process.
Add the colour pallette to your project
Googles tool doesnt seem to do what was wanted which was a way to generate custom material pallettes with the chosen hex color at '500' (this will become important later when we consider the colour implications for light and dark themes). Fortunately there is a tool which does do this. Give the pallettes a name and you can save the link for when you need to refer to it in the future.
The tool generates the flutter code (and other types of code) for you and is forked by me on GitHub Thank you to those open-source project contributors!
Now that we have the colors we want to use as the main (500) colours for our app, paste them into the app. the Palletes are called lightwhichisdarker
for the light theme, and darkwhichislighter
for the dark theme, just to remind us that the colours are kind of opposite to te appearance setting on the device.
Edit main.dart
to add the code for these specific colours
const MaterialColor lightwhichisdarker = MaterialColor(_lightwhichisdarkerPrimaryValue, <int, Color>{
50: Color(0xFFF1E5E1),
100: Color(0xFFDCBFB5),
200: Color(0xFFC49483),
300: Color(0xFFAC6951),
400: Color(0xFF9B482C),
500: Color(_lightwhichisdarkerPrimaryValue),
600: Color(0xFF812406),
700: Color(0xFF761E05),
800: Color(0xFF6C1804),
900: Color(0xFF590F02),
});
const int _lightwhichisdarkerPrimaryValue = 0xFF892807;
const MaterialColor lightwhichisdarkerAccent = MaterialColor(_lightwhichisdarkerAccentValue, <int, Color>{
100: Color(0xFFFF948B),
200: Color(_lightwhichisdarkerAccentValue),
400: Color(0xFFFF3625),
700: Color(0xFFFF1F0B),
});
const int _lightwhichisdarkerAccentValue = 0xFFFF6558;
const MaterialColor darkwhichislighter = MaterialColor(_darkwhichislighterPrimaryValue, <int, Color>{
50: Color(0xFFFDEFEB),
100: Color(0xFFF9D8CC),
200: Color(0xFFF6BEAA),
300: Color(0xFFF2A388),
400: Color(0xFFEF906F),
500: Color(_darkwhichislighterPrimaryValue),
600: Color(0xFFEA744E),
700: Color(0xFFE76944),
800: Color(0xFFE45F3B),
900: Color(0xFFDF4C2A),
});
const int _darkwhichislighterPrimaryValue = 0xFFEC7C55;
const MaterialColor darkwhichislighterAccent = MaterialColor(_darkwhichislighterAccentValue, <int, Color>{
100: Color(0xFFFFFFFF),
200: Color(_darkwhichislighterAccentValue),
400: Color(0xFFFFC4B8),
700: Color(0xFFFFAE9E),
});
const int _darkwhichislighterAccentValue = 0xFFFFEEEB;
Light and dark appearance
Light and Dark appearance
lightwhichisdarker
and darkwhichislighter
are considered custom MaterialColors
now and can be assigned to material components in your app. If you need to change theme colours or need to add new ones theres just one set of variables clearly identified in one place for your whole app. This is worth the effort.
theme: ThemeData(
primarySwatch: lightwhichisdarker,
primaryColor: lightwhichisdarker[500],
),
...
darkTheme: ThemeData(
primarySwatch: darkwhichislighter,
primaryColor: darkwhichislighter[500],
),
Move the Logo to the App Bar
leading:
property. Images for the App Bar should be 24px high. So create an 24px version of the image and save it in your assets folder. It should be white as our App Bar text is white in both dark and light appearance themes. You might make a black image now too It will probably be needed later.Move the logo to the App Bar
appBar: AppBar(
title: Text('Your Project'),
leading: Image.asset('assets/ezone-24-white.png'),
The app now has a theme, which works on both light and dark appearance and the image is better presented than before. The text Launch screen
is not right though for light and dark appearance. It can be presumed invisible from the dark appearance screenshot. So there looks to be yet more work to be done to support dark and light appearance too!
Light and Dark appearance on iOS, showing a missing text item. The words 'Launch screen' are missing on Dark appearance.
"On" colors
The baseline material design "On" colors are stated as being primarily applied to text, iconography, and strokes that are sometimes placed "on" top of key surfaces that use a primary, secondary, surface, background, or error color.
So we can extend the app to add them to the theme. Material themes were introduced in 2014, way before dark and light appearance arrived in Android 10 and iOS 13 devices and the baseline themes have been adjusted to take this into account so the next article will revise our colour model to take that into account and improve the app text.