Widget'ları Üst Üste Yerleştirme

Coddy'nin Flutter Journey'sinin Her Ekrana Uyan Düzenler bölümünün bir parçası. Ders 10 / 30.

Bir Column çocuklarını alt alta, bir Row ise yan yana dizer. Bir Stack ise onları, masanın üzerindeki kâğıtlar gibi üst üste yerleştirir:

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

İlk çocuk önce, en altta çizilir. Ondan sonraki her çocuk, öncekilerin üzerine çizilir. Bu yüzden önce fotoğraf, en son da üzerine yerleştirilen etiket gelir.

Çocuklar Stack'in sol üst köşesinden başlar ve Stack en büyük çocuğu kadar büyüktür. Bir rozetin, etiketin veya oynat düğmesinin resmin üzerine yerleşmesi bu şekilde olur.

Görev

Kolay

SALE rozeti fotoğrafın altında duruyor. Onu fotoğrafın üzerine yerleştir: ikisini içeren Column'u bir Stack'e dönüştür ve rozeti önde göster.

Kendin dene

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