Flutter UI Widgets

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

So far, the main page displays only one article card in the column. Let's go ahead and add more cards to the column. Oops! We have to read the overflow warning sign. This is Flutter's way of telling you that the contents of the box are bigger than the available space. Flutter provides us with multiple scroll able widgets. Wrap the column with a SingleChildScrollView. Now the overflow error is gone and we could scroll our list of cards. The SingleChildScrollView is mainly used when the widgets should be entirely visible. What's one you ensure it is scroll able, in case the box gets too small. We are working with a list of cards and we know it won't be entirely visible. So in more efficient widgets that is build to handle this is the listView. Update your codes to use the widgets and our list of card scrolls. This widget is the most commonly used widgets that handles displaying list of widgets. Behind the scenes, Flutter add some underline optimizations to make sure you have a fast and smooth scroll. Flutter listView plays the role of both scrollView and the listView in Android. The same goes for iOS scrollView. The list view displays the children linearly that is either horizontally or vertically. Flutter provides us with a grid view widgets that simply lets us arrange widgets in both axis. Update your codes to use the gridView. The GridView counts constructor. Defines how many children will be placed on across axis. In this case, that will be the horizontal axis and here we specify the value of 2. The GridView can be useful when building a responsive apps. So this version of the art school card could be shown in in landscape mode. So let's go ahead and change our orientation of our device and you can see the articles display side by side in a grid like pattern. Sometimes you might have another floor, when ends are around the grid items. We ensure that they've been cut off just like we saw when we went into portrait mode. To reduce the child to fit the Gridview space. You have the child aspect ratio property. Go ahead and add it. This tells the GridView that it should and should be 95% of the original size. Well, we don't need it in our case. So I'll comments it out. Next. The default listView constructor, build all is shouldn't at once. This happens as soon as the widget is mounted and if you think about it, this is not very efficient for very long lists. Like let's see over 10,000 items. We need a way to build our terms on demand and the list view that build a constructor handles this. Update the codes to the following. Then see if it works. Over here. At least the builder constructor has returned. The article's list length is passed as the itemCount. The itemCount property is needed. So that at least we knows how many children it is going to build ahead of time. Not assigning, this creates an infinite scroll able list. Next, the itemBuilder returns at scorecard. This is a callback function that will be called anytime that listView wants to create a new list item for a given list index. Now the listView builder constructor only builds the children that are visible. That is, it's built more children as you scroll through the list. Then Flutter manages the creation and deletion of children that are offspring, which in turn gives you smooth scrolling. The builder constructor of both the listView and the gridView widgets are Flutter's fashion of Android's RecyclerView and iOS UITableView or UICcollectionView.