خطأ تجاوز السعة

جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 5 من 30.

شاشة الهاتف صغيرة. عندما تحتاج عناصر Row إلى عرض أكبر من عرض الشاشة، يرسم Flutter خطوطًا صفراء وسوداء عند الحافة التي تتجاوزها، ويطبع رسالة في وحدة التحكم:

A RenderFlex overflowed by 60 pixels on the right.

اقرأ الرسالة على ثلاثة أجزاء. يشير RenderFlex إلى Row أو Column. ويشير 60 pixels إلى مقدار الزيادة في حجم العناصر. وتعني On the right أن الصف أعرض من اللازم؛ أما on the bottom فتعني أن العمود أطول من اللازم.

العدد هو نتيجة حسابية بسيطة. تحتاج ثلاثة مربعات عرض كل منها 150 بكسل إلى 450 بكسل، بينما عرض الهاتف 390 بكسل، لذا يتجاوز المحتوى الحد بمقدار 60 بكسل. اجعل العناصر أصغر بمقدار 60 بكسل إجمالًا، وستختفي الخطوط.

يُجرى كل اختبار في هذه الدورة على هاتف عرضه 390 بكسل، لذا يؤدي التجاوز إلى فشل الاختبار مع الرسالة نفسها.

التحدي

سهل

اضغط على تشغيل وابحث عن الأشرطة عند الحافة اليمنى. ثم اجعل عرض كل بلاطة 120 بكسلًا، حتى تتسع البلاطات الثلاث كلها على الهاتف.

جرّب بنفسك

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