Card image cap
[Flutter][10] Penggunaan Expanded
Saturday, 23 Feb 2019

Hello world,

Ini adalah pembahasan sederhana mengenai penggunaan Expanded. Expanded sendiri penggunaannya untuk membuat sebuah widget yang lebarnya akan secara otomatis menyesuaikan dengan ruang yang ada. Agar lebih gampang saya coba gambarkan seperti di bawah ini.


Kalau dilihat dari gambar di atas, bisa kita simpulkan kalau kita pakai widget lain seperti Container, maka hasilnya akan seperti pada gambar kiri jika tidak kita set width-nya. Nah bagaimana kalau kita membuat siContainer itu lebarnya full? Bisa saja kita set width-nya menjadi full. Nah agar lebih jelas lagi perbedaannya bisa dilihat pada contoh gambar di bawah ini.


Bisa kita lihat pada contoh gambar di atas sama-sama menggunakan row dan 2 children. Bedanya pada gambar sebelah kiri kedua children berisi container. Sedangkan pada gambar sebelah kanan menggunakan container dan expanded. Bagaimana? apakah di sini sudah semakin jelas? Pada gambar kiri kedua container lebarnya menyesuaikan isi dari konten yang ada di dalamnya dan akhirnya menyisakan ruang sebelah kanan container kedua. Sedangkan pada gambar kanan container menyesuaikan dengan kontennya sedangkan expanded menyesuaikan pada ruang yang ada yang akhirnya full sampai tepi kanan layar. 

Lalu bagaimana cara pakainya? Begini contohnya.

new Expanded(
child: new Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.", style: TextStyle(color: Colors.white),),
),

Atau bisa dilihat juga contohnya pada post saya sebelumnya http://code.byriza.com/flutter-9-menampilkan-widget-secara-vertical-menggunakan-column-widget

Selamat mencoba :)