Xếp chồng widget lên trên

Thuộc phần Bố cục phù hợp với mọi màn hình trong hành trình Flutter của Coddy. Bài học 10 trên 30.

Column xếp các phần tử con lần lượt theo chiều dọc, còn Row xếp chúng cạnh nhau. Stack xếp chúng chồng lên nhau, như những tờ giấy trên bàn:

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

Phần tử con đầu tiên được vẽ trước, ở dưới cùng. Mỗi phần tử con sau đó được vẽ đè lên các phần tử trước. Vì vậy, ảnh được đặt trước, còn nhãn nằm trên ảnh được đặt sau cùng.

Các phần tử con bắt đầu ở góc trên bên trái của Stack, và Stack có kích thước bằng phần tử con lớn nhất. Đó là cách huy hiệu, nhãn hoặc nút phát nằm trên ảnh.

Thử thách

Dễ

Huy hiệu SALE nằm bên dưới ảnh. Đặt nó lên trên ảnh: đổi Column chứa cả hai thành Stack, để huy hiệu nằm phía trước.

Tự làm thử

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