תיקון גלישה: הרחבה

חלק מהיחידה פריסות שמתאימות למסך במסלול ה-Flutter של Coddy. שיעור 6 מתוך 30.

רכיב Text בתוך Row רוצה להיות שורה ארוכה אחת. כשהשורה ארוכה יותר מהשורה, התוכן גולש ימינה, אף על פי שאפשר היה לשבור את הטקסט לשורות.

הטקסט לא נשבר לשורות כי השורה מאפשרת לכל ילד להיות רחב כרצונו. עטפו את הטקסט ב־Expanded, והוא יקבל רוחב: בדיוק השטח שהילדים האחרים משאירים. טקסט עם רוחב נתון נשבר ליותר שורות.

Row(
  children: [
    const Icon(Icons.info),
    const Expanded(
      child: Text('A long sentence that now wraps instead of spilling out.'),
    ),
  ],
)

זהו הפתרון הראשון לגלישה ימינה: העניקו לילד שאמור להתכווץ רכיב Expanded. עטיפת רכיב שכבר קטן, כמו סמל, לא משנה דבר עבור הטקסט הארוך.

אתגר

קל

כתובת המשלוח גולשת מעבר לקצה הימני. גרמו לה להתפרס על פני שורות נוספות, כשהחץ נשאר בקצה הימני של השורה.

נסו בעצמכם

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('Delivery')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Row(
                children: [
                  const Icon(Icons.location_on, color: Colors.red),
                  const SizedBox(width: 8),
                  const Text(
                    '221B Baker Street, Marylebone, London NW1 6XE, United Kingdom',
                  ),
                  const Icon(Icons.chevron_right),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}