Apilar widgets uno encima de otro

Parte de la sección Diseños que se adaptan del Journey de Flutter de Coddy. Lección 10 de 30.

Una Column coloca sus elementos secundarios uno debajo del otro, y una Row, uno al lado del otro. Una Stack los coloca unos encima de otros, como hojas de papel sobre un escritorio:

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

El primer elemento secundario se dibuja primero, en la parte inferior. Cada elemento secundario que le sigue se dibuja encima de los anteriores. Así que la foto va primero y la etiqueta que se coloca sobre ella va al final.

Los elementos secundarios empiezan en la esquina superior izquierda de la Stack, y la Stack tiene el tamaño de su elemento secundario más grande. Así es como una insignia, una etiqueta o un botón de reproducción se coloca sobre una imagen.

Desafío

Fácil

La insignia SALE está debajo de la foto. Ponla encima de la foto: cambia la Column que contiene ambas por una Stack, con la insignia dibujada delante.

Pruébalo tú mismo

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