Flutter UI code tutorial: mastering Row and Column

Learning a new UI engine is always tricky. Thankfully, the Flutter team has highlighted the basic widgets. For this code tutorial, we will focus on Row and Column, which lay out a list of child widgets in the horizontal and vertical direction respectively.

First off, my favourite thing about them is that, even though you may mistake them for Android SDK’s LinearLayout at first, they are actually far more flexible, yet easy to understand.

To figure out how Row and Column work, we will start from 3 different mock-ups and lay them out using them. We will do this as part of an app with 3 screens (one screen per example).

For each example, we will have a rough sketch of what we want, with notes to describe how each part of the layout behaves. Why rough hand drawn sketches and not fancy mock ups done in Photoshop? Because I want to show you a simple process that you can apply to your own mock ups. Oh, and also because pen and paper is a very useful tool (see Tip 3 of 4 tips to boost your software development career).

A few basic rules to remember

The documentation is rich in explanations about how Flutter lays things out, but, when you’re starting out, this is a bit daunting. So, I’ve extracted a few basic Flutter UI rules that will allow you to build many layouts.

  • if you want to split your screen horizontally, ie several elements to the right or left of each other, use a Row
  • if you want to split your screen vertically, ie several elements above or below each other, use a Column
  • if you want to specify padding, a background colour, or a fixed height or width for an item, wrap it inside a Container
  • if you want a child element of a Row or Column to expand to fill in the available space, wrap it inside an Expanded
  • elements have sensible names and the search feature on the website is pretty good, so use it! For example, if you search for text, you will see both the Text widget and a page listing the different types of available Text widgets.

 

Code tutorial setup

To follow the code tutorial, create a new app as follows.

If you’re unsure how to set up a Flutter app, check out Getting started with Flutter official tutorial.

We will set up the app to have 3 screens, namely Example1Page, Example2Page, and Example3Page.

So let’s amend main.dart to launch the app on the first example screen.

Now, we create example1_page.dart, example2_page.dart and example3_page.dart, with a simple navigation from 1 to 2 and from 1 to 3 via buttons in the toolbar.

Example 1

For this example, we will create a screen with a subtitle (below the toolbar) which is always shown, a call to action button at the bottom, which is also always shown, and some other content in between the two.

From mock to Flutter widgets

Let’s start with a sketch of the screen, annotated with descriptions in plain English. Then, we convert the descriptions into Flutter widgets.

Example1 Sketch
Example1 Sketch

Code

Now, we implement the design in example1_page.dart.

Voila!

Example1 screenshot
Example1 screenshot

Example 2

For this example, we will create a screen with a subtitle (below the toolbar) which is always shown, a list which takes up 2 / 3 of the space below the subtitle, and a grid which takes up 1/ 3 of the space below the subtitle.

From mock to Flutter widgets

Let’s start with a sketch of the screen, annotated with descriptions in plain English. Then, we convert the descriptions into Flutter widgets.

Example2 Sketch
Example2 Sketch

Code

Now, we implement the design in example2_page.dart.

Voila!

Example2 screenshot
Example2 screenshot

Example 3

For this example, we will create a widget that would most likely be used in a list. It has an icon on the left and one on the right, a title which itself is made up of an image, and 2 separate pieces of text (one of those to be truncated as required), and a description to be restricted to 2 lines.

From mock to Flutter widgets

Let’s start with a sketch of the screen, annotated with descriptions in plain English. Then, we convert the descriptions into Flutter widgets.

Example3 Sketch
Example3 Sketch

Code

Now, we implement the design in example3_page.dart.

Voila!

Example3 screenshot
Example3 screenshot

 

What next?

From one of your favourite apps, or an app you are working on now, choose a screen, and work out how you would lay it out in Flutter.

 

Author: Natalie Masse Hooper

Mobile app developer with 14 years experience. Started with the Android SDK in 2010 and switched to Flutter in 2017. Past apps range from start ups to large tech (Google) and non tech (British Airways) companies, in various sectors (transport, commercial operations, e-commerce).

7 thoughts on “Flutter UI code tutorial: mastering Row and Column”

  1. Great post. There is not much documentation on how to use the layout widgets together so this is very helpful.

    One anomaly in your first design. If there is an entry form in the middle, the bottom footer slides up with the keyboard. Do you know a way to get the keyboard to cover the bottom footer instead?

  2. Combination of useful tips, sketches and clearly laid out code is effective. I ‘got it’ really quickly. Thanks

  3. Hi Natalie

    Remember me? We worked together in ubicabs. I was working remotely as android dev then.

    I was searching for flutter layouts and found your blog. Great work and nice blog. (y)

    regards
    hashir

Leave a Reply

Your email address will not be published.