Berbagi Ruang dengan flex

Termasuk bagian Layout yang Menyesuaikan dalam perjalanan Flutter di Coddy. Pelajaran 2 dari 30.

Jika dua anak dari Row sama-sama Expanded, keduanya berbagi ruang secara merata: pada ponsel dengan lebar 390 piksel, masing-masing mendapat 195 piksel.

Untuk membaginya secara tidak merata, beri Expanded nilai flex:. Nilai ini adalah porsi, bukan ukuran. Flutter menjumlahkan porsi tersebut lalu membagi ruang berdasarkan porsi itu:

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

Jumlah porsinya adalah 4, jadi warna merah mendapat tiga perempat baris dan warna biru mendapat seperempatnya. Anak yang tidak memiliki flex: mendapat porsi 1.

Karena porsi tersebut merupakan bagian dari keseluruhan, tata letak mempertahankan proporsinya pada layar dengan lebar berapa pun.

Tantangan

Mudah

Buat kotak Chart dua kali lebih lebar daripada kotak Notes. Di ponsel, lebarnya 260 dan 130 piksel.

Coba sendiri

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