Sửa lỗi tràn: Mở rộ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 6 trên 30.

Một Text trong Row muốn nằm trên một dòng dài. Khi dòng dài hơn hàng, nội dung tràn sang bên phải, dù văn bản có thể xuống dòng.

Văn bản không xuống dòng vì hàng cho phép mỗi phần tử con rộng tùy ý. Bọc văn bản trong Expanded, văn bản sẽ có chiều rộng đúng bằng khoảng trống mà các phần tử con khác để lại. Văn bản có chiều rộng xác định sẽ xuống nhiều dòng hơn.

Row(
  children: [
    const Icon(Icons.info),
    const Expanded(
      child: Text('A long sentence that now wraps instead of spilling out.'),
    ),
  ],
)

Đây là cách khắc phục đầu tiên khi nội dung tràn sang bên phải: thêm Expanded cho phần tử con cần thu nhỏ. Bọc một widget vốn đã nhỏ, như biểu tượng, sẽ không làm thay đổi gì đối với văn bản dài.

Thử thách

Dễ

Địa chỉ giao hàng tràn ra khỏi mép phải. Hãy để địa chỉ xuống dòng nhiều hơn, đồng thời giữ mũi tên ở mép phải của hàng.

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('Delivery')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Row(
                children: [
                  const Icon(Icons.location_on, color: Colors.red),
                  const SizedBox(width: 8),
                  const Text(
                    '221B Baker Street, Marylebone, London NW1 6XE, United Kingdom',
                  ),
                  const Icon(Icons.chevron_right),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}