Jarak di Dalam Pembungkus

Termasuk bagian Layout yang Menyesuaikan dalam perjalanan Flutter di Coddy. Pelajaran 9 dari 30.

Tag-tagnya sekarang muat, tetapi saling menempel. Wrap memiliki dua pengaturan untuk jarak di antara anak-anaknya:

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

spacing: adalah jarak antara dua anak pada baris yang sama. runSpacing: adalah jarak antara satu baris dan baris berikutnya. Setiap baris pada Wrap disebut run, dari sinilah nama tersebut berasal.

Jarak diperhitungkan saat Wrap menentukan apa saja yang muat pada satu baris, jadi spacing yang lebih besar dapat memindahkan anak ke baris berikutnya.

Tantangan

Mudah

Beri ruang untuk tag:

8 piksel di antara tag pada baris yang sama
12 piksel di antara baris

Coba sendiri

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)),
                ),
            ],
          ),
        ),
      ),
    );
  }
}