Khoảng cách bên trong phần xuống dò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 9 trên 30.

Các thẻ vừa khít rồi, nhưng chúng chạm vào nhau. Wrap có hai thiết lập để điều chỉnh khoảng cách giữa các phần tử con:

Wrap(
  spacing: 8,
  runSpacing: 12,
  children: [...],
)

spacing: là khoảng cách giữa hai phần tử con trên cùng một dòng. runSpacing: là khoảng cách giữa dòng này và dòng tiếp theo. Mỗi dòng của Wrap được gọi là một lượt, đây là nguồn gốc của tên thuộc tính này.

Các khoảng cách được tính khi Wrap quyết định những phần tử nào vừa trên một dòng, vì vậy giá trị spacing lớn hơn có thể đẩy một phần tử con xuống dòng tiếp theo.

Thử thách

Dễ

Tạo khoảng trống cho các thẻ:

8 pixel giữa các thẻ trên cùng một dòng
12 pixel giữa các dòng

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) {
    final tags = ['Dart', 'Flutter', 'Mobile', 'Design', 'Games', 'Web'];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Interests')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Wrap(
            children: [
              for (final tag in tags)
                Container(
                  width: 110,
                  height: 40,
                  decoration: BoxDecoration(
                    color: Colors.purple.shade100,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Center(child: Text(tag)),
                ),
            ],
          ),
        ),
      ),
    );
  }
}