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 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.
flutter_dash Tutorial: Layouts in Flutter
Understanding “constraints” in Flutter are 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.
- Article: Understanding Constraints
- Video: Expanded - Flutter Widget of the Week
- Video: Flexible - Flutter Widget of the Week
- Video: Intrinsic widgets - Decoding Flutter
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.
flutter_dash 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.
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.
- Documentation: Basic scrolling
- Video: Builder - Flutter Widget of the Week
- Video: ListView - Flutter Widget of the Week
- Example code: Work with long lists
- Example code: Create a horizontal list
- Example code: Create a grid list
- Video: PageView - Flutter Widget of the Week
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
If you followed the previous tutorials mentioned on this page, you’ve already
Stacks. If not, these resources provide an overview.
Overlay` when you have widgets that are logically related to each
other but visually separate, such as tooltips.
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.
- Video: LayoutBuilder - Flutter Widget of the Week
- Video: MediaQuery - Flutter Widget of the Week
- Video: Building platform adaptive apps
flutter_dash 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 before you start building Flutter apps, it would be this type.
The following resources explain individual APIs.