Row dan Column

 Selanjutnya kita akan mempelajari bagaimana cara membuat widget yang kita gunakan berjajar secara vertikal atau horizontal. Lalu apa yang dimaksud dengan membuat widget yang berjajar? Perhatikan gambar berikut:

20200615193337da9cc18beb6419c05d025dc651a4d837.jpegPada gambar di atas kita memiliki tampilan ikon-ikon yang merupakan kumpulan tombol, di antaranya share, like dan dislike. Tombol-tombol tersebut tersusun berjajar secara horizontal. Nah, untuk membuat berjajar horizontal atau membentuk baris kita menggunakan widget Row. Sedangkan untuk menyusun widget yang membentuk kolom atau vertikal, kita bisa menggunakan widget Column.


Widget Row

Seperti yang dicontohkan sebelumnya, widget Row merupakan suatu widget yang digunakan untuk membuat widget-widget tersusun berjajar secara horizontal. Row memiliki sintaks seperti berikut:

  1. Row(
  2.   children: <Widget>[
  3.     //di sini berisi widget-widget
  4.   ],
  5. )

Untuk membuat widget-widget berjajar secara horizontal kita harus memasukkan widget-widget tersebut ke dalam parameter children. Parameter children berisi kumpulan atau list dari widget karena kita dapat menyusun beberapa widget sekaligus di dalamnya. Jika mengacu pada contoh tombol-tombol di atas kodenya seperti berikut:

  1. Row(
  2.   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  3.   children: const <Widget>[
  4.     Icon(Icons.share),
  5.     Icon(Icons.thumb_up),
  6.     Icon(Icons.thumb_down),
  7.   ],
  8. )

Seperti yang kita lihat, kita membuat sebuah IconButton berada di dalam parameter children. Kita menambahkan pula mainAxisAlignment yang merupakan parameter alignment pada Row. Parameter mainAxisAlignment yang berfungsi untuk mengatur alignment horizontal dari Row (alignment utama). Selain itu Row juga memiliki parameter crossAxisAlignment yang berfungsi untuk mengatur alignment secara vertikal. Kedua parameter ini juga berlaku sebaliknya untuk widget Column.
20200615193413854d522ae9635ddef73b39277708f37f.jpeg

Berikut ini adalah contoh penerapan mainAxisAlignment pada Row:

2021042512000412e4c53a9d35daed279e1163d70a284b.jpeg

 

Widget Column

Kebalikan dari Row, Column merupakan suatu widget yang digunakan untuk membuat widget-widget tersusun berjajar secara vertikal. Column memiliki sintaks mirip dengan Row, seperti berikut:

  1. Column(
  2.   children: <Widget>[
  3.     //di sini berisi widget-widget
  4.   ]
  5. )

Contoh penerapan Column seperti berikut:

  1. Column(
  2.   children: const <Widget>[
  3.     Text(
  4.       'Sebuah Judul',
  5.       style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
  6.     ),
  7.     Text('Lorem ipsum dolor sit amet'),
  8.   ],
  9. )

Maka akan menghasilkan tampilan seperti berikut:
20200615193505c7892546a782aa0f2a5a31e129c9eee1.jpeg


Kesimpulan

Untuk membuat sebuah widget-widget berjajar kita dapat menggunakan widget Row atau Column. Sebenarnya penggunaan Row dan Column dapat dipadukan sehingga dapat membuat sebuah layout yang kompleks seperti berikut:

dos:2142ae532eb5f4c45f9abee368ddb79520231005145652.png

dos:adb6b8673fd1b6d8f441653b1f38eeb520231005145707.png

Untuk memahami Row, Column, dan bagaimana menyusun layout dengan Flutter secara mendalam, silakan pelajari dokumentasi berikut:

Popular posts from this blog

Build APK

Image
  Project Flutter yang telah dibuat dapat kita build menjadi berkas .apk yang dapat berjalan di Android. Build APK adalah suatu proses membungkus aplikasi flutter menjadi format .apk yang nantinya untuk diinstal pada perangkat Android. Berikut tahapan ketika build aplikasi Flutter ke APK. AndroidManifest.xml Sebelum mem-build APK, kita akan mengatur berkas  android/app/src/main/AndroidManifest.xml .  AndroidManifest.xml  merupakan sebuah berkas yang berisikan informasi mengenai aplikasi Android yang akan di- build . Informasi-informasi tersebut berupa nama aplikasi, ikon,  permission ,  screen orientation , dan lain-lain. Isi dari  AndroidManifest.xml  seperti berikut: <manifest xmlns:android = "http://schemas.android.com/apk/res/android"      package = "id.eudeka.samples" >      <application          android:name = "io.flutter.app.FlutterApplication"        ...
Read more

Generic

Image
Jika Anda perhatikan pada dokumentasi  collection  seperti  List , sebenarnya tipe dari  List  tersebut adalah  List<E> . Tanda  <...>  ini menunjukkan bahwa  List  adalah tipe  generic , tipe yang memiliki tipe parameter. Menurut  coding convention  dari Dart, tipe parameter dilambangkan dengan satu huruf kapital seperti  E ,  T ,  K , atau  V . Secara umum  generic  merupakan konsep yang digunakan untuk menentukan tipe data yang akan kita gunakan. Kita bisa mengganti tipe parameter  generic  pada Dart dengan tipe yang lebih spesifik dengan menentukan  instance  dari tipe tersebut. Sebagai contoh, perhatikan  List  yang menyimpan beberapa nilai berikut: List <int> numberList = [ 1 , 2 , 3 , 4 , 5 ]; Tipe parameter yang digunakan pada variabel list di atas adalah  int , maka nilai yang bisa kita masukkan adalah nilai dengan tipe  ...
Read more

Build IPA

Image
  Build IPA Catatan: Build .IPA hanya bisa dijalankan dengan mendaftar akun Apple Developer Program. Silakan baca informasi tentang Apple Developer Program di sini  https://developer.apple.com/programs/ . Untuk lulus dari kelas ini, tidak diwajibkan untuk bisa build .IPA. Pada materi ini kita akan mempelajari bagaimana melakukan  build  aplikasi Flutter menjadi berkas  .ipa  yang dapat dijalankan pada perangkat iOS. Sebelum melakukan  build , ada beberapa hal yang perlu kita atur seperti nama dan ikon aplikasi. Setting Nama Aplikasi Untuk mengatur nama aplikasi buka berkas  Info.plist  pada direktori  /ios/Runner/ . Konfigurasi untuk nama aplikasi dapat Anda temukan dan ubah pada  key Bundle Name . <key> CFBundleName </key> <string> builder </string> Atau Anda bisa gunakan library  berikut  untuk men- generate  nama aplikasi melalui  pubspec.yaml . Setting Ikon Aplikasi Sama seperti perang...
Read more