Stack and Positioned in Flutter - Mini App: Build & Ship

Build: Stack Positioned Demo

This screen shows how to use Stack and Positioned widgets to place items on top of each other with exact positions.

Target UI

┌───────────────────────────────┐
│           Stack Demo           │
│ ┌───────────────────────────┐ │
│ │                           │ │
│ │   [Blue Box]              │ │
│ │   ┌───────────────┐       │ │
│ │   │               │       │ │
│ │   │  Red Circle   │       │ │
│ │   │   Positioned  │       │ │
│ │   └───────────────┘       │ │
│ │                           │ │
│ └───────────────────────────┘ │
│                               │
└───────────────────────────────┘

Use a Stack widget to layer two widgets.

Add a blue Container as the base box with fixed width and height.

Add a red circular Container positioned at the top right corner inside the blue box using Positioned.

The red circle should partially overlap the blue box.

Use proper sizes and colors to clearly see the layering.

Starter Code

Flutter

import 'package:flutter/material.dart';

class StackPositionedDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Stack Positioned Demo')),
      body: Center(
        child: // TODO: Add Stack with Positioned here
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

class StackPositionedDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Stack Positioned Demo')),
      body: Center(
        child: Stack(
          clipBehavior: Clip.none,
          children: [
            Container(
              width: 200,
              height: 200,
              color: Colors.blue,
            ),
            Positioned(
              top: -20,
              right: -20,
              child: Container(
                width: 80,
                height: 80,
                decoration: BoxDecoration(
                  color: Colors.red,
                  shape: BoxShape.circle,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

We use a Stack to place widgets on top of each other. The blue Container is the base box. The red circle is placed using Positioned with negative top and right values so it overlaps the blue box partially outside its bounds. The clipBehavior: Clip.none allows the red circle to overflow outside the stack area. This shows how Stack and Positioned work together to control exact widget placement.

Final Result

Completed Screen

┌───────────────────────────────┐
│           Stack Demo           │
│ ┌───────────────────────────┐ │
│ │                           │ │
│ │   ┌───────────────┐       │ │
│ │   │               │       │ │
│ │   │  Red Circle   │       │ │
│ │   └───────────────┘       │ │
│ │   ┌───────────────┐       │ │
│ │   │               │       │ │
│ │   │  Blue Box     │       │ │
│ │   │               │       │ │
│ │   └───────────────┘       │ │
│ │                           │ │
│ └───────────────────────────┘ │
│                               │
└───────────────────────────────┘

The red circle is fixed in position overlapping the blue box's top right corner.

No user interaction is required; this is a static layout demonstration.

Stretch Goal

Add a green square positioned at the bottom left corner overlapping the blue box.

💡 Hint

Use another Positioned widget with bottom: -20 and left: -20 inside the Stack.

Practice

1. What does the Stack widget do in Flutter?

easy

A. It layers widgets on top of each other.

B. It arranges widgets in a vertical list.

C. It creates a scrollable grid of widgets.

D. It displays widgets side by side horizontally.

Solution

1. Step 1: Understand Stack widget purpose

   The Stack widget allows placing widgets on top of each other in layers.

2. Step 2: Compare with other layout widgets

   Other widgets like Column or Row arrange widgets vertically or horizontally, not layered.

3. Final Answer:

   It layers widgets on top of each other. -> Option A

4. Quick Check:

   Stack = layering widgets [OK]

Hint: Stack means layering widgets over each other [OK]

Common Mistakes:

• Confusing Stack with Column or Row
• Thinking Stack scrolls content
• Assuming Stack arranges widgets side by side

2. Which of the following is the correct syntax to position a widget 10 pixels from the top and 20 pixels from the left inside a Stack?

easy

A. Positioned(left: 10, top: 20, child: Text('Hello'))

B. Positioned(top: 10, left: 20, child: Text('Hello'))

C. Positioned(bottom: 10, right: 20, child: Text('Hello'))

D. Positioned(10, 20, child: Text('Hello'))

Solution

1. Step 1: Check parameter order and values

   Positioned requires named parameters; order doesn't matter but values must match position.

2. Step 2: Verify correct top and left values

   Positioned(top: 10, left: 20, child: Text('Hello')) correctly sets top: 10 and left: 20 with child widget.

3. Final Answer:

   Positioned(top: 10, left: 20, child: Text('Hello')) -> Option B

4. Quick Check:

   top=10 and left=20 in Positioned [OK]

Hint: Use named parameters top and left with correct values [OK]

Common Mistakes:

• Swapping top and left values
• Placing child before position parameters
• Using bottom and right instead of top and left

3. What will be the visual result of this Flutter code?

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

medium

A. Only a blue square visible at top-left corner.

B. Two squares side by side, red on left and blue on right.

C. A red square with a smaller blue square overlapping near the top-left corner.

D. A blue square behind a red square, both fully visible.

Solution

1. Step 1: Understand Stack layering

   The red container is the base layer sized 100x100 pixels.

2. Step 2: Analyze Positioned child

   The blue container is 50x50 pixels placed 20 pixels from top and left, overlapping the red.

3. Final Answer:

   A red square with a smaller blue square overlapping near the top-left corner. -> Option C

4. Quick Check:

   Stack layers with Positioned overlap [OK]

Hint: Positioned child overlaps base widget at given offset [OK]

Common Mistakes:

• Thinking widgets appear side by side
• Assuming blue is behind red
• Ignoring Positioned offsets

4. Identify the error in this Flutter code snippet:

Stack(
  children: [
    Positioned(top: 10, child: Text('Hello')),
    Positioned(left: 20, child: Text('World'))
  ]
)

medium

A. Both Positioned widgets must have both top and left properties.

B. Positioned widgets cannot be direct children of Stack.

C. Positioned widgets must have at least two positioning properties (top, left, bottom, right).

D. Positioned widgets can have only one property; this code is correct.

Solution

1. Step 1: Review Positioned requirements

   Positioned widgets can use zero, one, or more positioning properties (top, left, bottom, right). Partial constraints are allowed (unspecified directions default to 0).

2. Step 2: Check given Positioned widgets

   The first uses top: 10 (Hello positioned 10px from top, left=0). The second uses left: 20 (World positioned 20px from left, top=0). No errors; valid code.

3. Final Answer:

   Positioned widgets can have only one property; this code is correct. -> Option D

4. Quick Check:

   Positioned allows partial properties [OK]

Hint: Positioned supports partial positioning properties [OK]

Common Mistakes:

• Thinking Positioned requires at least two properties
• Believing partial positioning is invalid
• Confusing Positioned requirements

5. You want to create a Stack where a small green circle is always centered over a larger yellow square, regardless of screen size. Which code snippet achieves this correctly?

hard

A. Stack(
children: [
Container(width: 200, height: 200, color: Colors.yellow),
Positioned.fill(child: Align(alignment: Alignment.center, child: Container(width: 50, height: 50, decoration: BoxDecoration(color: Colors.green, shape: BoxShape.circle))))
]
)

B. Stack(
alignment: Alignment.topLeft,
children: [
Container(width: 200, height: 200, color: Colors.yellow),
Container(width: 50, height: 50, decoration: BoxDecoration(color: Colors.green, shape: BoxShape.circle))
]
)

C. Stack(
children: [
Container(width: 200, height: 200, color: Colors.yellow),
Positioned(top: 75, left: 75, child: Container(width: 50, height: 50, decoration: BoxDecoration(color: Colors.green, shape: BoxShape.circle)))
]
)

D. Stack(
children: [
Container(width: 200, height: 200, color: Colors.yellow),
Positioned(bottom: 75, right: 75, child: Container(width: 50, height: 50, decoration: BoxDecoration(color: Colors.green, shape: BoxShape.circle)))
]
)

Solution

1. Step 1: Understand centering in Stack

   Using Positioned.fill with Align centers the child relative to the Stack size.

2. Step 2: Analyze each option

   Stack(
     children: [
       Container(width: 200, height: 200, color: Colors.yellow),
       Positioned.fill(child: Align(alignment: Alignment.center, child: Container(width: 50, height: 50, decoration: BoxDecoration(color: Colors.green, shape: BoxShape.circle))))
     ]
   )

   uses Positioned.fill and Align with Alignment.center, ensuring the green circle stays centered regardless of screen size.

3. Final Answer:

   Stack with Positioned.fill and Align to center the circle. -> Option A

4. Quick Check:

   Use Positioned.fill + Align for responsive centering [OK]

Hint: Use Positioned.fill with Align to center inside Stack [OK]

Common Mistakes:

• Hardcoding top and left offsets (Option A)
• Missing Positioned for precise control (Option B)
• Using bottom and right offsets incorrectly (Option D)