Stack and Positioned in Flutter - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Stack widget in Flutter?

A Stack widget lets you place widgets on top of each other like a stack of papers. It allows overlapping and layering of child widgets.

beginner

How does the Positioned widget work inside a Stack?

The Positioned widget lets you place a child widget at a specific position inside a Stack using properties like top, left, right, and bottom.

beginner

What happens if you use a Stack without any Positioned children?

Without Positioned, children are placed in order, aligned to the top-left by default, stacked on top of each other without specific positioning.

intermediate

Can a Positioned widget be used outside a Stack?

No, Positioned only works inside a Stack. Using it outside causes an error because it needs the Stack context to position itself.

beginner

What is the difference between Stack and Column widgets?

Stack layers widgets on top of each other, allowing overlap. Column arranges widgets vertically without overlap.

Which widget allows you to place children on top of each other in Flutter?

A Stack

B Row

C Column

D Container

The Stack widget layers children on top of each other, unlike Row or Column which arrange children horizontally or vertically.

What property would you use in a Positioned widget to place a child 10 pixels from the top?

A bottom: 10

B left: 10

C right: 10

D top: 10

Use top: 10 to position the child 10 pixels from the top edge inside a Stack.

What happens if you use Positioned outside a Stack?

A It works normally

B It causes a runtime error

C It ignores positioning

D It converts to a <code>Container</code>

Positioned requires a Stack parent. Outside it causes an error.

If you want widgets to not overlap but be stacked vertically, which widget should you use?

A Stack

B Positioned

C Column

D Expanded

Column arranges widgets vertically without overlap.

Which of these is NOT a valid property for Positioned?

A margin

B left

C bottom

D top

Positioned uses top, left, right, and bottom. It does not have a margin property.

Explain how the Stack and Positioned widgets work together to create layered layouts in Flutter.

Think about how you place sticky notes on a board.

Describe a real-life scenario where using a Stack with Positioned widgets would be useful in a mobile app UI.

Imagine putting a small label on top of a photo.