שגיאת גלישה

חלק מהיחידה פריסות שמתאימות למסך במסלול ה-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 פיקסלים, ולכן גלישה תגרום לבדיקה להיכשל עם אותה הודעה.

אתגר

קל

לחץ על Run ומצא את הפסים בקצה הימני. לאחר מכן קבע את הרוחב של כל אריח ל־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')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}