All language subtitles for 31. Custom Fonts & Working with Text Themes

Now added we added our theme here.

Why don't we also add a custom fund.

Because right now we always use the system default fund which is okay but in a lot of applications you

of course want to bring your own textiles your own funds and adding custom fonts is very easy.

In flutter apps.

First of all you need to create a new folder in your project folder so not into lit folder but simply

in your main project folder.

You can name that folder whatever you want.

Typically you name it something like assets or you directly name it funds whatever you want I'll name

it assets and in the assets folder I'll create a funds folder you could as I just mentioned all to have

the funds folder on the root level.

But I want to have it here in the assets folder now there.

I want to use a couple of funds and you'll find a zip file attached which includes the funds I will

use here.

So let's drag and drop the contents of that zip folder into that Fonts folder here.

I brought in two funds here open sense in bold and the regular version and Quick send in a bold light

medium and a regular version will actually not use all these versions but you can play around with them

and we will definitely use both fonts open sense and quick said no with the fonts added here.

We still can't automatically use them in our application to unlock them in our application and to include

them in the in the app file that Flubber generates in the end you need to go to your pop aspect of the

GMO file which again is your global management tool here and there if you scroll down you should actually

find this commented out area which already gives you an example of how to add funds so you can simply

comment back in by removing the hash symbols and then you'll see that you have funds which is indented

by two spaces and again in Yemen default spacing matters and there you define a family key after this

stash and a whitespace and that is the name of the fund this name here should match the name of your

fund but theoretically it's up to you but of course to avoid confusion you typically give that the name

of your fund.

So for example here we have open sends now.

You also need to define where the exact files for that fund can be found.

You do this on a fund's key and then here with these asset keys and there you have to point at the folder

which in our case is assets slash funds and then dare I have open sends that regular TAF.

And here you absolutely need to get these file names correct.

Make sure you don't miss type this path and this file name here has to match this path and file name

here.

Now I also have a bold version of this fund so we'll also add assets slash funds slash open sense dash

bolt or ETF because that's my file name and my folder important to inform flutter that this is the bold

version.

It doesn't infer debt from the name you need to add a weight information here and the weight here is

700 for this fund.

If you're adding a new fund and you're downloading that from some resource like Google funds which is

a web page then there you should find some information about which weight your fund has so open sends

Bolt has a weight of 700.

And therefore I add this extra information.

This will become important later when we use fund weight bold in our flat or widgets and tell flutter

that we want to use the bold fund 700 is treated as a bold fund and therefore flatter would pick this

one no this is not the only fund to have the however not the only family.

I'll add a second family here and that's called quicksand.

And there again we add the funds key and in their asset and then assets slash funds slash quick Senate

dash regular talk TGIF and then also asset assets funds quakes and dash bold dot ETF and there again

all at the weight 700 annotation.

Now you have q other funds which you could add which I'm not adding here.

Of course if you are not using them you could delete them.

But for you to play around feel free to add these other funds as well so that you can use them.

That of course brings us to the question How can you use your own funds.

Let's say we want to use quicksand as our normal global fund to the application.

You can set such a global fund in your theme.

So here in the theme data you can set a fund family and you can set this to quick send.

Now of course the name you use here as a string has to match the name you have in your pups back that

GMO fall.

So if this year this family identifier is written as quick send the file names don't matter.

But if this identifier is written like this then you have to write that exactly the same way when you

are referring to it.

Now with that you will have to quit your running process and actually restart it entirely.

So pressing the refresh button also won't help you need to restart the app because we added new files

to it and they are for you for the first time right after you edit the files you need to restart the

app and once you did that once the app did restart you should see that your application why default

font is quicksand which is a bit thinner than a default on Android which is Roberto.

So here's my application.

And as you can tell we now have a thinner fund and that is our quicksand fund.

Now of course in some places you might still want to use a different fund.

For example here for my titles I once used all the other fund the open sends fund at all and maybe here

in the app bar there are two ways of doing that.

You can go to your app bar if we want to start with that in the main dart fall and on the app are here

on this text here in the title you could add a style and that would be a text style.

And there you can set the font family and you can set that to open sense like this.

If you do that and it saves you see now this is bolder because now it uses open sends.

The downside of this is that if you had an application with multiple pages which we haven't here but

we'll have it later in the course then you would have to add this style to every title to every text

which is in every title of every app bar which is really redundant if you want to have the same style

in every app bar across your entire application.

Therefore you can also set a default app bar theme in your feed data there you can add app bar theme

and now define a new app bar theme here where you set a text theme by using theme data dot light which

is a set of defaults the defaults you'll normally have when you just create a theme data object.

Now here we basically have that same theme that object with the default settings configured and on that

theme data object using the light theme we can now access the text theme here and copy it with our own

settings.

So what we basically do here is we assign a new text theme for our app bar so that all text elements

in the app bar receive that theme and we based it on the default text team so that we don't have to

overwrite everything like font size and so on but we use the default text theme and copy that with some

new overwritten values and here I overwrite that titles.

Titles are a specific style of text flatter knows that.

Titles receive a specific style.

I want to give titles.

A text style because title here expects a textile object where the fund family is let's say open sends

and where it maybe even has a default font size of let's say 20 if you want to change that as well.

Now with that we're using the basic text theme with our own settings mixed in and we apply that to all

texts in the app bar theme or the app art in general and to be very precise we don't overwrite all text

in there but text which is marked as a title by flutter and the title here is actually marked as such

by flutter and I will show you how you can manually Mark items as title in a second so if you save that

then you go back.

You see this is no less bold because the default actually was bold.

I now changed this to not be bold anymore.

We can of course set this back to bold by adding font weight and then here font white dot bold again

just to confirm that this works.

Now it's bold.

And now we are clearly using a different style.

We're using open sense here not quicksand anymore.

So this is working.

And this is one way of also applying fonts here to all our app bars or to be precise to all title texts

in app bars.

Now I also want to make sure that all my other titles here are using this style.

And how can we do that for it as we first of all need to inform flatter that our texts here should be

treated as titles.

So let's go to the transaction list and dear to our title which is here and there.

What we can now do is instead of defining our own text style here we can also reference our theme with

theme of context and then access the text theme.

And here our title theme now at the moment when I save this does will use quick scent because remember

that our title theme here is only defined for inside app bars and we could bring that out of the app

or if you want that that same style everywhere.

But I want a slightly different normal text theme and therefore here I can set up my own text theme

justice as before however all copy it based on the existing text team so that that don't have to set

everything in there.

I want to set my own title theme by giving this now a globally available text style which all items

that refer to this title theme will now use.

And there we can set textile cue fun family open sense font weight font weight bold and a font size

of say 18 and that's the difference to the app or font size where I have 20 Otherwise I could've used

just one global title theme.

Now I have a separate title theme for the app bar and one for the rest of the app.

And I do refer to that by not providing my own tech style here but by referring to the globally available

text theme titled text style.

So if that if we now saved as we have our nice look here you using open sends and a bold text and the

size of 18 for everything that is marked as a title with this approach.