Posicionado en una esquina

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

Los elementos secundarios de un Stack empiezan en su esquina superior izquierda. Para colocar uno en otro lugar, envuélvelo en Positioned e indica a qué distancia está de los bordes:

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

top:, bottom:, left: y right: son distancias en píxeles desde ese borde del Stack. Indica un lado para cada dirección: top o bottom, y left o right.

Un elemento secundario Positioned no cambia el tamaño del Stack. La foto sigue determinando su tamaño.

Desafío

Fácil

Mueve la insignia SALE a la esquina superior derecha de la foto, a 12 píxeles desde arriba y a 12 desde la derecha.

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