Materi
Tata letak Flutter berbeda dari HTML, dan dokumentasi resmi meringkasnya dalam satu aturan: constraints turun, ukuran naik, induk menentukan posisi. Constraint adalah empat angka, yaitu lebar minimum dan maksimum serta tinggi minimum dan maksimum. Induk memberi constraint kepada anak, anak memilih ukurannya sendiri di dalam batas itu dan melaporkannya ke atas, lalu induk menempatkan anak. Akibatnya, widget tidak bisa berukuran sesukanya dan tidak menentukan posisinya sendiri.
Constraint ketat hanya menyisakan satu ukuran. Layar memberi constraint ketat kepada widget akar, sehingga Container(width: 100, height: 100) yang langsung menjadi akar tetap memenuhi layar. Center melonggarkan constraint menjadi minimum 0 dan maksimum seukuran layar, sehingga Container di dalamnya benar-benar 100 × 100.
// Row tidak membatasi lebar anaknya: teks panjang meluap keluar layar.
Row(children: [
Icon(Icons.store),
Text('Toko Sembako Pak Darto, Jalan Pemuda 21, Magelang, buka setiap hari'),
])
// Expanded memberi Text lebar sisa Row: teks turun ke baris berikutnya.
Row(children: [
Icon(Icons.store),
Expanded(child: Text('Toko Sembako Pak Darto, Jalan Pemuda 21, Magelang, buka setiap hari')),
])Row dan Column tidak membatasi ukuran anak di sumbu utamanya. Anak yang terlalu besar memunculkan garis kuning-hitam dan pesan A RenderFlex overflowed. ListView langsung di dalam Column gagal dengan Vertical viewport was given unbounded height, karena ListView ingin setinggi mungkin sementara Column tidak memberi batas tinggi. Perbaikan keduanya serupa: bungkus anaknya dengan Expanded, atau beri ukuran pasti dengan SizedBox.
