Card image cap
[Flutter][6] Penggunaan Widget Container
Thursday, 21 Feb 2019

Hello world,

Dalam pembahasan kali ini adalah Container. Mungkin kalian sudah sering mendengar istilah ini. Yang biasanya membuat desain website biasanya sering menggunakannya yaitu salah satu nama class pada Bootstrap). Akan tetapi penggunaanya sedikit berbeda di sini. Di dalam Flutter penggunaan Container adalah untuk mengatur penempatan dan ukuran (kita bisa ibaratkan sebuah <div> yang bisa kita atur ukuran, padding, margin dll). Untuk contohnya saya menggunakan kode dari post sebelumnya seperti di bawah ini.

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(
padding: EdgeInsets.all(20.0),
child: new Image.asset('assets/image01.jpg', width: 300.0,)
)
);
}
}

 Pada contoh di atas saya sudah menggunakan Container yang berisi gambar dan ada pengaturan padding. Kita bisa menambahkan margin seperti contoh di bawah. Dalam container kita bisa menambahkan beberapa opsi seperti padding, margin, dan juga child untuk meletakkan widget lain di dalamnya.

new Container(
padding: EdgeInsets.all(20.0),
margin: EdgeInsets.all(30.0),
child: new Image.asset('assets/image01.jpg', width: 300.0,)
)

Untuk penggunaan EdgeInsets di sini bisa beberapa macam. Pada contoh di atas saya menggunakan EdgeInsets.all yang artinya akan mempengaruhi semua arah (atas, kanan, bawah, kiri). Kalau ingin mengatur arah tertentu saja bisa menggunakan cara ini.

margin: EdgeInsets.only(left: 20.0),

Atau kalau ingin mengatur keempat arah bisa menggunakan cara berikut (seperti namanya ukurannya berurutan dari LTRB = Left Top Right Bottom):

margin: EdgeInsets.fromLTRB(40.0, 40.0, 5.0, 5.0),

Selanjutnya kita bisa mengatur backgroundnya dengan color. Pilihan warna bisa di lihat di sini.

new Container(
color: Colors.blue,
padding: EdgeInsets.fromLTRB(40.0, 10.0 ,5.0, 5.0),
margin: EdgeInsets.fromLTRB(40.0, 40.0 ,5.0, 5.0),
child: new Image.asset('assets/image01.jpg', width: 300.0,)
)

Kita juga bisa mengatur width dan height. 

new Container(
width: 300.0,
height: 100.0,
color: Colors.blue,
child: new Image.asset('assets/image01.jpg', width: 300.0,)
)

Kita juga bisa mengatur Alignment. Alignment di sini bisa kita isi dengan angka -1 sampai 1. Simpelnya bisa saya jelaskan seperti ini :

0, 0 -> horizontal center dan vertical center

-1, 0 -> horizontal left dan vertical center

1, -1 > horizontal bottom dan vertical top

dan seterusnya bisa dicoba-coba sendiri.

new Container(
alignment: Alignment(0, 0),
color: Colors.blue,
child: new Image.asset('assets/image01.jpg', width: 300.0,)
)

Atau bisa juga kita menggunakan yang simpel seperti contoh di bawah

alignment: Alignment.bottomCenter,

Mungkin bisa lebih mudah pakai cara yang kedua ini. Karena kita tinggal menyebutkan namanya seperti center, topCenter, bottomCenter, topLeft dst. Sangat mudah bukan? Beberapa fungsi lain dalam Container akan saya jelaskan di post selanjutnya.

Selamat mencoba :)