Flutter

Layout Dasar: Row, Column, Container

Penjelasan

Row menyusun widget anak-anaknya secara HORIZONTAL, Column secara VERTIKAL — keduanya menerima daftar children. Container adalah widget serbaguna untuk membungkus satu widget dengan padding, margin, warna latar, atau border, mirip peran <div> di HTML tapi lebih eksplisit propertinya.

Contoh Konsep

Column(
    children: [
        Container(
            padding: const EdgeInsets.all(16),
            color: Colors.blue,
            child: const Text('Kaos CompileDaily'),
        ),
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: const [
                Text('Rp 99.000'),
                Icon(Icons.shopping_cart),
            ],
        ),
    ],
)

Praktikum

Buat Column berisi Container (padding 16, warna latar abu-abu) membungkus Text "Produk Unggulan", diikuti Row berisi dua Text: "Kualitas Terbaik" dan "Harga Terjangkau".

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Row/Column akan ERROR (overflow, ditandai garis kuning-hitam mencolok) kalau isinya melebihi ruang yang tersedia dan tidak ada widget yang bisa "menyusut" — bungkus children yang panjang dengan Expanded atau Flexible supaya bisa menyesuaikan ruang tersisa, mirip flex-grow di CSS Flexbox.

← Kembali Widget Dasar: MaterialApp & Scaffold Lanjutkan → StatefulWidget & setState