Expanded lấp đầy hà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 1 trên 30.

Row cấp cho mỗi phần tử con chiều rộng mà nó yêu cầu. Hộp không có chiều rộng chỉ rộng bằng phần văn bản bên trong, vì vậy phần còn lại của hàng sẽ trống.

Bọc một phần tử con trong Expanded, phần tử đó sẽ chiếm toàn bộ không gian còn lại sau khi các phần tử con khác sử dụng:

Row(
  children: [
    Container(width: 100, color: Colors.red),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

Trên điện thoại rộng 390 pixel, hộp màu đỏ vẫn rộng 100 pixel và hộp màu xanh chiếm 290 pixel còn lại. Trên màn hình rộng hơn, hộp màu xanh sẽ rộng hơn, còn hộp màu đỏ vẫn rộng 100 pixel.

Expanded cũng hoạt động trong Column, nơi nó lấp đầy phần chiều cao còn lại.

Thử thách

Dễ

Thanh tìm kiếm quá ngắn. Hãy để hộp Search chiếm phần còn lại của hàng, rộng 310 pixel bên cạnh hộp Menu rộng 80 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('Shop')),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                  width: 80,
                  height: 56,
                  color: Colors.indigo,
                  child: const Center(
                    child: Text('Menu', style: TextStyle(color: Colors.white)),
                  ),
                ),
                Container(
                  height: 56,
                  color: Colors.indigo.shade100,
                  child: const Center(child: Text('Search')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}