10
Building 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...