חלוקת מקום באמצעות flex

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

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

כדי לחלק את המקום באופן לא שווה, נותנים ל-Expanded ערך flex:. זהו חלק יחסי, לא גודל. Flutter מחבר את החלקים היחסיים ומחלק לפיהם את המקום:

Row(
  children: [
    Expanded(flex: 3, child: Container(color: Colors.red)),
    Expanded(flex: 1, child: Container(color: Colors.blue)),
  ],
)

סך החלקים היחסיים הוא 4, ולכן האדום מקבל שלושה רבעים מהשורה והכחול מקבל רבע. לילד ללא flex: יש חלק יחסי של 1.

מכיוון שהחלקים היחסיים הם חלקים מהשלם, הפריסה שומרת על הפרופורציות שלה בכל רוחב מסך.

אתגר

קל

הפוך את התיבה Chart לרחבה פי שניים מהתיבה Notes. בטלפון, הרוחב הוא 260 ו־130 פיקסלים.

נסו בעצמכם

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('Dashboard')),
        body: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: Container(
                    height: 120,
                    color: Colors.teal,
                    child: const Center(
                      child: Text('Chart', style: TextStyle(color: Colors.white)),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    height: 120,
                    color: Colors.amber,
                    child: const Center(child: Text('Notes')),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}