Espaciado dentro de un ajuste

Parte de la sección Diseños que se adaptan del Journey de Flutter de Coddy. Lección 9 de 30.

Ahora las etiquetas caben, pero se tocan. Un Wrap tiene dos ajustes para el espacio entre sus elementos secundarios:

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

spacing: es el espacio entre dos elementos secundarios de la misma línea. runSpacing: es el espacio entre una línea y la siguiente. Cada línea de un Wrap se llama run, de ahí el nombre.

Los espacios se tienen en cuenta cuando Wrap decide qué cabe en una línea, así que un valor mayor de spacing puede hacer que un elemento secundario pase a la línea siguiente.

Desafío

Fácil

Deja espacio para las etiquetas:

8 píxeles entre las etiquetas de la misma línea
12 píxeles entre las líneas

Pruébalo tú mismo

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