Sửa lỗi tràn: Xuống dòng

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

Một số hàng chứa các mục cần xếp nối tiếp như từ trong câu: thẻ, bộ lọc, thẻ nhỏ. Khi có quá nhiều mục cho một dòng, Row sẽ tràn ra bên phải.

Wrap nhận cùng danh sách children:, và khi phần tử tiếp theo không vừa trên dòng, nó sẽ bắt đầu một dòng mới bên dưới:

Wrap(
  children: [
    for (final tag in tags) Text(tag),
  ],
)

Đó là cách khắc phục thứ ba cho lỗi tràn. Dùng Expanded khi một phần tử cần thu nhỏ, dùng chế độ xem cuộn khi trang dài hơn màn hình, và dùng Wrap khi các phần tử cần chuyển xuống dòng tiếp theo.

Wrap giữ mỗi phần tử ở kích thước mà nó yêu cầu. Nó không bao giờ ép chúng nhỏ lại, mà chỉ chuyển chúng xuống dòng dưới.

Thử thách

Dễ

Các thẻ tràn sang bên phải. Hãy để chúng tự xuống dòng khi cần, giống như các từ trong một đoạn văn.

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) {
    final tags = ['Dart', 'Flutter', 'Mobile', 'Design', 'Games', 'Web'];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Interests')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Row(
            children: [
              for (final tag in tags)
                Container(
                  width: 110,
                  height: 40,
                  decoration: BoxDecoration(
                    color: Colors.purple.shade100,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Center(child: Text(tag)),
                ),
            ],
          ),
        ),
      ),
    );
  }
}