Contents
description bug_report

Layouts

Contents

Given that Flutter is a UI toolkit, you’ll spend a lot of time creating layouts with Flutter widgets. In this section, you’ll learn how to build simple and complex layouts with some of the most common layout widgets. You’ll use Flutter DevTools (also called Dart DevTools) to understand how Flutter is creating your layout. Finally, you'll encounter and debug one of Flutter's most common layout errors, the dreaded "unbounded constraints" error.

Introduction to layouts

#

The following tutorial introduces you to layouts in Flutter, and gives you an opportunity to work with the most common layout widgets, like rows and columns.

Tutorial: Layouts in Flutter

Constraints

#

Understanding “constraints” in Flutter is an important part of understanding how Flutter’s layout algorithm works.

The following resources teach you what constraints are and some widgets that allow you to work with constraints.

Intermediate layout tutorial

#

Now that you understand layouts and some tools for working with them, check out the following tutorial, which goes a bit deeper into common layout widgets than the starting tutorial.

Tutorial: Build a Flutter Layout

Specific layout concepts

#

The following resources cover some common layout concepts that are a bit more involved than using rows and columns.

Scrollable widgets

#

Several Flutter widgets facilitate scrolling through content in your application. First, you’ll see how to use the most common widget for making any page scrollable, as well as a widget for creating scrollable lists. You’ll also be introduced to a common pattern in Flutter—the builder pattern. Many Flutter widgets use the builder pattern, including some scrolling widgets.

Stacks

#

Stacks give you more flexibility in placing widgets in Flutter by allowing you to specify exact locations of widgets within their parent, including on top of each other. If you’re coming from the web, Stacks solve the same problem as z-index.

If you followed the previous tutorials mentioned on this page, you’ve already worked with Stacks. If not, these resources provide an overview.

Overlays

#

Use an `Overlay`` when you have widgets that are logically related to each other but visually separate, such as tooltips.

Adaptive layouts

#

Because Flutter is used to create mobile, tablet, desktop, and web apps, it’s likely you’ll need to adjust your application to behave differently depending on things like screen size or input device. This is referred to as making an app adaptive and responsive. The following resources start by showing the most important widgets when building adaptive layouts, and finish with a codelab that has you build an adaptive layout yourself.

Tutorial: Adaptive Apps codelab

DevTools and debugging layout

#

Flutter has a robust suite of DevTools that help you work with any number of aspects of Flutter development. The "Widget Inspector" tool is particularly useful when building layouts (and working with widgets in general).

Additionally, perhaps the most common error you’ll run into while building a Flutter application is due to incorrectly using layout widgets, and is referred to as the “unbounded constraints” error. If there was only one type error you should be prepared to confront when you first start building Flutter apps, it would be this one.

Reference material

#

The following resources explain individual APIs.

Feedback

#

As this section of the website is evolving, we welcome your feedback!