Expanded يملأ الصف

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

يمنح Row كل عنصر ابن العرض الذي يطلبه. لا يتجاوز عرض الصندوق الذي لا يملك عرضًا عرض نصه، لذا تبقى بقية الصف فارغة.

ضع عنصرًا ابنًا داخل Expanded، وسيشغل كل المساحة التي تتركها العناصر الأبناء الأخرى:

Row(
  children: [
    Container(width: 100, color: Colors.red),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

على هاتف عرضه 390 بكسل، يحتفظ الصندوق الأحمر بمساحة 100 بكسل، ويحصل الصندوق الأزرق على الـ290 بكسل المتبقية. على شاشة أعرض، يتمدد الصندوق الأزرق، بينما يبقى الأحمر بعرض 100.

يعمل Expanded أيضًا داخل Column، حيث يملأ الارتفاع المتبقي.

التحدي

سهل

شريط البحث قصير جدًا. اجعل مربع Search يملأ بقية الصف، بحيث يصبح عرضه 310 بكسل بجوار مربع Menu الذي يبلغ عرضه 80 بكسل.

جرّب بنفسك

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('Shop')),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                  width: 80,
                  height: 56,
                  color: Colors.indigo,
                  child: const Center(
                    child: Text('Menu', style: TextStyle(color: Colors.white)),
                  ),
                ),
                Container(
                  height: 56,
                  color: Colors.indigo.shade100,
                  child: const Center(child: Text('Search')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}