Breaking layouts in Rows and Columns in Flutter

Pooja Bhaumik
Jun 14, 2018 · 7 min read

If you have read about Flutter even for 5 mins, you must have stumbled upon Widgets. And the most popular fact “In Flutter, almost everything is a widget”.

Yes, everything. 😅

I define Widgets as the components or blocks that define the user interface. The AppBar is a widget, the text on it is a widget, the style you apply to the text is a widget, even the alignment of the text could be called as a widget. In Flutter, anything that is a view or contributes to a property of the view is a widget.

I can go on and on about widgets, but to simplify, here is a recommended list of widgets you must know to build an application in Flutter. For quick reference, see below.

Focusing on Rows and Columns

In Flutter, you can break almost 90% of the layout designs into Rows and Columns. Occasionally, you will have to use other widgets like Stack, Grid etc, but from the base level, you will be requiring rows and columns in some UI block or the other.

So Rows and Columns are…

When there are elements placed side by side, or horizontally left/right of another element, you need Rows.

When there are elements placed one after another, or vertically top/bottom to another element, you need Columns.

Pretty basic, right? 🙂

For the purpose of this article, you should also know the following:
Containers : If you are coming from a web development background, or have any basic knowledge of HTML, containers will sound quite familiar to divs.
Stacks: If there are views overlapping other views, use Stacks.

Let’s build some UI

Time to dive into the code and build a couple of pretty popular layout components and see how Rows and Columns fit in here. For the first design, we will be replicating the WhatsApp Chats Screen list item. Something similar to the below image.

Layout Breakdown #1

So how many elements or views do we see? Profile picture. User name. User’s latest message. Time of the last message. And number of unread messages.

Lets wrap all of this inside a container, and have three children sections : leftSection, middleSection, and rightSection, one after another horizontally.

leftSection will contain the profile picture.
middleSection will have lastMessage below userName.
rightSection will have unreadMessageCount below timeStamp.

Okay. Was that hard?
Maybe in the beginning, but once you get the hang of rows and columns, you can naturally breakdown layouts in your head.

Time to code

Unlike most other beginner level tutorials, I will always try to break down my code into different classes and widgets. It makes the code super readable.

main.dart

Beginner’s tip: Don’t forget to import the classes you will be using. So for example, main.dart will import chat_screen_item.dart which has our ChatItemScreen class.

chat_item_screen.dart

That was just to get you started, so that you don’t stumble upon your basic starting steps. Now we move on to the main code. Our ChatItem class will return a Container widget which has a Row child. This Row child will have three new children leftSection, middleSection and rightSection widgets which we will be constructing soon.

chat_item.dart

Left Section

In the left section, we need a CircleAvatar, and we have a nice little widget for that as well.

Middle Section

Now inside middleSection Container, we create a column of two text widgets that will hold the userName and lastMessage content.

It does the work of placing widgets one after another but looks really ugly. Time to add some beautification.

  • Expanded : Since this section wants all the free space available, we wrap the entire container in this Expanded widget. Without this, the layout will look like this —
  • Padding : More room to breathe, woah.
  • TextStyle : Gives styling to the text, like colors, fontSize, etc. So much like CSS, damn.
  • Now I can explain crossAxisAlignment and mainAxisAlignment, but I can’t explain it better than this video. So I would suggest you to learn from the best. (Check from 2:00 to 7:30 to just get a quick reference to the topic we are at)

Right Section

We are almost done. Just need to build another column of two widgets. This time, the children widgets will be a Textwidget for timestamp and another tiny CircleAvatar for the count.

Now run this beautiful thing. And it’s ready.

Shall we breakdown another layout just to make sure you’re getting the hang of it?

I thought so too.

Layout Breakdown #2

Zomato collections card

So we have this simple card layout that has a column of a few text widgets overlapping a background image. Hmm.. did you say overlapping? So does that mean we use Stacks here?

YES, you are getting it.

So instead of left, middle or right section, let’s break down this layout into backgroundImage, and onTopContent.

Background Image

Now background image will just have a Containerwith a background image and a color filter to darken the background.

On Top Content

What do you think? Rows or columns?

You got it. Coluuuumns.

Now don’t be surprised by the styles I have used. These are not Flutter defaults, I know you have errors. All the styles for zomato card are defined here.

You can even find the entire GitHub repository for these layouts here.

In the future, I will explore more complex layouts that you can break to the root level. Ofcourse, you will be needing more widgets for more complex layouts, but Rows and Columns will always have a role in it somewhere so it’s important you get this in your head.

Read my other articles on Flutter


Flutter is fresh, and I’m currently discovering it myself. If you find something wrong with my code or approach, do mention it in the comments, I would love to improve.

If you learnt even a thing or two, clap your hands 👏 as many times as you can to show your support!

Hello World, I am Pooja Bhaumik. A creative developer and a logical designer. You can find me on Linkedin or stalk me on GitHub or follow me on Twitter? If that’s too social for you, just drop a mail to pbhaumik26@gmail.com if you wish to talk tech with me.

Flutter Community

Articles and Stories from the Flutter Community

Pooja Bhaumik

Written by

Google Developer Expert @Flutter, Mobile Developer, Public Speaker, Technical Blogger, Mentor @MentorCruise

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade