Flexible ôm sát phần tử con

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

Expanded khiến phần tử con lấp đầy khoảng trống còn lại, ngay cả khi phần tử đó cần ít không gian hơn. Bong bóng chat được bọc trong Expanded sẽ trải dài hết hàng, kể cả khi tin nhắn chỉ có một từ.

Flexible cung cấp cho phần tử con tối đa lượng không gian tương tự, đồng thời cho phép phần tử đó giữ kích thước nhỏ hơn:

Row(
  children: [
    const CircleAvatar(child: Text('A')),
    Flexible(
      child: Container(
        color: Colors.grey.shade300,
        child: const Text('Hello'),
      ),
    ),
  ],
)

Tin nhắn ngắn sẽ có bong bóng nhỏ. Tin nhắn dài sẽ lớn dần cho đến khi chạm mép hàng, rồi xuống thêm dòng, vì Flexible không bao giờ cho phép phần tử đó chiếm nhiều hơn khoảng trống còn lại.

Dùng Expanded khi phần tử con cần lấp đầy khoảng trống, và dùng Flexible khi phần tử đó có thể lấp đầy khoảng trống.

Thử thách

Dễ

Bong bóng Hi! trải rộng khắp màn hình. Hãy chỉnh mỗi bong bóng chỉ rộng bằng phần tin nhắn của nó, đồng thời để tin nhắn dài vẫn xuống dòng trong phạm vi màn hình.

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('Chat')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Row(
                children: [
                  const CircleAvatar(child: Text('S')),
                  const SizedBox(width: 8),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(
                        color: Colors.grey.shade300,
                        borderRadius: BorderRadius.circular(16),
                      ),
                      child: const Text('Hi!'),
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 12),
              Row(
                children: [
                  const CircleAvatar(child: Text('S')),
                  const SizedBox(width: 8),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(
                        color: Colors.grey.shade300,
                        borderRadius: BorderRadius.circular(16),
                      ),
                      child: const Text(
                        'Are you coming to the park later? We meet at the big tree by the lake.',
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}