Belajar Widget Flutter : Expanded

Expanded

Sejauh ini kita telah mempelajari beberapa widget dasar dan bagaimana menyusunnya secara horizontal maupun vertikal. 

Dalam pengembangan aplikasi mobile kita tahu bahwa terdapat banyak sekali perangkat dengan ukuran layar yang berbeda pula. Untuk itu penting bagi kita untuk bisa menyusun tampilan yang responsif terhadap ukuran layar.

Kira-kira bagaimana Anda akan menyusun layout dengan tampilan seperti berikut?

Tentunya akan sangat merepotkan apabila kita mengatur tinggi dari masing-masing kotak, bukan? Belum lagi jika harus mengembangkan aplikasi di ukuran yang lebih besar seperti perangkat tablet. 

Flutter memiliki widget Expanded yang dapat mengembangkan child dari Row atau Column sesuai dengan ruang yang tersedia. Cara menggunakannya Anda cukup membungkus masing-masing child ke dalam Expanded.

1. class Rainbow extends StatelessWidget {
2.   @override
3.   Widget build(BuildContext context) {
4.     return Column(
5.       children: <Widget>[
6.         Expanded(
7.           child: Container(
8.             color: Colors.red,
9.           ),
10.         ),
11.         Expanded(
12.           child: Container(
13.             color: Colors.orange,
14.           ),
15.         ),
16.         Expanded(
17.           child: Container(
18.             color: Colors.yellow,
19.           ),
20.         ),
21.         Expanded(
22.           child: Container(
23.             color: Colors.green,
24.           ),
25.         ),
26.         Expanded(
27.           child: Container(
28.             color: Colors.blue,
29.           ),
30.         ),
31.         Expanded(
32.           child: Container(
33.             color: Colors.indigo,
34.           ),
35.         ),
36.         Expanded(
37.           child: Container(
38.             color: Colors.purple,
39.           ),
40.         ),
41.       ],
42.     );
43.   }
44. }

Saat aplikasi dijalankan, masing-masing container akan menempati ruang kosong yang ada. Jika Anda menjalankan di ukuran layar yang berbeda, maka ukuran container juga akan menyesuaikan.

Bisa kita lihat seluruh container menempati ruang dengan ukuran yang sama. Ini disebabkan Expanded memiliki parameter flex yang memiliki nilai default 1. 

Anda dapat mengubah nilai flex ini sesuai perbandingan yang diinginkan. Misalnya Anda memberikan nilai flex 2 pada salah satu container.

Expanded(
  flex: 2,
  child: Container(
    color: Colors.blue,
  ),
),

Maka container berwarna biru ini akan menjadi lebih besar dengan perbandingan 2/(1 + 1 + 1 + 1 + 2 + 1 + 1) atau 2/8 dari halaman.

Dokumentasi berikut ini dapat Anda pelajari untuk memaksimalkan penggunaan widget Expanded Class.