Tumpuk Widget di Atas

Termasuk bagian Layout yang Menyesuaikan dalam perjalanan Flutter di Coddy. Pelajaran 10 dari 30.

Column menempatkan elemen anaknya satu di bawah yang lain, sedangkan Row menempatkannya berdampingan. Stack menempatkan elemen anaknya bertumpuk, seperti lembaran kertas di atas meja:

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

Elemen anak pertama digambar lebih dulu, di bagian bawah. Setiap elemen anak setelahnya digambar di atas elemen sebelumnya. Jadi, foto digambar lebih dulu, lalu label yang berada di atasnya digambar terakhir.

Elemen anak dimulai dari sudut kiri atas Stack, dan ukuran Stack sama dengan elemen anak terbesarnya. Dengan cara ini, lencana, label, atau tombol putar bisa ditempatkan di atas gambar.

Tantangan

Mudah

Lencana SALE berada di bawah foto. Letakkan lencana di atas foto: ubah Column yang menampung keduanya menjadi Stack, dengan lencana digambar di depan.

Coba sendiri

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