Beginning Flutter

5Understanding the Widget Tree

WHAT YOU WILL LEARN IN THIS CHAPTER

• The fundamentals of widgets
• How to use a full widget tree
• How to use a shallow widget tree

The widgettree is how you create your UI; you position widgets within each other to build simple and complex layouts. Since just about everything in the Flutter framework is a widget, and as you start nesting them, the code can become harder to follow. A good practice is to try to keep the widget tree as shallow as possible. To understand the full effects of a deep tree, you'll look at a fullwidgettree and then refactor it into a shallowwidgettree, making the code more manageable. You'll learn three ways to create a shallow widget tree by refactoring: with a constant, with a method, and with a widget class.

INTRODUCTION TO WIDGETS

Before analyzing the widget tree, let's look at the short list of widgets that you will use for this chapter's example apps. At this point, do not worry about understanding the functionality for each widget; just focus on what happens when you nest widgets and how you can separate them into smaller sections. In Chapter 6, “Using Common Widgets,” you'll take a deeper look at using the most common widgets by functionality.

As I mentioned in Chapter 4, “Creating a Starter Project Template,” this book uses Material Design for all the examples. The following are the widgets (usable only with Material Design) that you'll use to create the full and shallow widget tree projects for this chapter: ...