Main Topics-5 — Using Fonts and Images With Assets

Hello everyone 🤓 The fifth part of our flutter roadmap topics. Assets 😍 lets’s learn together.

We need to learn the concept of assets when we want to add images such as photos, icons and special fonts to text in the application we are writing. First of all, let’s examine what we need to do before we can add a photo to our application and then consider the issue of adding fonts.

1. First, we create a folder called ‘assets’ in our project file.
2. We create another subfolder called ‘images’ belonging to this folder and copy the picture we want to use into it.
3. Then we come to the ‘pubspec.yaml’ file and find the ‘assets’ header from there.
4. We remove all comment lines inside the assets header.
5. Then we go to the line that starts with ‘images’ and write ‘assets/’ at the beginning.
6. After this process in completed, we come to the terminal and type ‘flutter pub get’ and press enter and we are done.

And finally, let’s see how to call the image added below.

Now let’s see how to add a font. Actually, there are only a few operations different from adding an image. The first stop of this work, of course, as we mentioned in the introduction, is to find a legible and pleasing font suitable for our applications. There are many possibilities for this, but lets’s choose it over Google Fonts. With Google fonts, you can access many font structures, download them easily and use them in the application. Let’s add the font to our application now.

1. For this, we first come to our project files and create a folder called ‘assets’.
2. Next, let’s create another folder called ‘fonts’ linked to the assets folder.
3. The font folder that we downloaded from Google Fonts to our computer is transferred to the ‘fonts’ folder that we created.
4. For the promotion process, we use the ‘pubspec.yaml ’file just like we introduce our images. The difference between, as you know, is using the assets title when promoting images, and using the fonts title for font promotion, as you can imagine. After we find the title, we delete the # sign in front of it. Then, we apply the same process in the ‘family’ , ‘fonts’ and ‘assets’ lines in the bottom line.
5. After this process, it is time to determine the name of the font we will use in the ‘family’ section and the path to our file in the ‘assets’ section. Let’s write ‘your font family’ in the family section and ‘assets/fonts/your.ttf’ in the assets section and let’s say flutter pub get from the terminal.

And all transactions are finished. Now i want you to do this. With the help of our previous theme lesson, you call the font family we have chosen in your project.

😍 Thanks for reading this far with patience. Thats is all 🥳.