The Flutter Series: Basic Widgets and Layout

Deven Joshi
Jun 30, 2018 · 5 min read

The Complete Flutter Series is a series of articles focused on cross-platform app development on the Flutter framework for everyone from beginners to experienced mobile developers.

In the last article we talked about a Flutter project and the files it includes. We also explored the code of the default counter app and dived into how the app works. This article will explore a few basic widgets used in building a layout in a Flutter app.

Note: All code for the layout is added in the “build” method inside your app page.

Layouts in Flutter

Layouts in Flutter consist of a hierarchy of widgets with the outer widgets usually deal with alignment and structure whereas the inner elements are usually the visible elements on the page itself, like buttons and images, etc.

In this example, there are three widgets: Center, Column and Text.

The Center and Column deal with structuring and aligning the elements inside them whereas the text is the only directly visible element in the app for a user.

A widget usually has properties for changing alignment, styles and attributes.

Let us now dive into individual widgets and see what they do.

We will split widgets into two rough categories:

  1. Visible Element Widgets
  2. Structuring and Alignment Widgets

Visible Element Widgets

These are a few commonly used Widgets

1. Text

A Text widget simply holds some text.

The text can be aligned using the textAlign property. The style property allows customisation of the text including font, font size, font weight, colour, letter spacing and a whole lot more.

2. Button

A Button widget allows a user to perform some action on click. Flutter does not have a direct “Button” widget, instead, it has types of button like a FlatButton and a RaisedButton.

The onPressed property allows some action to be performed when the button is clicked.

Changing the elevation of the RaisedButton changes how much it stands out.

3. Image

The Image widget holds an image and can fetch it from multiple sources like assets or even directly from a URL. In normal native Android this would have required a secondary library like Picasso.

4. Icon

The icon widget is a container for an icon in Flutter.

It also contains a size attribute to enlarge the icon.

Structuring and Alignment Widgets

1. Column

A Column is a widget which arranges all its children widgets in a vertical stack. It can space the widgets according to the mainAxisAlignment and crossAxisAlignment property. Here the “main axis” is the vertical axis and the “cross axis” is the horizontal axis.

Lets construct a column of 3 text widgets.

The column has 3 text widgets inside it and the mainAxisAlignment is set to ‘center’.

This is how it looks like:

Because of the mainAxisAlignment being center, it centres all the widgets. Let’s try something else. Let’s set mainAxisAlignment to spaceBetween.

Now they’re too far apart, let’s try spaceEvenly.

To space it in between the left and right sides of the screen, you have to use crossAxisAlignment.

2. Row

A row is the same as a column but constructs a horizontal row of widgets rather than a column. The main difference here is the main axis is the horizontal axis rather than the vertical one. The cross axis is the vertical axis.

3. Center

A Center widget simply centers the child inside it. All the previous examples included rows and columns that were inside a center widget. If the column was not inside a center widget, it would shift to the left. Here’s an example:

Column with a center widget around it

A center widget simply takes a child and centers it in the available space it is in.

4. Padding

Unlike in normal Android development where every view has its own padding attribute, padding is a widget that wraps other widgets to give them padding in all or specified directions.

This gives the text widget a padding of 8.0 in all directions.

Padding in specific directions is also allowed.

5. Scaffold

A Scaffold Widget provdies a framework for adding common material design elements such as AppBars, Drawers, Floating Action Buttons, Bottom Navigation, etc.

6. Stack

A Stack is used to overlap widgets, like a button on a background gradient. A Stack is a very important widget and we will go into further detail in a future article.

These are the basic widgets required to make a decent functioning app in Flutter. Flutter also allows you to make your own widgets if you need any other functionality added or if you want to reuse some repeating widget pattern.

For the complete list of Flutter widgets, visit this link.

Deven Joshi

Written by

Mobile Developer (Flutter + Android) | Technical Writer | Speaker | #Hack19 Winner | AAD graduate

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