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