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.