Flutter Tutorial for Beginners #6 - Colours & Fonts

Key Takeaways

alright then so far we've added a few different widgets to our app inside this scaffold widget right here and it's looking alright but it still all uses the default material design styles so this is the default material design blue the default fonts the default font size etc it would be nice to be able to customize this a little bit so we're going to look at some different colors and font styles in this tutorial so first of all let's look at the app bar what we're going to do is add a property to this app bar called background color so let me do that background color now the value of this is going to be a material design color and we have access to the whole material design palette which is something like this over here I'm on the material design website right here and we can see we have a huge palette of different colors so we've got blues purples greens yellows and they all have different shades as well so we have access to all of these different colors inside our flotter apps so let's try using them the way we use them is we tap in to the colors with a capital C and then we say dots and then we can choose from any of these different things here now each different color has different strengths as well so for example I could say something like red right here and then if I wanted to I could give this a different strength so this is the default strength of the red but if I now press ctrl Q while this is selected I can scroll down and see if we add square brackets at the end of this then we can choose one of these different strengths of a red so if I want X lightly deeper I could use this one for example red and then 600 so let me now choose red first of all then in square brackets I'm going to add in 600 and that gets me that color we just saw so now if I was to save this go down here to run and hot restarts then we should see this turn a red awesome okay so let's now go down to the floating action button and by the way you'll notice this is kind of highlighted that's flutter telling us that something is not quite right here so if we hover over it we can see the parameter press is actually required and that's because this is a button and buttons are there to be pressed and we need to add this in so I'll add it in quickly now but we'll come back to it again later on I'm pressed is just a property which is going to be a function and it's an anonymous function we don't need to give this a name and something is going to happen in here later on if we press this button again we'll talk about this a bit later on I just wanted to add that property in so that for to stop shouting at mate regarding this widget okay so let's also add a background color for this thing right here so if we come down here we can say background color and again I'm gonna give this a colors property then choose red again and 600 again you can choose whatever you want and trying to keep things consistent right here so let me save it and if we HOT restart we can see hopefully now that this is going to go red all right cool so now let's turn our attention to this little bit of text in the middle because at the minute it's a bit small I'm not so keen on the font family and maybe you want to make it bold give it a color as well so let's go to this text so at the minute this text widget right here just accepts a single string but if we want it to accept different properties as well then what I'm going to do is cut this string and gone to a new line open up the widget much like we have opened up other widgets where we add properties and the first thing we add in is the actual text string so I'm just going to add this back in hello ninjas and then the second property can be something called a style property now this style property is going to ultimately allow us to style this text in different ways and we need a widget to do this and this widget is called a text style widget like so so we have the actual text and then a style property called text style now inside this widget we can pass different properties to style our text and there's loads of different properties we can use now to find out the properties you could go to the documentation or if you select one of these you would just put your cursor on it and then press ctrl Q you can see all of the different properties we can use so for example we can use background color which must be a color fontsize which must be a double we also have a font style font weight height etc so there's loads of different properties that we can use inside this textile to style this text so I'm going to start with a font size and this is just going to be 20 so if I save this and preview by pressing this button then we should see that this increases in font size awesome now let's do the font weight and we don't just say something like bold or something like that these font weights they're all built in to the flutter SDK the flutter library so what I'm gonna do is say fonts weight and that's the font weight object or font weight class and then use the bold property so a lot of the times we use something like this if we're doing font weight not phony weight font weights then we use the font weight object if we're doing something like a color then we use the colors object like this alright so the font weight is now going to be bold now before we preview I'm also going to add in another couple of properties the next one is going to be a letter spacing and that is going to be two and then after that I'll also do a color and this is going to be colors and then we're going to call this gray and do a shade of 600 so if I save this now and then hot restarts this should take shape okay look in a bit better now we can also add in different font families so this at the minute is the default font family but what I want to do is add in a custom font so the first thing to do is actually get that custom fonts and add it into our project so I'm going to open up my browser and I've already gone to the google fonts website it's just fonts google.com and I'm going to choose a custom font that I can use in this project now I'm just going to search for this because I know what it's called it's called Indy flower and I'll grab this one right here so I'll press the plus icon and then open this up and I want to click on this icon at the top right to download it so I'm going to save the file and once it's saved I'll open this up and I'm going to extract this first of all extract all to the same location and then we see these fonts right here now what I'm going to do is drag these fonts into my project but before I do that I need to make a folder to put it in so in the root directory my app right click and then we're going to create a new folder so go to new and then go to directory and I'm just going to call this fonts and then I'll open up this thing again and I'm gonna grab this and I'm gonna place it into fonts okay and then what we need to do is tell flutter that we have this fonts are ready to use now the way we do that the way we add these different assets and fonts and things is by going to this pub spec Yama file now this file is a bit like a configuration file for our project it's where we can specify the environment dependencies or any assets and fonts that we want to use in our project as well now the format of this is very very important notice we have these different properties that are flush opening to the left and then when we use a sub property inside that it's two spaces indented if it's not then it won't work so it has to follow that format so be careful you don't do three spaces or something else so if you scroll down you're gonna find a place where we can add fonts like this now it's all commented out at the minute so I'm gonna highlight all of this all of the fonts and then I'm going to press ctrl on Windows think command on a map and forward slash to uncomment now notice it's not quite flush yet so I'm just gonna grab all of this again and I'm gonna zoom it back to and then zoom it forward one so now it is in alignment with the rest so you can see we have this fonts option right here and underneath we define a family now this is a name that we give to this font family and then we define where those assets actually are so we just have one font asset right here so what we need to do is actually delete most of these things and just leave one asset right there and I'm going to name this one instead India flower so that's the name and giving to this font I can call it whatever I want but it makes sense because that's what it's called and then I need to give a path to this font now it's still in the fonts folder but this time it's called something different it's called Indy flower and then - a regular TTFN so now we've added this fonts inside our pup spec file so all I have to do is save this and then I'm going to go back to main dot now notice I get this notification pup spec has been edited so we can click this to get any dependencies that we need now so let me now minimize that and now we can use this font by referring to this font name right here so inside the text style widget I'm now going to add on another property and that property is going to be font family now I'm going to say in the flower which is what I called the fonts inside pub spec right here if I call it something different I'd refer to that and then this should work so if I save it now go to close off that folder and then I'm going to go to hot restart and hopefully it will see the new font over here hello ninjas awesome so they're my friends that's a bit more about colors and a bit more about font styles in flutter but the minute there's one thing bugging it and that is that every time we save the file and we make a change and we want to see that change in the screen over here we have to come down here to the run panel and then press this hot restart button and only then can we see that change so I'm gonna address that issue in the next video so that as we save our code it automatically updates on the right and we don't have to keep pressing this thing over here