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