Taşma Hatası

Coddy'nin Flutter Journey'sinin Her Ekrana Uyan Düzenler bölümünün bir parçası. Ders 5 / 30.

Telefon ekranı küçüktür. Bir Row öğesinin çocukları ekranın genişliğinden daha fazla genişliğe ihtiyaç duyduğunda Flutter, taştıkları kenara sarı ve siyah çizgiler çizer ve Konsol'a bir mesaj yazdırır:

A RenderFlex overflowed by 60 pixels on the right.

Mesajı üç bölümde okuyun. RenderFlex, bir Row veya Column'dur. 60 piksel, çocukların ne kadar fazla büyük olduğunu belirtir. Sağda, satırın fazla geniş olduğu; altta ise sütunun fazla uzun olduğu anlamına gelir.

Sayı basit bir aritmetik işlemden gelir. Genişliği 150 piksel olan üç kutu 450 piksel gerektirir; telefonun genişliği 390 piksel olduğundan 60 piksel taşar. Çocukların toplam genişliğini 60 piksel azaltın, çizgiler kaybolur.

Bu kurstaki her kontrol 390 piksel genişliğinde bir telefonda çalışır; bu nedenle taşma olursa kontrol aynı mesajla başarısız olur.

Görev

Kolay

Run düğmesine bas ve sağ kenardaki şeritleri bul. Ardından her bir döşemeyi 120 piksel genişliğinde yap, böylece üçü de telefona sığar.

Kendin dene

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