Amazon.co.uk Widgets

This is the third part of my journey to build and publish a Flutter based app for the App Store and Google Play.

Contents

  1. Making apps look good with colour
  2. 2014 Baseline Material color theme
  3. Choosing Colours
  4. Shades and tints from our logo applied to the baseline Material color theme
  5. Material Design Color Pallettes
  6. Material Design Color Tool
  7. Add the color pallette to your project
  8. Light and dark appearance
  9. Move the Logo to the App Bar
  10. "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.

2014 Baseline Material color theme

Material Design comes designed with a built-in, baseline theme with 12 colours named and defined.

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

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.

https://www.color-hex.com/color/e5440d

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.

Material Design Colour pallettes

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. http://mcg.mbitson.com

Material Design Colour tool 06

The tool generates the flutter code (and other types of code) for you and is also 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.

Palette Generator code
Edit main.dart to add the code for these specific colours
const MaterialColor lightwhichisdarker = MaterialColor(_lightwhichisdarkerPrimaryValue, {
  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, {
  100: Color(0xFFFF948B),
  200: Color(_lightwhichisdarkerAccentValue),
  400: Color(0xFFFF3625),
  700: Color(0xFFFF1F0B),
});
const int _lightwhichisdarkerAccentValue = 0xFFFF6558;

const MaterialColor darkwhichislighter = MaterialColor(_darkwhichislighterPrimaryValue, {
  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, {
  100: Color(0xFFFFFFFF), 
  200: Color(_darkwhichislighterAccentValue),
  400: Color(0xFFFFC4B8),
  700: Color(0xFFFFAE9E),
});
const int _darkwhichislighterAccentValue = 0xFFFFEEEB;

Light and dark appearance

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],
),

Now to rethink the logo image. It looks odd where it is. Lets put it in the App Bar. There's a place for it in the 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!

Flutter Material Components iOS iOS Light appearance   Flutter Material Components iOS Dark appearance

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.