Beginning Flutter

6Using Common Widgets

WHAT YOU WILL LEARN IN THIS CHAPTER

• How to use basic widgets such as Scaffold, AppBar, SafeArea, Container, Text, RichText, Column, and Row, as well as different types of buttons
• How to nest the Column and Row widgets together to create different UI layouts
• Ways to include images, icons, and decorators
• How to use text field widgets to retrieve, validate, and manipulate data
• How to check your app's orientation

In this chapter, you'll learn how to use the most common widgets. I call them our base building blocks for creating beautiful UIs and UXs. You'll learn how to load images locally or over the Web via a uniform resource locator (URL), use the included rich Material Components icons, and apply decorators to enhance the look and feel of widgets or use them as input guides to entry fields. You'll also explore how to take advantage of the Form widget to validate text field entry widgets as a group, not just individually. Additionally, to account for the variety of device sizes, you'll see how using the MediaQuery or OrientationBuilder widget is a great way to detect orientation—because using the device orientation and layout widgets accordingly based on portrait or landscape is extremely important. For example, if the device is in portrait mode, you can show a row of three images, but when the device is turned to landscape mode, you can show a row of five images since the width is a larger area than in portrait mode.

USING BASIC WIDGETS

When building ...