Expanded Mengisi Baris

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

Row memberikan lebar yang diminta setiap anak. Kotak tanpa lebar yang ditentukan hanya selebar teksnya, sehingga sisa ruang pada baris tetap kosong.

Bungkus anak dengan Expanded agar anak tersebut menggunakan semua ruang yang tersisa setelah anak-anak lain mendapat ruang:

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

Pada ponsel dengan lebar 390 piksel, kotak merah tetap selebar 100 piksel dan kotak biru mendapat sisa 290 piksel. Pada layar yang lebih lebar, kotak biru membesar, sedangkan kotak merah tetap selebar 100 piksel.

Expanded juga berfungsi di Column, tempat widget ini mengisi sisa tinggi yang tersedia.

Tantangan

Mudah

Bilah pencarian terlalu pendek. Buat kotak Search memenuhi sisa baris, sehingga lebarnya 310 piksel di samping kotak Menu yang lebarnya 80 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('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')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}