Khoảng cách giữa các tiện ích

Thuộc phần Ứng dụng đầu tiên trong hành trình Flutter của Coddy. Bài học 21 trên 32.

Các phần tử con trong Column chạm vào nhau. Để tạo khoảng cách giữa hai phần tử, hãy thêm một SizedBox rỗng vào danh sách:

Column(
  children: [
    Text('Top'),
    SizedBox(height: 20),
    Text('Bottom'),
  ],
)

SizedBox không vẽ gì cả. Nó chỉ chiếm không gian: ở đây là chiều cao 20 pixel. Trong Row, hãy dùng SizedBox(width: 20) thay vào đó.

Thử thách

Dễ

Đặt khoảng cách 24 pixel giữa Title và Subtitle.

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: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Title', style: TextStyle(fontSize: 32)),
              Text('Subtitle'),
            ],
          ),
        ),
      ),
    );
  }
}