Positioned in a Corner

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

Children of a Stack start at its top left corner. To put one somewhere else, wrap it in Positioned and say how far it is from the edges:

Stack(
  children: [
    Container(height: 200, color: Colors.grey),
    const Positioned(
      bottom: 8,
      left: 8,
      child: Text('Bottom left'),
    ),
  ],
)

top:, bottom:, left: and right: are distances in pixels from that edge of the Stack. Give one side for each direction: top or bottom, and left or right.

A Positioned child does not change the size of the Stack. The photo still decides how big it is.

Challenge

Easy

Move the SALE badge to the top right corner of the photo, 12 pixels from the top and 12 from the right.

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: [
              Stack(
                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)),
            ],
          ),
        ),
      ),
    );
  }
}