10Building Layouts

WHAT YOU WILL LEARN IN THIS CHAPTER

  • How to create simple and complex layouts
  • How to combine and nest widgets
  • How to combine vertical and horizontal widgets to create a custom layout
  • How to build the UI layout by using widgets such as SingleChildScrollView, SafeArea, Padding, Column, Row, Image, Divider, Text, Icon, SizedBox, Wrap, Chip, and CircleAvatar

In this chapter, you'll learn how to take individual widgets and nest them to build a professional layout. This concept is known as composition and is a huge part of creating Flutter mobile apps. Most of the time you can build simple or complex layouts either using vertical or horizontal widgets or using a combination of both.

A HIGH‐LEVEL VIEW OF THE LAYOUT

This chapter's goal is to create a journal entry page displaying details from top to bottom. The journal page shows the header image, title, diary detail, weather, (journal location) address, tags, and footer images. The weather, tags, and footer images sections are built by nesting widgets to build a custom layout (Figure 10.1).

Screenshot of journal detail page layout.

FIGURE 10.1: Journal detail page layout

Starting with a high‐level view, let's break down the main parts of the layout that forms the foundation. A great way to start laying out the journal entry is to add layers from the bottom toward the top, the same way you stack paper. Figure 10.2 shows the journal page layout structure. ...

Get Beginning Flutter now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial