Getting to know the Widgetscape — Part II 💙

Widgetscape. A new world of widgets!

In the previous article, “Getting to know the Widgetscape — Part I 💙” we learned about widgets that are used for App/Page setup i.e., MaterialApp / CupertinoApp and Scaffold / CupertinoPageScaffold, Layout widgets i.e., Container, Row and Column, the difference between them, widgets such as Expandedand Flexible and so much more.

In this article, we will deep dive into some more frequently used important widgets in a Flutter application. So let’s get started!

First, let’s look at a Standard widget (from the widgets library) called Stack which is a widget that positions its children relative to the edges of its box. Simply put, it is a widget that overlaps a widget on top of another.

Stack(
  children: <Widget>[
    Container(
      width: 150,
      height: 150,
      color: Colors.blue,
    ),
    Container(
      width: 140,
      height: 140,
      color: Colors.yellow,
    ),
    Container(
      width: 130,
      height: 130,
      color: Colors.green,
    ),
  ],
)

In the above example, all three Container widgets are stacked over one another.

Now, look at the Card widget, a specialized widget from the Material library. We can consider this as a container with some default styling (shadow, background color, rounded corners), etc. It can take only one child and is typically used to output a single piece/group of information.

Image copyright to the owner

Till now we have learned many different types of widgets and we have also seen how to use them. But have you ever wondered what kind of widgets should we use if there are repeated components in our UI?

Yes? Then it’s time for us to look at those widgets now. There are many widgets that can be used to render repeated components in our UI but in this article, we will look at the two popularly used widgets i.e. ListView and GridView.

ListView is the most commonly used scrolling widget. It can be considered a scrollable list of widgets arranged in a linear fashion. In other words, it is a column-like widget that automatically provides scrolling when its content is too long for its render box. It can be laid out horizontally or vertically.

There are four ways for constructing a ListView:

1. The default constructor takes an explicit List<Widget> of children. This constructor is appropriate for list views with a small number of children.
2. The ListView.builder constructor takes an IndexedWidgetBuilder, which builds the children on demand. This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.
3. The ListView.separated constructor takes two IndexedWidgetBuilders: itemBuilder builds child items on demand, and separatorBuilder similarly builds separator children which appear in between the child items. This constructor is appropriate for list views with a fixed number of children.
4. The ListView.custom constructor takes a SliverChildDelegate, which provides the ability to customize additional aspects of the child model. For example, a SliverChildDelegate can control the algorithm used to estimate the size of children that are not actually visible.

ListView(
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Container(
      height: 50,
      color: Colors.blue[600],
      child: const Center(child: Text('Item A')),
    ),
    Container(
      height: 50,
      color: Colors.blue[500],
      child: const Center(child: Text('Item B')),
    ),
    Container(
      height: 50,
      color: Colors.blue[100],
      child: const Center(child: Text('Item C')),
    ),
  ],
)

This example uses the default constructor for ListView which takes an explicit List<Widget> of children. Here, ListView’s children are made up of Containers with Text.

You can change the direction of the scroll by setting the property scrollDirection to Axis.horizontal or Axis.vertical, if you prefer a bottom-up approach then you can set the property reverse to true, if you wish to make the list never scrollable then just set the physics property to NeverScrollableScrollPhysics(), if you want to allow the items to be garbage collected when off-screen then set the addAutomaticKeepAlives property to false, and there are many other properties by which you can do so much more so do refer the official documentation of Flutter to explore more.

Now that you know what a ListView is, you probably must be wondering what if we need to create a scrollable list with multiple rows within a column like a grid? You got it right! We will be using a GridView to accomplish that.

GridView is a scrollable, 2D array of widgets. It provides two pre-fabricated lists, or you can build your own custom grid. When a GridView detects that its contents are too long to fit the render box, it automatically scrolls.

We can build our own custom grid, or use one of the provided grids:

• GridView.count which creates a layout with a fixed number of tiles in the cross axis
• GridView.extent which creates a layout with tiles that have a maximum cross-axis extent

Remember: When displaying a two-dimensional list where it’s important which row and column a cell occupies (for example, it’s the entry in the “Animals” column for the “Lion” row), use Table or DataTable.

Image copyright to the owner

Woohoo! You made it to the end. So, this marks the end of the most commonly used widgets in a Flutter application. There are tons of other widgets which are used but when you are starting out, these will be the ones you will encounter the most and hence, you should understand how to use each one of these thoroughly.

Don’t forget to check out the Flutter Docs to learn more about each of these and others.

Hope you enjoyed this article!

Doubts? Feel free to drop a message to me.