Stack and Positioned in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the visual output of this Flutter code?

Consider this Flutter widget tree using Stack and Positioned. What will you see on the screen?

Flutter

Stack(
  children: [
    Container(width: 100, height: 100, color: Colors.red),
    Positioned(
      left: 20,
      top: 20,
      child: Container(width: 50, height: 50, color: Colors.blue),
    ),
  ],
)

A A red square with a smaller blue square inside it, offset 20 pixels from top-left

B A blue square behind a red square, both fully overlapping

C Only a blue square visible at top-left corner

D A red square with a blue square positioned outside its bounds

💡 Hint

Remember, Positioned places its child relative to the Stack's edges.

The red container forms the base 100x100 square. The blue container is positioned 20 pixels from the left and top inside the Stack, so it appears inside the red square offset by 20 pixels.

❓ lifecycle

intermediate

How does Flutter handle hit testing in a Stack with Positioned widgets?

Given multiple Positioned widgets inside a Stack, which statement about touch event hit testing is true?

A Only widgets without <code>Positioned</code> can receive touch events

B The bottom widget always receives the touch event regardless of position

C The topmost widget visually receives the touch event if it is hit

D Touch events are ignored inside a Stack

💡 Hint

Think about which widget is drawn last and visible on top.

Flutter hit tests widgets from top to bottom visually. The topmost widget under the touch point receives the event.

📝 Syntax

advanced

Which code snippet correctly uses Positioned.fill inside a Stack?

Choose the Flutter code that fills the entire Stack area with a green container using Positioned.fill.

A Stack(children: [Positioned.fill(child: Container(color: Colors.green))])

B Stack(children: [Positioned.fill(left: 0, top: 0, child: Container(color: Colors.green))])

C Stack(children: [Positioned.fill(child: Container(color: Colors.green), left: 0)])

D Stack(children: [Positioned(child: Container(color: Colors.green), fill: true)])

💡 Hint

Positioned.fill does not take positional parameters like left.

Positioned.fill is a named constructor that fills the Stack. It only takes a child parameter.

🔧 Debug

advanced

Why does this Positioned widget cause a layout error?

Examine this code snippet inside a Stack. Why does it cause a layout error?

Stack(
  children: [
    Positioned(left: 10, child: Container(width: 50, height: 50, color: Colors.red))
  ],
)

A Because Stack requires all Positioned widgets to have all four sides set

B Because <code>width</code> and <code>height</code> cannot be set inside Positioned children

C Because <code>left</code> must be zero or null

D Because <code>top</code> or <code>bottom</code> is missing, so vertical position is undefined

💡 Hint

Think about how Flutter calculates vertical position when only left is set.

Positioned requires at least two constraints for each axis. Here, vertical constraints are missing, so Flutter cannot determine vertical position.

🧠 Conceptual

expert

How does Stack's fit property affect its size and children layout?

Given a Stack with fit: StackFit.expand, what is the effect on the Stack and its children?

A Stack shrinks to fit only positioned children, ignoring non-positioned ones

B Stack expands to fill its parent, and non-positioned children fill the Stack

C Stack ignores the fit property and sizes to zero

D Stack sizes itself to the largest child, ignoring parent constraints

💡 Hint

Consider how StackFit.expand changes Stack's size behavior.

With StackFit.expand, the Stack fills its parent constraints. Non-positioned children are forced to fill the Stack's size.