Spacer đẩy các phần tử ra xa nhau

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

Thanh trên cùng thường có logo ở bên trái và các liên kết ở bên phải. Spacer làm việc đó: đây là một widget trống chiếm toàn bộ khoảng trống còn lại trong hàng, đồng thời đẩy mọi thứ phía sau nó sang đầu bên kia.

Row(
  children: [
    const Text('Logo'),
    const Spacer(),
    const Text('Cart'),
  ],
)

Spacer nằm chính xác ở vị trí bạn muốn tạo khoảng trống. Các widget phía trước nó vẫn ở bên trái, các widget phía sau nó chuyển sang bên phải, còn khoảng cách giữa những widget liền kề ở cùng một bên vẫn giữ nguyên như bạn đã đặt.

mainAxisAlignment: MainAxisAlignment.spaceBetween thay vào đó sẽ dàn đều khoảng cách giữa mọi phần tử con. Hãy dùng Spacer khi chỉ muốn một khoảng trống giãn ra.

Thử thách

Dễ

Giữ Coddy ở bên trái và đẩy Help cùng Log in sát mép phải, vẫn cách nhau 16 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(
        body: Padding(
          padding: const EdgeInsets.fromLTRB(16, 48, 16, 16),
          child: Column(
            children: [
              Row(
                children: [
                  const Text(
                    'Coddy',
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),
                  const Text('Help'),
                  const SizedBox(width: 16),
                  const Text('Log in'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}