L’errore di overflow

Fa parte della sezione Layout adattabili del percorso Flutter di Coddy. Lezione 5 di 30.

Lo schermo di un telefono è piccolo. Quando i figli di un Row hanno bisogno di più larghezza di quella disponibile sullo schermo, Flutter disegna strisce gialle e nere sul bordo da cui fuoriescono e stampa un messaggio nella Console:

A RenderFlex overflowed by 60 pixels on the right.

Leggilo in tre parti. RenderFlex è un Row o una Column. 60 pixels indica di quanto i figli sono troppo grandi. On the right significa che una riga è troppo larga; on the bottom significa che una colonna è troppo alta.

Il numero è una semplice operazione aritmetica. Tre riquadri larghi 150 pixel richiedono 450 pixel; il telefono ne ha 390, quindi 60 pixel fuoriescono. Riduci complessivamente di 60 pixel la larghezza dei figli e le strisce scompariranno.

Ogni verifica di questo corso viene eseguita su un telefono largo 390 pixel, quindi un overflow fa fallire la verifica con lo stesso messaggio.

Sfida

Facile

Premi Esegui e individua le strisce sul bordo destro. Poi imposta la larghezza di ogni riquadro a 120 pixel, così entrano tutti e tre sul telefono.

Provalo tu

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