Lỗi 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 5 trên 30.

Màn hình điện thoại nhỏ. Khi các phần tử con của Row cần chiều rộng lớn hơn chiều rộng màn hình, Flutter vẽ các sọc vàng đen ở mép nơi chúng tràn ra ngoài và in thông báo trong Console:

A RenderFlex overflowed by 60 pixels on the right.

Hãy đọc thông báo này thành ba phần. RenderFlex là một Row hoặc Column. 60 pixels là phần chiều rộng các phần tử con vượt quá. On the right nghĩa là hàng quá rộng; on the bottom nghĩa là cột quá cao.

Con số này chỉ là phép tính đơn giản. Ba hộp rộng 150 pixels cần 450 pixels, trong khi điện thoại có chiều rộng 390 pixels, nên 60 pixels bị tràn ra ngoài. Giảm tổng chiều rộng của các phần tử con đi 60 pixels, các sọc sẽ biến mất.

Mọi lượt kiểm tra trong khóa học này đều chạy trên điện thoại rộng 390 pixels, nên phần tràn sẽ khiến lượt kiểm tra thất bại với cùng thông báo.

Thử thách

Dễ

Nhấn Chạy và tìm các sọc ở mép bên phải. Sau đó đặt chiều rộng mỗi ô là 120 pixel để cả ba ô vừa với màn hình điện thoại.

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('Trips')),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.orange,
                  child: const Center(child: Text('Beach')),
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.green,
                  child: const Center(child: Text('Forest')),
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.blueGrey,
                  child: const Center(child: Text('City')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}