Chiều rộng tối đa

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

Một thẻ có đoạn văn bản dài sẽ rộng bằng màn hình. Trên điện thoại, thẻ trông vẫn ổn; trên máy tính bảng, cùng thẻ đó kéo dài thành một dòng dài cả nghìn pixel, khiến bạn khó đọc.

ConstrainedBox đặt giới hạn kích thước cho phần tử con. maxWidth: là chiều rộng tối đa mà phần tử có thể đạt tới:

ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 400),
  child: Container(...),
)

Trên màn hình hẹp hơn 400 pixel, thẻ vẫn thu nhỏ để vừa màn hình. Trên màn hình rộng hơn, thẻ dừng ở mức 400 pixel và văn bản xuống thêm nhiều dòng.

BoxConstraints cũng nhận minWidth:, minHeight: và maxHeight:. Giá trị tối thiểu là kích thước nhỏ nhất mà phần tử con có thể có, nên nó không bao giờ ngăn phần tử con lớn thêm.

Thử thách

Dễ

Giữ cho thẻ trích dẫn dễ đọc trên màn hình rộng: cho phép thẻ rộng tối đa 320 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('Quote of the Day')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Center(
            child: Container(
              padding: const EdgeInsets.all(24),
              decoration: BoxDecoration(
                color: Colors.amber.shade100,
                borderRadius: BorderRadius.circular(16),
              ),
              child: const Text(
                'The best way to learn to build apps is to build apps, one small screen at a time.',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    );
  }
}