Overflow beheben: Erweitern

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

Ein Text in einer Row möchte in einer einzigen langen Zeile stehen. Wenn die Zeile länger als die Zeile ist, läuft die Zeile rechts über, obwohl der Text hätte umgebrochen werden können.

Der Text wird nicht umgebrochen, weil die Zeile jedem Kind erlaubt, so breit zu sein, wie es möchte. Wickle den Text in Expanded ein, und er erhält eine Breite: genau den Platz, den die anderen Kinder übrig lassen. Ein Text mit einer festgelegten Breite wird auf mehrere Zeilen umgebrochen.

Row(
  children: [
    const Icon(Icons.info),
    const Expanded(
      child: Text('A long sentence that now wraps instead of spilling out.'),
    ),
  ],
)

Das ist die erste Lösung für einen Überlauf auf der rechten Seite: Gib dem Kind, das schrumpfen soll, ein Expanded. Ein Widget einzuwickeln, das bereits klein ist, wie etwa ein Symbol, ändert nichts am langen Text.

Aufgabe

Einfach

Die Lieferadresse ragt über den rechten Rand hinaus. Sorge dafür, dass sie sich auf mehrere Zeilen umbricht und der Pfeil am rechten Rand der Zeile bleibt.

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) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Delivery')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Row(
                children: [
                  const Icon(Icons.location_on, color: Colors.red),
                  const SizedBox(width: 8),
                  const Text(
                    '221B Baker Street, Marylebone, London NW1 6XE, United Kingdom',
                  ),
                  const Icon(Icons.chevron_right),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}