Kali ini kita akan membahas artikel yang berjudul Mengenal Column dan Row pada Flutter. Awalnya cukup membingungkan membedakannya, karena pada umumnya column itu horizontal dan row itu vertikal. Jadi kita akan membahas hal umum pada Column dan Row yang sering digunakan. Mari kita mulai.

Mengenal Column dan Row pada Flutter

Column Widget pada Flutter

Untuk Column widget, kita cukup menggunakannya seperti ini

Column(
        children: <Widget>[
          Text("1"),
          Text("2"),
          Text("3"),
        ],
      )

ini hasil dari script diatas

SS 1 Mengenal Column dan Row pada Flutter

 

ada beberapa property yang sering digunakan pada Column, seperti mainAxisAlignment. mainAxisAlignment di gunakan untuk meratakan atau menjajarkan isi dari kolom secara vertikal. Berikut contoh penggunaanya



Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("1"),
          Text("2"),
          Text("3"),
        ],
      )

Hasilnya seperti ini

SS 2 Mengenal Column dan Row pada FlutterRow Widget pada Fluttter

Penggunaan Row dan Column tidak jauh berbeda, berikut contoh penggunaanya

Row(
        children: <Widget>[
          Text("1"),
          Text("2"),
          Text("3"),
        ],
      )

hasilnya akan seperti ini

ss 3 Lalu, jika penggunaan mainAxisAlignment pada column menjajarkan atau meluruskan secara vertikal, maka pada row penggunaan mainAxisAlignment akan menjajarkan atau meluruskan isi dari row secara horizontal.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text("1"),
    Text("2"),
    Text("3"),
  ],
),

Untuk info lebih lanjut tentang column dan row silahkan kunjungi https://flutter.dev/docs/development/ui/layout. Semoga bermanfaat

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Kami memberikan tutorial baru tiap harinya !!!

You have Successfully Subscribed!