Decode Row & Column

Greg Perry
16 min readJun 14, 2019

An in-depth look at the Row and Column widget

A Flutter app’s user interface is made up primarily of what are called Widgets. Nothing but Widgets. Some you can see; some you can’t. This article is going to address two you can’t see, but are very important to the user interface. The Row widget and the Column widget.

You can’t readily see them rendered on the screen without Flutter highlighting their borders while debugging for example. However, in most cases, you can readily see their ‘children.’ Their children are, in fact, a List of other Widgets.

Row and Column widgets are used to align their children horizontally or vertically respectively, and to dictate how much space their children should occupy. If you only have one child widget to display, it’s suggested to use an Align widget or a Center widget instead to position and display it. The Row and Column widget are very much alike as you see below.

Row class and Column class as of June 04, 2019

You can see both classes utilize the same list of named parameters and default values. Further, both use the same-named parameter to accept their List of Widgets. It’s called, children.

Both classes extend the Flex class. The Flex class, by design, displays its List of child Widgets either horizontally or vertically. In fact, you could replace either class with this parent class. However, if you know beforehand how you’re going to display the children either horizontally (Row) or vertically (Column), you might as well use the appropriate class. Right?

How This‘ll Go Down

In this article, we’ll go back and forth between each widget, reviewing each and every named parameter that resides in both. We’ll try not to be too redundant in the examples used since both classes are indeed very much alike. It’s only in the orientation of their widgets on the screen that they really differ. As with my past articles, I will turn to steadfast examples offered by Google’s own documentation. I will even reference the Flutter Gallery (Google’s source of working examples) to demonstrate how these two particular widgets are implemented and affect the user interface.

--

--