Flexible נצמד לילד שלו

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

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

Flexible מעניק לילד לכל היותר את אותו השטח לכל היותר, ומאפשר לו להישאר קטן יותר:

Row(
  children: [
    const CircleAvatar(child: Text('A')),
    Flexible(
      child: Container(
        color: Colors.grey.shade300,
        child: const Text('Hello'),
      ),
    ),
  ],
)

הודעה קצרה מקבלת בועה קטנה. הודעה ארוכה גדלה עד שהיא מגיעה לקצה השורה, ואז עוברת לשורות נוספות, כי Flexible אף פעם לא מאפשר לה לתפוס יותר מהשטח שנותר.

השתמשו ב־Expanded כשהילד אמור למלא את השטח, וב־Flexible כשהוא יכול למלא אותו.

אתגר

קל

בועת Hi! נמתחת על פני כל המסך. יש לגרום לכל בועה להיות רחבה רק כמו ההודעה שלה, תוך שההודעה הארוכה עדיין נשברת לשורות בתוך המסך.

נסו בעצמכם

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('Chat')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Row(
                children: [
                  const CircleAvatar(child: Text('S')),
                  const SizedBox(width: 8),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(
                        color: Colors.grey.shade300,
                        borderRadius: BorderRadius.circular(16),
                      ),
                      child: const Text('Hi!'),
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 12),
              Row(
                children: [
                  const CircleAvatar(child: Text('S')),
                  const SizedBox(width: 8),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(
                        color: Colors.grey.shade300,
                        borderRadius: BorderRadius.circular(16),
                      ),
                      child: const Text(
                        'Are you coming to the park later? We meet at the big tree by the lake.',
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}