In einer Ecke positionieren

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 11 von 30.

Die Kinder eines Stack beginnen an dessen oberer linker Ecke. Um eines an einer anderen Stelle zu platzieren, umgib es mit Positioned und gib an, wie weit es von den Rändern entfernt ist:

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

top:, bottom:, left: und right: sind Abstände in Pixeln von der jeweiligen Kante des Stack. Gib für jede Richtung eine Seite an: top oder bottom sowie left oder right.

Ein Positioned-Kind verändert die Größe des Stack nicht. Das Foto bestimmt weiterhin, wie groß er ist.

Aufgabe

Einfach

Verschiebe das SALE-Abzeichen in die obere rechte Ecke des Fotos, 12 Pixel vom oberen Rand und 12 Pixel vom rechten Rand entfernt.

Probier es selbst

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