Układanie widżetów jeden na drugim

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 10 z 30.

Column układa swoje elementy podrzędne jeden pod drugim, a Row obok siebie. Stack układa je jeden na drugim, jak kartki papieru na biurku:

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

Pierwszy element podrzędny jest rysowany jako pierwszy, na dole. Każdy kolejny element jest rysowany na tych wcześniejszych. Dlatego zdjęcie jest rysowane jako pierwsze, a etykieta, która się na nim znajduje, jako ostatnia.

Elementy podrzędne zaczynają się w lewym górnym rogu Stack, a Stack ma rozmiar swojego największego elementu podrzędnego. Właśnie tak plakietka, etykieta lub przycisk odtwarzania może znaleźć się na obrazku.

Wyzwanie

Łatwy

Odznaka SALE znajduje się pod zdjęciem. Umieść ją na zdjęciu: zamień Column, który zawiera oba elementy, na Stack, aby odznaka była wyświetlana na wierzchu.

Spróbuj swoich sił

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