Flutter 101: Essential Layout Techniques for Designing UIs in Flutter

In this article ‘Essential Layout Techniques for Designing UIs in Flutter‘ we will explain, What are Layout widget, and how do you use them to design UI in Flutter?

Layout widgets are a fundamental part of Flutter’s widget library, designed to structure and organize visual elements within your app’s user interface. They control how child widgets are displayed on the screen, including their size, position, and alignment. Using layout widgets effectively is crucial for creating responsive and visually appealing designs.

Essential Layout Techniques for Designing UIs in Flutter

Layout System

Flutter’s layout system is a powerful and flexible way to build responsive and visually appealing user interfaces for mobile, web, and desktop applications. Understanding how layouts works in Flutter is essential for creating efficient and maintainable apps.

In Flutter, everything is a widget, including layout elements.

Widgets describe the configuration for elements that can be rendered on the screen. The layout in Flutter is determined by the composition of these widgets, arranged in a tree-like structure called the widget tree.

Flutter’s layout system is based on a combination of:

  • Parent widgets:
    • These determine the size and position of their child widgets.
  • Child widgets:
    • These are the widgets that are arranged and displayed by the parent.

Understanding how to compose these widgets effectively allows developers to create complex and responsive UIs.

The Widget Tree

The widget tree is the hierarchical structure of widgets that Flutter uses to render the UI. Each widget in the tree can have zero or more child widgets, forming a parent-child relationship.

In this example

  • MaterialApp is the root widget.
  • Scaffold is a child of MaterialApp.
  • AppBar and body are children of Scaffold .
  • Center is a child of body.
  • Column is a child of Center, and so on.

Types of Layout Widgets

In Flutter, layout widgets are used to arrange and structure the UI elements on the screen. These widgets allow developers to create flexible and responsive designs.

Container

In Flutter, A Container is like a box that holds other widgets (like text, images, buttons, etc.). It allows you to style and position those widgets with padding, margins, and decoration like background colors or borders. It’s a flexible widget that can be used to manage how a part of the screen looks and behaves or you can say,
A versatile widget that combines common painting, positioning, and sizing widgets. It can have a single child but also supports margins, padding, borders, and background decoration.

Padding and Borders

  • If the Container has a child (like a text or button), it will first surround the child with padding (space around the child).
  • If the container has a border, the padding is added inside the border.
  • After padding, the container applies any width or height settings to decide how big it should be.

Margin

  • After deciding the size, the Container adds margins (empty space around the outside of the container).

Size Behavior

  • If there’s no child in the Container, it will try to be as big as possible.
  • If the screen doesn’t limit its size, it will shrink as much as possible.
  • If there is a child, the Container will adjust its size to fit the child, unless you force it to a specific size using width and height.

By default, the Container doesn’t respond to touch (or “hit testing”) unless it has a color or some decoration. In that case, it will respond to taps and touches like a button.

Layout behavior Essential Layout Techniques for Designing UIs in Flutter

The layout behavior refers to how the Container decides its size and positioning on the screen based on different properties like width, height, constraints, alignment, and the size of its child (if it has one). The Container is a very versatile widget, but this makes its layout rules a bit complex because it combines many different properties into one widget.

The Container is made up of several widgets (like padding, margin, and decoration). Each of these widgets has its own layout rules, so when they are all combined in a Container, the behavior can seem complicated.

General Layout Rule

  • The Container tries to:
    • Respect any alignment given.
    • Size itself according to its child widget.
    • Follow any width, height, or constraints given.
    • Expand to fill its parent (if possible).
    • Be as small as possible if non of the above applies.

Specific Scenarios

  • No child, no height, no width, no constraints, and the parent has unbounded constraints.
    • Unbounded constraints means the parent (like a scrollable widget) doesn’t limit the size of the container.
    • In this case, the Container will try to be as small as possible because nothing is forcing it to be bigger.
  • No child, no alignment, but has height, width, or constraints
    • The Container will try to size itself as small as possible within the limits of the provided width, height, or constraints and those from the parent.
    • Example: If you give a Container a fixed height and width, it will size itself exactly to those dimensions.
  • No child, no height, no width, no constraints, no alignment, but the parent has bounded constraints
    • Bounded constraints mean the parent limits the size of the Container.
    • Here, the Container will expand to fit the size allowed by the parent.
  • Has alignment and the parent has unbounded constraints.
    • The Container will size itself around its child widget and position the child according to the alignment property (e.g., center, top-left, etc.).
  • Has alignment and the parent has bounded constraints
    • The Container will first expand to fill the parent, and then it will position its child within itself based on the alignment property.
  • Has a child, but no height, no width, no constraints, and no alignment
    • The Container will pass the parent’s constraints (size limitations) to its child and size itself to fit the child exactly. Essentially, the child’s size determines the container’s size.

Effects of Margin and Padding

  • Margin: Adds extra space outside the container, between the container and other widgets.
  • Padding: Adds space inside the container, between the child and the container’s border.
  • These properties affect how the container sizes and positions itself.

Row and Column

These linear layout widgets distribute child widgets horizontally (Row) and vertically (Column). They are useful for creating flexible layouts that adjust to screen sizes.

In simple terms, Flutter uses “widgets” for almost everything you see in an app. A widget is like a building block that makes up different parts of the app. Whether it’s an image, a button, text, or even how things are arranged on the screen (like rows and columns), they are all widgets.

You can think of widgets as little pieces of an app. When you put them together, you can build more complex layouts. For example, you can use widgets to display a row of icons with labels underneath, by combining simple pieces to make something that looks more organized and useful.

So, creating an app layout in Flutter is all about putting together these little building blocks (widgets) in different ways.

To create a row or column in Flutter, you add a list of children widgets to a Row or Column widget. 

Important Properties of Row

  • children: List of widgets to arrange horizontally.
  • mainAxisAlignment: Aligns children along the main axis (in the case of Row, it’s the horizontal axis). Available options:
    • MainAxisAlignment.start: Aligns all the children to the start (left by default).
    • MainAxisAlignment.end: Aligns all the children to the end (right by default).
    • MainAxisAlignment.center: Centers all children in the row.
    • MainAxisAlignment.spaceBetween: Places space between children, with no space at the start or end.
    • MainAxisAlignment.spaceAround: Places equal space around all children, including the start and end.
    • MainAxisAlignment.spaceEvenly: Places equal space between children but with equal spacing at the start and end too.
  • crossAxisAlignment: Aligns children along the cross-axis (vertical axis for Row). Options:
    • CrossAxisAlignment.start: Aligns the children to the top.
    • CrossAxisAlignment.end: Aligns the children to the bottom.
    • CrossAxisAlignment.center: Centers the children vertically.
    • CrossAxisAlignment.stretch: Stretches the children to take up the entire cross-axis height.
  • mainAxisSize: Determines the space the Row should take along its main axis (horizontal). Options:
    • MainAxisSize.max: Row takes up the entire width of its parent.
    • MainAxisSize.min: Row takes only as much width as its children need.

Important Properties of Column

  • children: List of widgets to arrange vertically.
  • mainAxisAlignment: Aligns children along the main axis (in the case of Column, it’s the vertical axis). Same options as the Row widget.
    • MainAxisAlignment.start: Aligns children to the top.
    • MainAxisAlignment.end: Aligns children to the bottom.
    • MainAxisAlignment.center: Centers the children vertically.
    • MainAxisAlignment.spaceBetween: Places space between children, with no space at the top or bottom.
    • MainAxisAlignment.spaceAround: Places equal space around children.
    • MainAxisAlignment.spaceEvenly: Even space between children, and equal spacing at the top and bottom.
  • crossAxisAlignment: Aligns children along the cross-axis (horizontal axis for Column). Same options as Row.
    • CrossAxisAlignment.start: Aligns the children to the left.
    • CrossAxisAlignment.end: Aligns the children to the right.
    • CrossAxisAlignment.center: Centers the children horizontally.
    • CrossAxisAlignment.stretch: Stretches the children to take up the entire cross-axis width.
  • mainAxisSize: Determines the space the Column should take along its main axis (vertical). Same options as Row.
    • MainAxisSize.max: Column takes up the entire height of its parent.
    • MainAxisSize.min: Column takes only as much height as its children need.

Stack

The Stack class in Flutter is a widget that allows you to place multiple children widgets on top of each other. Think of it like stacking items in a pile, where the first one is at the bottom, and the others are stacked above it. This is useful when you want to layer widgets, such as adding text over an image or positioning buttons over a background.

What does Stack do?

Imagine you have several pictures, and you want to overlap them in a specific order. The Stack widget lets you do that. It helps you position its children (other widgets) relative to the edges of the Stack’s box. For example, you might want to place a title, an image, and a button all in the same area, with the text over the image and the button at the bottom.

Positioned vs. Non-Positioned Children

You can either let the Stack arrange children automatically, or you can specify exactly where you want them. Children that are not positioned are arranged one on top of the other, starting from the bottom. If you want more control (like moving a widget to the top-right corner), you can use a Positioned widget, which allows you to specify where to place the child widget by using properties like top, left, right, and bottom.

Wrap

The Wrap class in Flutter is used when you want to arrange your elements (called “children” in programming) in multiple rows or columns.

Think of it like organizing items on a shelf. If there’s not enough space to fit another item on the same row, you start placing them on the next row. The Wrap widget does this automatically.

  1. Direction: You can choose to arrange your items either horizontally (side by side) or vertically (one on top of the other).
  2. Spacing: You can control how much space is left between the items.
  3. Alignment: You can decide how the items are lined up in both the horizontal and vertical directions.
  4. Run: A run is just a row or a column. If the items don’t fit in the first row/column, they will move to the next one.

GridView

In Flutter, a GridView is a layout that allows you to display items in a grid, similar to how images are laid out in a gallery app. It’s like arranging items in rows and columns. Instead of showing things one after the other (like in a ListView), a GridView arranges them in a grid pattern.

Different types of GridView

There are a few ways to create grids in Flutter:

  1. GridView.count: This allows you to specify a fixed number of columns (cross-axis count) in the grid. For example, if you want a grid with 3 items in each row, you would use GridView.count.
  2. GridView.extent: This allows you to define the maximum width of each item, and Flutter will automatically calculate how many items fit in one row based on the available space.
  3. GridView.builder: If you want to create a grid with a lot of items or an infinite number of items, you would use GridView.builder. It is more efficient for large lists.
  4. GridView.custom: If you need more control over the grid, you can use GridView.custom and provide your own custom layout logic.

ListView

A ListView in Flutter is a widget that lets you display a list of items in a scrollable manner. You can think of it like a shopping list or a list of messages where each item follows one after the other, and the user can scroll through the list.

Different Types of ListView

There are different ways to use a ListView depending on your needs

  • ListView (Default Constructor): You use this when you have a fixed number of items, and you want to display them all at once

This method is fine if you have a small number of items.

  • ListView.builder: This constructor is used when you have a large or infinite number of items, and you only want to create (or build) the items that are visible on the screen. This is more efficient.

ListView.builder creates only the visible items and builds more as the user scrolls, making it great for long lists.

  • ListView.separated: This is used when you want to separate the list items with dividers or other widgets.

Here, a Divider is placed between every item, like the lines between contacts in a phonebook.

Example

Thank you for taking the time to read! Feel free to explore more of our content or leave a comment below.
Read my latest post Stateless vs Stateful

Difference between Stateless and Stateful Widget

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *