Coding All-in-One For Dummies, 2nd Edition

Chapter 6

Laying Things Out

IN THIS CHAPTER

Putting widgets where you want them

Dealing with common layout problems

Working with various screen sizes

In a Flutter layout, widgets are nested inside of other widgets. The outer widget sends a constraint to the inner widget:

"You can be as wide as you want, as long as your width is between 0 and 400 density-independent pixels."

Later on, the inner widget sends its exact height to the outer widget:

"I'm 200 density-independent pixels wide."

The outer widget uses that information to position the inner widget:

"Because you're 200 density-independent pixels wide, I'll position your left edge 100 pixels from my left edge."

Of course, this is a simplified version of the true scenario. But it's a useful starting point for understanding the way Flutter layouts work. Most importantly, this outer/inner communication works its way all along an app's widget chain.

Imagine having four widgets. Starting from the outermost widget (such as the Material widget), call these widgets “great-grandmother”, “grandmother”, “mother”, and “Elsie.” Here's how Flutter decides how to draw these widgets:

1. Great-grandmother tells grandmother how big she ...