Espacement à l’intérieur d’un renvoi à la ligne

Fait partie de la section Des mises en page adaptées du Journey Flutter de Coddy. Leçon 9 sur 30.

Les balises tiennent maintenant, mais elles se touchent. Un Wrap possède deux réglages pour l’espace entre ses enfants :

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

spacing: correspond à l’espace entre deux enfants sur la même ligne. runSpacing: correspond à l’espace entre une ligne et la suivante. Chaque ligne d’un Wrap est appelée un run, d’où son nom.

Les espaces sont pris en compte lorsque le Wrap détermine ce qui tient sur une ligne. Ainsi, une valeur plus élevée pour spacing peut faire passer un enfant à la ligne suivante.

Défi

Facile

Laisse de l’espace entre les étiquettes :

8 pixels entre les étiquettes sur la même ligne
12 pixels entre les lignes

Essayez vous-même

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