Der Overflow-Fehler

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

Ein Smartphone-Bildschirm ist klein. Wenn die Kinder eines Row mehr Breite benötigen, als auf dem Bildschirm verfügbar ist, zeichnet Flutter am Rand, an dem sie überlaufen, gelbe und schwarze Streifen und gibt in der Konsole eine Meldung aus:

A RenderFlex overflowed by 60 pixels on the right.

Lies die Meldung in drei Teilen. RenderFlex ist ein Row oder eine Column. 60 pixels gibt an, um wie viel zu groß die Kinder sind. On the right bedeutet, dass eine Zeile zu breit ist; on the bottom bedeutet, dass eine Spalte zu hoch ist.

Die Zahl ergibt sich aus einer einfachen Rechnung. Drei Boxen mit einer Breite von 150 Pixeln benötigen 450 Pixel, das Smartphone hat 390, also laufen 60 Pixel über. Mach die Kinder insgesamt 60 Pixel kleiner, und die Streifen verschwinden.

Jede Prüfung in diesem Kurs läuft auf einem 390 Pixel breiten Smartphone. Ein Überlauf lässt die Prüfung daher mit derselben Meldung fehlschlagen.

Aufgabe

Einfach

Klicke auf Run und suche die Streifen am rechten Rand. Stelle dann jede Kachel auf eine Breite von 120 Pixeln ein, damit alle drei auf das Telefon passen.

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('Trips')),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.orange,
                  child: const Center(child: Text('Beach')),
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.green,
                  child: const Center(child: Text('Forest')),
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.blueGrey,
                  child: const Center(child: Text('City')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}