Belajar Widget Flutter : Expanded - Hallo sahabat Ochimz Library, Pada Artikel yang anda baca kali ini dengan judul Belajar Widget Flutter : Expanded, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel DUNIA TEKNOLOGI, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Belajar Widget Flutter : Expanded
link : Belajar Widget Flutter : Expanded

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.

Demikianlah Artikel Belajar Widget Flutter : Expanded

Sekianlah artikel Belajar Widget Flutter : Expanded kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Belajar Widget Flutter : Expanded dengan alamat link https://www.theochimz.eu.org/2020/06/belajar-widget-flutter-expanded.html