Abstände innerhalb eines Umbruchs

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 9 von 30.

Die Tags passen jetzt, aber sie berühren sich. Ein Wrap hat zwei Einstellungen für den Abstand zwischen seinen untergeordneten Elementen:

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

spacing: ist der Abstand zwischen zwei untergeordneten Elementen in derselben Zeile. runSpacing: ist der Abstand zwischen einer Zeile und der nächsten. Jede Zeile eines Wrap wird run genannt – daher stammt der Name.

Die Abstände werden berücksichtigt, wenn der Wrap entscheidet, was in eine Zeile passt. Ein größeres spacing kann also dazu führen, dass ein untergeordnetes Element in die nächste Zeile rutscht.

Aufgabe

Einfach

Gib den Tags genügend Platz:

8 Pixel zwischen Tags in derselben Zeile
12 Pixel zwischen den Zeilen

Probier es selbst

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