Căn chỉnh bên trong hộp

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

Center đặt phần tử con vào giữa không gian mà nó có. Align làm tương tự ở bất kỳ vị trí nào bạn chọn:

Container(
  height: 200,
  color: Colors.teal,
  child: const Align(
    alignment: Alignment.topRight,
    child: Text('Top right'),
  ),
)

Các vị trí được đặt tên theo các góc và cạnh: Alignment.topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter và bottomRight. Center tương đương với Align dùng Alignment.center.

Stack cũng nhận alignment:, thuộc tính này đặt mọi phần tử con không phải Positioned: Stack(alignment: Alignment.bottomCenter, children: [...]).

Thử thách

Dễ

Di chuyển chú thích Mountains từ giữa bìa đến góc dưới bên trái. Phần đệm giữ chú thích cách mỗi cạnh 16 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('Travel')),
        body: Column(
          children: [
            Container(
              height: 240,
              color: Colors.indigo,
              child: const Center(
                child: Padding(
                  padding: EdgeInsets.all(16),
                  child: Text(
                    'Mountains',
                    style: TextStyle(fontSize: 28, color: Colors.white),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}