Error Luapan

Termasuk bagian Layout yang Menyesuaikan dalam perjalanan Flutter di Coddy. Pelajaran 5 dari 30.

Layar ponsel berukuran kecil. Saat anak-anak dari Row membutuhkan lebar yang melebihi lebar layar, Flutter menggambar garis-garis kuning dan hitam di tepi tempat isinya melampaui layar, lalu mencetak pesan di Console:

A RenderFlex overflowed by 60 pixels on the right.

Baca pesan itu dalam tiga bagian. RenderFlex adalah Row atau Column. 60 pixels menunjukkan seberapa besar ukuran anak-anaknya yang berlebih. On the right berarti row terlalu lebar, sedangkan on the bottom berarti column terlalu tinggi.

Angkanya didapat dari perhitungan sederhana. Tiga kotak dengan lebar 150 pixels membutuhkan 450 pixels, sedangkan lebar ponsel 390 pixels, jadi ada 60 pixels yang melampaui layar. Kurangi lebar anak-anaknya sebanyak 60 pixels secara keseluruhan agar garis-garis itu hilang.

Setiap pemeriksaan dalam kursus ini berjalan di ponsel dengan lebar 390 pixels, jadi overflow akan membuat pemeriksaan gagal dengan pesan yang sama.

Tantangan

Mudah

Tekan Jalankan dan temukan garis-garis di tepi kanan. Lalu buat lebar setiap ubin menjadi 120 piksel agar ketiganya muat di ponsel.

Coba sendiri

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