Flutter fonts, lists, themes and text styles

Lesson 2: https://medium.com/@danieln.llewellyn/building-a-flutter-ui-lesson-02-adding-images-fda8a8ac5609

You should be able to follow this article without reading the previous articles

In this lesson we’re going to look at adding custom text styles for an app, and adding custom fonts. We’re also going to convert our existing account details to a listview.

Our goal for the lesson

Adding a font

First we need a font so you can head to here to grab the one I’m using in the tutorial

https://www.cufonfonts.com/download/font/carolingia

Then, create a new folder in the root of your folder called ‘fonts’ and paste your new font into that folder.

Now, add these lines into your pubspec.yaml file

fonts:    
- family: carolingia
fonts:
- asset: fonts/carolingia.ttf

Here’s a more complete example

Update your dependencies, in Android studio you should get a prompt to do this, otherwise use

flutter pub get

Using your new font

The easiest, and best way to theme styles in Flutter is by using ‘Theme data’. If you head over to main.dart (or wherever your root widget is) and look at the ‘theme’ field.

Here’s an example where we set our new font to be the text style for ‘titles’

In this we’re also setting titles you be bold, and to have a font size of 26.

Using our text theme

If we now head over to the place where we want to use this new text theme, which is account_title.dart if you’re following along and change this line

Text(supportedCurrency.name)

To this

Text(supportedCurrency.name, style: Theme.of(context).textTheme.title)

What we’re doing here is using the ‘nearest’ parent Theme. In our case, our Theme is set by the material widget, and that is the theme we’re using. It is a good practice to set your style in this way — using Theme.of(context).textTheme — because you can change the themes for an entire app without going in to change each file.

Another thing you can do is to use copyWith. Use this in a situation where you want to change one property. E.g. if you want this specific text to be the same as the ‘Title’ theme — but red, you can do something like this

Text(supportedCurrency.name, style: Theme.of(context).textTheme.title.copyWith(color: Colors.red))

There are a number of other themes built in, one is caption. Try changing your other Text in account_title.dart from

Text(supportedCurrency.id)

to

Text(supportedCurrency.id, style: Theme.of(context).textTheme.caption)

Re-run the application and you’ll see the text has changed. Now, head back to your material widget and change the themes to look like this and re-run your app. You can see that the text style changed as you’ve changed the next level up.

Finally, open up balance_widget and change

Text(balance.toString())

to

Text(balance.toString(), style: Theme.of(context).textTheme.headline);

Turn our accounts to a listview

So far, our account list only has one account. To change this to a list, first go to account_data.dart and change the mockAccounts to look like this:

This mockAccount now returns a list of accounts.

Now, head back to main.dart and change your widget to look like this

To talk you through this, our ‘body’ is now a ‘ListView’ and that listview has ‘children’ this is a convention we see throughout flutter, if it has one ‘child’ it’s called ‘child’ if it has more than one, it’s called ‘children’.

Our mockAccount() function now returns a list, so we need to convert that list into a list of Widgets — which is exactly what .map() does.

Note that this method could have been written like this: .map((account) { return AccountListItem(accountData: account)) }

Our .map function loops through each account data, takes each account as a the parameter ‘account’ and passes that through to AccountListItem. As this technically doesn’t return a ‘list’ of children, but an Iterable, we call .toList() at the end.

Final touch — a card view

Our final touch will be to wrap our AccountListItem with a Card. Which will look like this

Hope you’ve enjoyed this article, all feedback is very welcome. Thanks for reading.

Full solution

Watch

Code

To carry on from lesson 2

git clone git@github.com:dllewellyn/crypto_currency_wallet.git
cd crypto_currency_wallet
git checkout LESSON_2

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store