Overflow beheben: Umbruch

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

Einige Zeilen enthalten Elemente, die wie Wörter in einem Satz fließen sollen: Tags, Filter, Chips. Wenn es zu viele für eine Zeile gibt, läuft ein Row nach rechts über.

Wrap nimmt dieselbe Liste von children: entgegen und beginnt eine neue Zeile darunter, wenn das nächste untergeordnete Element nicht mehr in die Zeile passt:

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

Das ist die dritte Lösung für einen Überlauf. Verwende Expanded, wenn ein untergeordnetes Element schrumpfen soll, eine Scrollansicht, wenn die Seite länger als der Bildschirm ist, und Wrap, wenn die untergeordneten Elemente in die nächste Zeile wechseln sollen.

Ein Wrap behält für jedes untergeordnete Element die Größe bei, die es anfordert. Es quetscht sie nie zusammen, sondern verschiebt sie nur nach unten.

Aufgabe

Einfach

Die Tags laufen rechts über. Lass sie auf so viele Zeilen umbrechen, wie nötig, wie Wörter in einem Absatz.

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