Widgets übereinander stapeln

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

Eine Column ordnet ihre untergeordneten Elemente untereinander an, eine Row nebeneinander. Ein Stack legt sie übereinander, wie Papierblätter auf einem Schreibtisch:

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

Das erste untergeordnete Element wird zuerst und ganz unten gezeichnet. Jedes folgende Element wird über die vorherigen gezeichnet. Das Foto kommt also zuerst und das darauf platzierte Beschriftung zuletzt.

Die untergeordneten Elemente beginnen in der oberen linken Ecke des Stack, und der Stack ist so groß wie sein größtes untergeordnetes Element. So sitzt ein Abzeichen, eine Beschriftung oder eine Wiedergabeschaltfläche auf einem Bild.

Aufgabe

Einfach

Das SALE-Abzeichen befindet sich unter dem Foto. Platziere es auf dem Foto: Ändere die Column, die beide Elemente enthält, in eine Stack, sodass das Abzeichen davor gezeichnet wird.

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