Posicionado em um Canto

Parte da seção Layouts que se adaptam do Journey de Flutter da Coddy. Lição 11 de 30.

Os filhos de um Stack começam no canto superior esquerdo dele. Para colocar um deles em outro lugar, envolva-o em Positioned e indique a distância em relação às bordas:

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

top:, bottom:, left: e right: são distâncias em pixels em relação àquela borda do Stack. Informe um lado para cada direção: top ou bottom, e left ou right.

Um filho Positioned não altera o tamanho do Stack. A foto ainda determina o tamanho dele.

Desafio

Fácil

Mova o selo SALE para o canto superior direito da foto, a 12 pixels do topo e 12 da direita.

Experimente você mesmo

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)),
            ],
          ),
        ),
      ),
    );
  }
}