UI & Layout 101
In FlutterFlow, the layout is built using the UI Elements called Widgets. Widgets are categorized into Layout Elements, Base Elements, Page Elements, and Form Elements. Widgets from Base, Page, and Form elements such as Text, Buttons, Images, and Icons are visible on the screen. Whereas, the Layout Elements such as Container, Row, Column, and Stack are not visible on the screen but are important in building the layout of your page.
You build the layout by combining the widgets from these categories.
In this guide we'll cover the following:
One of the widely used layout patterns is to display widgets in a vertical or a horizontal direction. To display widgets vertically you can use the Column widget. Whereas to show widgets horizontally you can use the Row widget. In case you need to display one widget on top of the other, use the Stack widget.
Column, Row, and Stack
The Column, Row, and Stack widgets require a list of child widgets. And a child widget can itself be a Column, Row, and Stack. This allows you to nest one layout element into another such as Column inside Column, Row inside Row, Row inside Column, Column inside Row, Column inside Stack, and Stack inside Column or Row just like the following image.
Nesting Column, Row, and Stack
You can specify how a Column, Row, and Stack aligns its children, both vertically and horizontally.
For the Column and Row widget, you can also specify how child widgets use the available space.
The following figure shows how you can combine/nest several widgets to build a layout:
Column widget containing combination of Text and Row widgets
UI components built using Row and Column
Now that you know the basics of building the layout, it's time to put the learnings into practice. In this exercise you'll build the following layout:
Example layout of movie details page
The steps to the build the layout are as follows:
The very first step is to create a new project. After the project creation, you will have the default HomePage created with a basic appbar added to the page. To get started with building the layout, you can delete the default AppBar widget and only keep the Column widget.
Creating new project
When you are just getting started with building apps, this step is very crucial. Before you actually start adding widgets to the page, you must draw a diagram that shows how the main section (full layout) will be split into smaller sections. After that, identify the widgets that can replace those sections such as Column, Row, and Stack. Once you have enough idea of what widgets to use, you can start adding widgets. This exercise helps you better understand the layout and makes the overall process faster.
Splitting the given layout into sections looks like this:
Layout splitted into smaller sections
In the figure above, the main section is replaced with the Column widget and is divided into smaller sections. These smaller sections are then formed into widgets such as Image, Text, Row, and Stack. All the smaller sections are added as the child of the Column widget.
The next step is to carefully look at the smaller sections and if required divide them into further small sections and replaced them with the appropriate widget. You can repeat this process as long as you feel like splitting the sections.
Splitting the smaller section further looks like this:
UI components built using Row and Column
The top section comprises the Image and Text. You can place these widgets as a child of the Column widget.
Here's how you build the top section:
- Select the page.
- Inside the Column widget, drag the Image widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
- Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.
- Set its Width to inf (infinity) and Height to 450 PX.
- Find the Path property and enter the URL for the image.
- Inside Column, add one more widget i.e Text widget, set its text, and Theme Text Style to Title 1.
- Now, set its Left padding to 12 and Top padding to 20. Also, set its Horizontal Alignment to -1.
Adding top section
Now, you'll build the layout for displaying the overlapping images. As a rule of thumb, whenever you need to build the overlapping UI (i.e one widget on top of another) you should use the Stack widget.
Here's how you use the Stack widget to build the overlapping image UI:
- Below the title, add the Stack widget from the Layout Elements tab (in the Widget Panel) or add it directly from the Widget Tree tab. Set its Left and Right padding to 12 and Top padding to 16.
- Move to Property Editor and set its Radius to 58 and Box Fit to Cover.
- Select the CircleImage and drag to change the alignment.
Using Stack to build overlapping UI
To display the statistics, you can use the combination of the Text and Image widget. The steps to build the Stats UI are as follows:
- Below the overlapping images UI, add the Row widget from the Layout Elements tab and set its Main Axis Alignment to Space Evenly. Set its Left and Right padding to 12 and Top padding to 16.
- Inside the Row widget, add a Column widget.
- Inside Column, add the Text widget and set its Theme Text Style to Title 1.
- Add another Text widget and set its Theme Text Style to Body Text 2.
- Now add the Image widget and set its image either from Network or Asset. Also, set its Height and Width to 20.
- Copy the Column widget (Inside of the Row) and paste it inside the Row and then change the text and image values.
Building Stats UI
To show the description details, you can simply use the Text widget with some padding around it and provide the text.
Adding description
You may have a long description text that won't fit on the screen and in that case, the contents get clipped. This is because all the inner widgets are placed under the Column and the Column widget does not support scrolling. So the final step here is to replace the Column widget with the ListView widget because the ListView can scroll the content.
Here's what the widget tree should look like:
Replacing Column with ListView
Congratulations on building your first layout! When you run the app, it should look like the image shown at the start of this section.
Apart from Row, Column, and Stack widgets, there are some other widgets that are widely used for building the page layout. Here are some of them:
Last modified 10mo ago