Card image cap
[Flutter][9] Menampilkan Widget Secara Vertical Menggunakan Column Widget
Saturday, 23 Feb 2019

Hello world,

Pembahasan kali ini mirip dengan yang sebelumnya dimana sebelumnya kita mencoba menggunakan widget Row, sekarang kita mencoba widget yang hampir mirip yaitu Column. Widgetnya hampir mirip tapi punya perbedaan dalam penggunaan. Kalau row digunakan untuk menampilkan secara horizontal, maka Column digunakan untuk menampilkan widget secara vertical. Oke langsung saja kita coba. Di bawah ini saya gambarkan tampilannya nanti akan ada sebuah kotak besar yang nantinya kita pakai container (widget #1) dan akan ada 2 widget di dalamnya (widget #2 dan #3) yang berjajar ke samping (kita pakai Row), lalu di dalam widget yang sebelah kanan (widget #3) akan berisi 2 widget (#4 dan #5) yang berjajar ke bawah (kita akan pakai Column).

Oke langsung kita coba saja. Di sini saya pakai kode di bawah ini (dari post sebelumnya).

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Myapp(),
));
}

class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("My Apps"),
),
body: new Container(
child: new Row(
children: [
new Container(
color: Colors.blue,
padding: EdgeInsets.all(20.0),
child: new Icon(Icons.home, size: 70.0, color: Colors.white,),
),
new Container(
padding: EdgeInsets.all(20.0),
child: new Icon(Icons.people, size: 70.0,),
),
new Container(
padding: EdgeInsets.all(20.0),
child: new Icon(Icons.search, size: 70.0,)
),
],
),
),
);
}
}

Dari kode awal yang saya buat ini akan menampilkan sebuah container yang berisi Row untuk menampilkan tiga buah container lagi secara berjajar menyamping. Nah untuk membuat seperti gambar kita tadi artinya di sini widget #1 sudah tersedia. Dan untuk widget #2 dan #3 juga sudah tersedia. Nah untuk  lebih jelas lagi susunan widgetnya (dari gambar awal) akan berubah menjadi seperti di bawah ini.

Kita akan membuat 1 buah container (#1) yang akan berisi 1 buah Row (#1a) untuk membuat 2 buah widget (#2 dan #3) berjajar menyamping. Lalu di dalam widget #3 akan kita isi dengan 2 buah widget (#4 dan #5) berjajar ke bawah maka kita membutuhkan widget Column (#3a). Kita coba perbaharui kode di atas tadi menjadi seperti ini.

body: new Container(
child: new Row(
children: [
new Container(
color: Colors.blue,
padding: EdgeInsets.all(20.0),
child: new Icon(
Icons.home,
size: 70.0,
color: Colors.white,
),
),
new Expanded(
child: new Container(
color: Colors.blue[300],
padding: EdgeInsets.all(20.0),
child: new Icon(
Icons.people,
size: 70.0,
color: Colors.white,
),
),
),
],
),
),

Nah di sini kita sudah membuat widget #1, #1a, #2 dan #3. Di sini widget #2 saya pakai container lagi yang kita beri warna background biru dan diisi icon home berwarna putih. Lalu untuk widget #3 kita pakai Expanded (expanded ini dibahas di post selanjutnya) yang berisi container dengan warna biru muda dan berisi icon people berwarna putih. Nah selanjutnya kita akan buat widget #3a, #4 dan #5 dengan mengubah isi dari expanded. Nah jadilah seperti di bawah ini.

body: new Container(
child: new Row(
children: [
new Container(
height: 110.0,
color: Colors.blue,
padding: EdgeInsets.all(20.0),
child: new Icon(
Icons.home,
size: 70.0,
color: Colors.white,
),
),
Expanded(
child: new Container(
height: 110.0,
color: Colors.blue[300],
padding: EdgeInsets.all(20.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new Text("Title"),
new Text("Hello world")
],
)
),
),
],
),
),

Di sini kita isi container pada widget #3 dengan Column dan 2 children di dalamnya yaitu text, dan di sini saya tambahin height 110.0. Lalu saya pakai CrossAxisAlignment.start agar children pada column rata kiri. Dari sini sebenarnya hasilnya sudah sesuai dengan gambar yang kita ingin buat di atas tadi. Mungkin akan lebih bagus jika kita ubah sedikit style pada textnya saja seperti contoh di bawah.

body: new Container(
child: new Row(
children: [
new Container(
height: 110.0,
color: Colors.blue,
padding: EdgeInsets.all(20.0),
child: new Icon(
Icons.home,
size: 70.0,
color: Colors.white,
),
),
Expanded(
child: new Container(
height: 110.0,
color: Colors.blue[300],
padding: EdgeInsets.all(20.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new Text("Title", style: TextStyle(color: Colors.white, fontSize: 20.0, fontWeight: FontWeight.bold),),
new Text("Hello world", style: TextStyle(color: Colors.white),)
],
)
),
),
],
),
),


Selamat mencoba :)