Memperbaiki Luapan: Membungkus

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

Beberapa baris berisi item yang seharusnya mengalir seperti kata-kata dalam kalimat: tag, filter, chip. Jika terlalu banyak untuk satu baris, Row meluap ke sisi kanan.

Wrap menggunakan daftar children: yang sama, dan ketika child berikutnya tidak muat di baris, Wrap memulai baris baru di bawahnya:

Wrap(
  children: [
    for (final tag in tags) Text(tag),
  ],
)

Itulah perbaikan ketiga untuk luapan. Gunakan Expanded ketika satu child harus menyusut, scroll view ketika halaman lebih panjang daripada layar, dan Wrap ketika child harus berpindah ke baris berikutnya.

Wrap mempertahankan ukuran yang diminta setiap child. Wrap tidak pernah memampatkan child, hanya memindahkannya ke bawah.

Tantangan

Mudah

Tag-tag meluber ke kanan. Buat tag-tag tersebut mengalir ke baris sebanyak yang diperlukan, seperti kata-kata dalam paragraf.

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