Introducing Layout Widgets

There are multiple widgets that you can use for layout purposes, and some of them might look very similar.

Starting from the widgets needed for the example shown above and explained in the next chapter, we will obviously be citing the simple vertical and horizontal visual layout structures:

• The Column, described in detail in ​The Column​, which allows you to stack widgets vertically, like we did in Chapter 1. It should not be confused with the Stack, which is actually used to display widgets on top of others.

• The ListView, described in detail in ​The ListView​, which allows you to create (potentially infinite) scrollable lists of widgets.

• The Row, described in detail in ​Horizontal Layout: The Row​, which allows you to display widgets side by side.

• The GridView, described in detail in ​The GridView​, which is used to create scrollable grids, a lot like ListView’s are used to create scrollable mono-dimensional lists.

Additionally, this chapter will cover the Expanded widget (in ​Fill the Space Available in the View Using Expanded​), which is used to create Column or Row children of different sizes.

We’ll also talk about Slivers (in ​Slivers, Custom Scrollables, and Collapsable App Bars​), which are used for advanced scrolling, and the Key (in ​The Key​), which I told you to ignore in the previous chapter.

In the next chapter, we’ll combine together many of the widgets covered here (more on that in Chapter 3, ​ Building a Calculator App ​).

So let’s begin.

We’ll start with the simple and ubiquitous Padding and Container, as you’ll use them together with many other widgets when building apps, and then we’ll talk about how to ​Add Your Own Assets to the App​.