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

Column có nhiều phần tử con hơn sức chứa của màn hình sẽ tràn xuống phía dưới. Điện thoại có chiều cao giới hạn, còn Column thì không tự cuộn.

Bọc nó trong một SingleChildScrollView. Khi đó, cột có thể cao tùy nhu cầu, và bạn kéo màn hình để xem phần còn lại:

SingleChildScrollView(
  child: Column(
    children: [
      // Thêm bao nhiêu children tùy thích
    ],
  ),
)

Đây là cách khắc phục cho trang dài hơn màn hình: trang cài đặt, biểu mẫu, bài viết. Với danh sách dài gồm các phần tử cùng loại, ListView mà bạn đã biết cũng làm được việc tương tự.

Khung cuộn bao quanh toàn bộ cột. Bọc mỗi phần tử con trong một khung cuộn riêng thì cột vẫn dài như trước.

Thử thách

Dễ

Nội dung tuần bị tràn xuống dưới. Hãy cho phép cuộn trang để bạn có thể đến Sunday.

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 days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('This Week')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              for (final day in days)
                Container(
                  height: 120,
                  margin: const EdgeInsets.only(bottom: 12),
                  decoration: BoxDecoration(
                    color: Colors.lightBlue.shade100,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Center(child: Text(day, style: const TextStyle(fontSize: 20))),
                ),
            ],
          ),
        ),
      ),
    );
  }
}