Flutter UI Widgets

So far, the main page displays only one ArticleCard in the Column. Let’s add more cards to the Column.

Opps!! We have the dreaded overflow warning sign. This is Flutter’s way of telling you that the contents on the box are bigger than the available space. Flutter provides us with multiple scrollable widgets. Wrap the Column with a SingleChildScrollView.

...
SingleChildScrollView()
  child: Column(
    children: <Widget>[
...

Now the overflow error is gone and we could scroll our list of cards. The SingleChildScrollView is mainly used when a widget should be entirely visible but we want to ensure it is scrollable in case the box gets too small. We’re working with a list of cards and we know it won’t be entirely visible. A more efficient widget that is built to handle this is the ListView.

Update your code to use this widget:

...
ListView(
  children: <Widget>[
    ArticleCard(article: articles[0]),
    ArticleCard(article: articles[1]),
    ArticleCard(article: articles[2]),
  ],
),
...

And our list of card scrolls. This widget is the most commonly used widget that handles displaying lists of widgets. Behind the scenes, Flutter adds some undelying optimizations to make sure you have a fast and smooth scroll. Flutter’s ListView plays the role of both a ScrollView and a ListView in Android. The same goes for an iOS ScrollView.

The ListView displays its children linearly. That is; either horizontally or vertically. Flutter provides us the the GridView widget that simply let’s us arrange widgets in both axes.Update your code to use a GridView:

GridView.count(
  crossAxisCount: 2,
  children: <Widget>[
    ArticleCard(article: articles[0]),
    ArticleCard(article: articles[1]),
    ArticleCard(article: articles[2]),
  ],
),

The GridView.count constructor defines how many children would be placed on the cross axis. In this case the horizontal axis and here we specified a value of 2. The GridView can be useful when building responsive apps. So this version of the article card could be shown in landscape mode so let’s go ahead and change the orientation of our device. And you can see the articles display side by side in a grid-like pattern.

Sometimes, you might have an overflow warning sign around the grid items which shows that they’ve been cut off just like we saw when we were in potrait mode. To reduce the child to fit the gridview’s space, you have the childAspectRatio property. Go ahead and add it:

childAspectRatio: 0.95,

This tells the GridView that the children should be 95% of their original size. But we dont need it in our case, so I’ll comment it out. The default ListView constructor builds all its children at once. This happens as soon as the widget is mounted. This is not very efficient for very long lists like let’s say over 10K items. We need a way to build items on demand. The ListView.builder constructor handles this.

Update your code to the following:

ListView.builder(
  itemCount: articles.length,
  itemBuilder: (BuildContext context, int index) {
    return ArticleCard(article: articles[index]);
  },
),

Save your work. Over here, a ListView.builder constructor is returned. The articles list length is passed as the itemCount. This property is needed so the ListView knows how many children it is going to build ahead of time. Not assigning this creates an infinite scrollable list.

Next the itemBuilder returns the ArticleCard. This is a callback function that would be called anytime the ListView wants to create a new list item for a given list index. The ListView.builder constructor only builds the children that are visible, that is; it builds more children as you scroll through the list. Flutter manages the creation and deletion of children that are offscreen which in turn gives you smooth scrolling.

The builder construtor of both the ListView and GridView widgets are Flutter’s version of Android’s RecyclerView and iOS’s UITableView or UICollectionView.