Stack Widgets on Top

Part of the Layout That Fits section of Coddy's Flutter journey. Lesson 10 of 30.

A Column puts its children one under another, and a Row side by side. A Stack puts them on top of each other, like sheets of paper on a desk:

Stack(
  children: [
    Container(height: 200, color: Colors.grey),
    const Text('On top'),
  ],
)

The first child is drawn first, at the bottom. Each child after it is drawn over the ones before. So the photo goes first and the label that sits on it goes last.

Children start at the top left corner of the Stack, and the Stack is as big as its biggest child. That is how a badge, a label or a play button sits on a picture.

Challenge

Easy

The SALE badge sits under the photo. Put it on the photo: change the Column holding the two into a Stack, with the badge drawn in front.

Try it yourself

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Shop')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Column(
                children: [
                  Container(
                    height: 200,
                    color: Colors.blueGrey.shade100,
                    child: const Center(child: Icon(Icons.image, size: 64)),
                  ),
                  Container(
                    padding: const EdgeInsets.all(8),
                    color: Colors.red,
                    child: const Text('SALE', style: TextStyle(color: Colors.white)),
                  ),
                ],
              ),
              const SizedBox(height: 12),
              const Text('Running shoes', style: TextStyle(fontSize: 20)),
            ],
          ),
        ),
      ),
    );
  }
}