Đặt ở một góc

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 11 trên 30.

Các phần tử con của Stack bắt đầu ở góc trên bên trái. Để đặt một phần tử ở vị trí khác, hãy bọc nó trong Positioned và chỉ định khoảng cách từ các cạnh:

Stack(
  children: [
    Container(height: 200, color: Colors.grey),
    const Positioned(
      bottom: 8,
      left: 8,
      child: Text('Bottom left'),
    ),
  ],
)

top:, bottom:, left: và right: là khoảng cách tính bằng pixel từ cạnh tương ứng của Stack. Chọn một cạnh cho mỗi hướng: top hoặc bottom, và left hoặc right.

Phần tử con Positioned không làm thay đổi kích thước của Stack. Ảnh vẫn quyết định kích thước của nó.

Thử thách

Dễ

Di chuyển nhãn SALE đến góc trên bên phải của ảnh, cách mép trên 12 pixel và cách mép phải 12 pixel.

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