Solución al desbordamiento: ajustar

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

Algunas filas contienen elementos que deberían fluir como palabras en una oración: etiquetas, filtros, chips. Cuando hay demasiados para una sola línea, un Row se desborda por la derecha.

Wrap toma la misma lista de children: y, cuando el siguiente elemento no cabe en la línea, comienza una nueva línea debajo:

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

Esta es la tercera solución para un desbordamiento. Usa Expanded cuando un elemento deba reducirse, una vista de desplazamiento cuando la página sea más larga que la pantalla y Wrap cuando los elementos deban pasar a la siguiente línea.

Un Wrap mantiene cada elemento en el tamaño que solicita. Nunca los comprime; solo los mueve hacia abajo.

Desafío

Fácil

Las etiquetas se desbordan por la derecha. Haz que se distribuyan en tantas líneas como necesiten, como las palabras de un párrafo.

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