Displaying Images,Texts,Icons together in flutter|Using different fonts in flutter.

I have already covered a tutorial which shows how to display list of images vertically.You can read it here.

Layouts in Flutter|Displaying images vertically.

This is the piece of code which displays the images vertically in app. Now we need to add code which will be able to display text below each image. Since we need to display the text after image,we need to add a Column widget in Card widget so that text can be displayed after the image.First let us edit the code for one Card widget,we can just copy paste the same code for other images.

So we shall start by wrapping the Image widget by a Column Widget(at line no. 46) as shown here.

Now we can add Text widget after the Image widget as shown here. Add the text which you want in Text widget.

Similarly add the Icon widget after Text widget.

Now if I run my app,this is the output.

But as you can see here ,even though we have managed to add text and icon,the app does not look that pretty. So let’s start formatting the Card widget.First of all I would like my app better if both text and icon appeared side by side. For that I will wrap both Icon and Text within Row widget so that both the elements will be displayed side by side.

Still our app needs lots of styling.So here we will change the font,font colour and icon colour as well.In order to add a different font style we will use google_fonts package.The google_fonts package for Flutter allows you to easily use any of the 977 fonts (and their variants) from fonts.google.com in your Flutter app. To use this package as a library we need to install it. This can be done by adding google_fonts: ^1.1.0 under dependencies in pubspec.yaml as shown here.

dependencies:
  google_fonts: ^1.1.0

Save this file and now in main.dart file import this library. Now we can change the font style using GoogleFonts as shown here.We can also change the font size as well along with its colour. Here I have changed the colour of the icon to yellow as well. This is the updated main.dart file .

This looks good.But it would look much better if the fonts were placed in black background with font colour as white and little bit padding from left end would also look cool.So now we will change the Card widget color to black as shown here and add the padding. Also spacing is needed between the image and text to make it look better.This can be done using SizedBox Widget. If given a child, this widget forces its child to have a specific width and/or height.

Now let us add the same changes to all the images. And thus this is the final code.

And here’s the final look of the app.

If you found this tutorial useful, you know what to do now. Hit that clap button and follow me to get more articles and tutorials on your feed.❤❤