Błąd przepełnienia

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 5 z 30.

Ekran telefonu jest mały. Gdy elementy podrzędne Row potrzebują więcej miejsca na szerokość, niż ma ekran, Flutter rysuje żółto-czarne paski na krawędzi, poza którą wystają, i wyświetla komunikat w konsoli:

A RenderFlex overflowed by 60 pixels on the right.

Przeczytaj go w trzech częściach. RenderFlex to Row lub Column. 60 pikseli oznacza, o ile za duże są elementy podrzędne. Po prawej oznacza, że wiersz jest za szeroki; na dole oznacza, że kolumna jest za wysoka.

To zwykłe obliczenie. Trzy pudełka o szerokości 150 pikseli potrzebują 450 pikseli, telefon ma 390, więc 60 pikseli wystaje poza ekran. Zmniejsz łączną szerokość elementów podrzędnych o 60 pikseli, a paski znikną.

Każdy test w tym kursie działa na telefonie o szerokości 390 pikseli, więc przepełnienie powoduje niezaliczenie testu i wyświetlenie tego samego komunikatu.

Wyzwanie

Łatwy

Naciśnij Run i znajdź paski przy prawej krawędzi. Następnie ustaw szerokość każdego kafelka na 120 pikseli, aby wszystkie trzy zmieściły się na telefonie.

Spróbuj swoich sił

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