Flutter. Create a news app. Part 3.
In the last lesson, we create a ListView with some dummy data in it. Today we will add more data, and other widgets to our list item to make it more attractive.
Currently our list_item.dart looks like:
Let’s add some new widgets in it. We want to show news images so we should add an image widget in our list_item.dart file. So our list_item will look like this.
As you can see we have added Image widget. Image widget has a method called network which can be used when we want to load image from the network. Now if we run our application we can see something like that because our image is larger than our emulator screen and it does not fit it.
Flutter shows us alert that “Right overflowed by 434 pixels”. It means that our image width larger than our emulator width by 434 pixels. To avoid this we can put our Image widget into a Container Widget and set its width and height. Put this code instead of Image Widget
And now if we run our application we can see hat our image has fixed width and height and does not overflow our screen
Well now we image and two texts in our item, but there are so close to each other and it would better to add some padding to them. To make it in Flutter we have Padding widget which we will use now. After some manipulations our code looks like:
As you can see Padding widget has 2 arguments. I think child argument needn’t any explanation because we saw this type of argument in other widgets in previous lessons.
So let’s explain padding argument. We pass to it EdgeInsets.all(8) because we want to add padding to all sides. Now texts have paddings and they are not so close to our image.
Well, the description text also so close to our title so let’s move it from there and put under our title. To make it we will use Column and Row widget
We use a Column widget to display our widgets in a vertical array. Otherwise, Row widget uses to display widgets in a horizontal array. So we will create a Row widget which will have one Column children with 2 Texts in it.
We also added the crossAxisAlignment: CrossAxisAlignment.start to place our widgets at the left side of our column. And the result is:
Well now it looks pretty good and the description and title seem more readable.
In this lesson, we learn how to use Column Row and Padding Widgets, and build beautiful UI with them. In the next lesson, we will learn how to style texts in our application to make it prettier.
Follow me on Twitter: https://twitter.com/a_rasul98
Github: https://twitter.com/a_rasul98
Source code: https://github.com/agarasul/SampleNewsApp
