Spaziatura all’interno di un contenitore a capo

Fa parte della sezione Layout adattabili del percorso Flutter di Coddy. Lezione 9 di 30.

Ora i tag ci stanno, ma si toccano. Un Wrap ha due impostazioni per lo spazio tra i suoi figli:

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

spacing: è lo spazio tra due figli sulla stessa riga. runSpacing: è lo spazio tra una riga e la successiva. Ogni riga di un Wrap è chiamata run, da cui deriva il nome.

Gli spazi vengono considerati quando Wrap decide cosa entra in una riga, quindi un valore maggiore di spacing può spostare un figlio alla riga successiva.

Sfida

Facile

Lascia spazio ai tag:

8 pixel tra i tag sulla stessa riga
12 pixel tra le righe

Provalo tu

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