Flutter Apps

10.1 Flutter Colours, Icons, Fonts, and Assets

Module Still Under Development

# Resources

# Colors and Color

By importing the material.dart file and using the MaterialApp() widget at the root of your app you automatically get access to all the Color Widgets and Classes that are related to the Material Design system.

import 'package:flutter/material.dart';

Many Widgets will have a color property as one of the preset properties. This could be a text colour or a background colour. It really depends on the type of Widget. For example, a Text() widget would use the value as the font colour, while a Container() widget would use the value as the background colour.

Remember that you can mouse over any widget in VSCode to see all the available properties.

# Color

The Color class constructor can be used to create any custom colour that you want. It is part of the core Dart:ui package.

Let's say that you wanted to set the background colour for a Container widget and a text colour for the Text widget that is inside it.

//...inside some widget
child: Container(
  color: Color(0xFFe4773d),
  child: Text(
    'The actual text inside the container.',
    style: TextStyle(
      color: Color(0xFF212121),
    )
  )
)
// ...more code here

1
2
3
4
5
6
7
8
9
10
11

Above is the basic use of the Color class as the value for a couple color properties. The Container will have a background color of light orange and the text colour will be a dark grey.

The values passed to the Color constructor are HEX values. The 0x means it is a hex number. The first FF is the value for the alpha channel and means full opacity. 00 would be completely transparent. The last six digits are the values for the red, green, and blue channels.

Here is the Color class reference (opens new window)

The alternative ways of setting a color are:

Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5); //all hex values for alpha, red, green, blue
Color.fromARGB(255, 66, 165, 245); // all decimal values alpha, r, g, b
Color.fromRGBO(66, 165, 245, 1.0); //decimal values for red, green, blue, opacity

1
2
3

All three of the lines above create the exact same colour.

# Colors

The Colors class is part of the Material package. It lets us access all the predefined Material Design colors. These could be used in place of the Color class values and methods shown above. They would be used as the value for any color property in any Widget.

Colors.grey
Colors.blue
Colors.lightBlue
Colors.pink.shade200
Colors.orange.shade500

1
2
3
4
5

Here is the class reference for Colors (opens new window).

Here is the full reference for use of color in Material Design (opens new window).

A great website for getting a visual reference for the colours and creating a combination that you can use in your app is the Material Palette site (opens new window).

# Assets

Assets are any files that you want to include in your project that will be used as resources at some point. These are generally images, icons, and fonts.

Then you need to define these locations within your project config file - pubspec.yaml.

To use the Material Design Icons, under the flutter: heading add:

flutter:
  uses-material-design: true

1
2

To add images and fonts you need to create a folders in your project root (same level as the lib folder). Your image and font files will go in those folders.

Under the heading flutter:, will be two headings assets: and fonts:.

flutter:
  uses-material-design: true
  assets:
    - images/happy.jpg
    - images/sad.jpg
    - photos/

  fonts:
    - family: Lato
      fonts:
        - asset: fonts/Lato-Regular.ttf
        - asset: fonts/Lato-Bold.ttf

1
2
3
4
5
6
7
8
9
10
11
12

Under the first assets: heading you will create a list of the files and folders that contain your images. In the example above we are selecting two specific files from inside a folder called images/ plus any files that are inside a folder called photos/.

The family name of the font is what you will use in your TextStyle widgets or themes. Then, under the second level fonts: heading will be all the actual font files that you want to use.

Adding Assets

Every time you add a new asset to your project you will need to tell Flutter to include it as part of the project.

This means running the flutter packages get or flutter pub get command. They are synonyms for each other.

# Icon and Icons

As long as you have the uses-material-design: true line inside your pubspec.yaml file then you will be able to use any of the Material Icons.

There is an Icon() widget that can be used as the value for any icon: property inside any widget. Icon class reference (opens new window)

The value inside the Icon widget you will use the Icons class as the primary value. The Icons class is a container for all the icons available in Material Design. If you type Icons. in VSCode you will be presented with a list of icons. The list will be narrowed down to match as you type.

Icon(
  Icons.home,
  color: Colors.pink,
  width: 48,
  height: 48,
  semanticLabel: 'Home page icon'
)

1
2
3
4
5
6
7

Other properties that can be assigned to the Icon() widget are width, height, color, and semanticLabel. The semanticLabel is important for accessibility.

Here is the full list of Material Icons (opens new window)

Icons are not interactive. For an interactive icon, consider material's IconButton. The IconButton widget that you should use if you need to capture user interaction with the icon. IconButton reference (opens new window). The IconButton widget also has an onPressed property that is used to define the function that runs when the user taps the icon.

There is also an ImageIcon widget that you would use if you wanted to load an image from your defined assets as an icon. ImageIcon reference (opens new window)

# Images

There are 4 primary types of image widgets in Flutter - Image(), AssetImage(), NetworkImage(), and DecorationImage().

An Image() widget is what we use to put an image on a screen as part of the content, just like a Text() widget adds a string as part of the content. It has an image: property that will be set to either AssetImage or NetworkImage. It also has properties like width, height, and fit for sizing.

There are also shortcuts for those. Image(image: NetworkImage()) is like Image.network(). Image(image: AssetImage()) is like Image.asset().

Here is a basic example:

Container(
  child: Image(
    image: AssetImage('images/good-dog.png'),
    height: 200,
    width: 300
  )
)

1
2
3
4
5
6
7

Here is the full reference for all the Image widget properties (opens new window)

An AssetImage widget loads an image that you defined in your pubspec file. AssetImage widget reference (opens new window). It will use the same path as what you defined in the pubspec file.

If you have a section in your pubspec file like this:

flutter:
  assets:
    - images/good-dog.png

1
2
3

then you would load that image in your Widget like this:

Image(
  image: AssetImage('images/good-dog.png'),
  fit: BoxFit.contain
)

1
2
3
4

The BoxFit enum is a way to scale your image to fit similar to the CSS object-fit (opens new window) property. BoxFit reference (opens new window)

A NetworkImage can load an image from some online source. NetworkImage widget reference (opens new window). You use it similarly to the AssetImage except that it is not in your pubspec file and it points to an external location using https:// as the start of the location.

Image(
  image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)

1
2
3

A DecorationImage is like a CSS background-image. It is loaded inside of a BoxDecoration widget. DecorationImage class reference (opens new window). BoxDecoration class reference (opens new window)

Here is a simple example of a BoxDecoration widget with a DecorationImage:

Container(
  decoration: BoxDecoration(
    color: const Color(0xff7c94b6),
    image: const DecorationImage(
      image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
      fit: BoxFit.cover,
    ),
    border: Border.all(
      color: Colors.black,
      width: 8,
    ),
    borderRadius: BorderRadius.circular(12),
  ),
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

When loading Image.network()s there are a couple properties that you should always consider using loadingBuilder: and errorBuilder:. The loadingBuilder property takes a function that returns a Widget, which will can display a static widget while loading or even calculate the percentage loaded and show a representation of that. The errorBuilder takes a function that returns a Widget if the image is missing or fails to load.

Image.network(
  'https://example.com/some/image.png',
  width: 500.0,
  height: 500.0,
  loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
    return Center(child: child);
  },
  errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
    return const Text('Yikes. No Image.');
  },
  fit: BoxFit.cover,
)

1
2
3
4
5
6
7
8
9
10
11
12

# CircleAvatar

The CircleAvatar is, as the name would imply, a rounded area that displays an avatar image. Often used as part of a list of things on the screen where each list item has an Avatar, some text, and maybe one or two action buttons.

//use with text and a background color
CircleAvatar(
  backgroundColor: Colors.brown.shade800,
  child: const Text('AH'),
)
// or with an asset or network image
CircleAvatar(
  backgroundImage: NetworkImage(userAvatarUrl),
)

1
2
3
4
5
6
7
8
9

CircleAvatar widget reference (opens new window)

# Fonts

To use a specific font in a Text widget, we need to add the font file into the pubspec file and then run the flutter pub get command in the Terminal. After doing this you can use the font family name that you defined in the pubspec file.

The font family can be applied to any Text() widget through a TextStyle widget.

Container(
  child: Text( 'the text to style',
    textAlign: TextAlign.center,
    overflow: TextOverflow.ellipsis,
    style: const TextStyle(
      fontWeight: FontWeight.bold,
      color: Colors.black.withOpacity(0.9),
      fontFamily: 'Lato',
    ),
  )
)

1
2
3
4
5
6
7
8
9
10
11

There are a lot more style properties that you can add and define inside a TextStyle widget. See the full TextStyle reference (opens new window) for more options.

# What to do this week

TODO Things to do before next week

Read and watch all the content for modules 10.1 and 10.2
Start working on Flutter Assignment 1
Practice working with Flutter Widgets

← 9.2: Flutter Intro 10.2: Widgets and Layout →