Nurul Huda
Nurul Huda
  1. Beranda ›
  2. Android ›
  3. Flutter ›
  4. Flutter Dasar
  5. › Flutter Container Widget

Flutter Container Widget

Flutter Container Widget

Daftar Isi

Kita masih berada di seri tutorial flutter dasar.

Kilas Balik

Sejauh ini, kita telah mempelajari banyak hal dasar tentang flutter di antaranya:

  • (Hampir) Semua bagian UI pada flutter adalah widget, baik yang terlihat maupun yang tidak
  • Widget pada flutter terbagi menjadi 2 yaitu stateful dan stateless
  • Stateful bersifat statis, sedangkan stateless bersifat dinamis

Setelah mempraktikkan membuat widget baik stateful mau pun stateless, sekarang kita akan melanjutkan project ini dengan pembahasan baru yaitu widget container.

Sekilas Tentang Widget Container

Widget container adalah sebuah widget yang bertugas sebagai pembungkus dari widget lain.

Dinamakan container karena nantinya, ia bisa memiliki properti-properti bingkai seperti:

  • padding
  • margin
  • border
  • border radius
  • box shadow
  • dan lain-lain

Ilustrasi:

Pada ilustrasi di atas, kotak berwarna putih adalah child widget. Sedangkan semuanya dari margin, border, dan padding adalah widget container.

Agar lebih jelas, mari kita langsung seduh kopi lalu praktikkan secara langsung.

Persiapan

Tutorial ini masih melanjutkan project sebelumnya.

Jadi pastikan code base anda berdasarkan progress terakhir dari pertemuan tersebut.

1. Bungkus UI Widget TeksUtama Dengan Container

Langkah pertama, kita akan membungkus ui dari widget TeksUtama dengan sebuah Container.

Caranya:

Ubah kode program ini (pada kelas StateTeksUtama):

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Text(
        'Apa kabar',
        textDirection: TextDirection.ltr,
      ),
      Text(
        listNama[index % listNama.length],
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 45,
          fontWeight: FontWeight.bold,
          color: listWarna[index % listWarna.length]
        ),
      )
    ],
  );
}

Menjadi (lihat kode program yang ter-highlight):

@override
Widget build(BuildContext context) {
  return Container(
    child: Column(
      children: [
        Text(
          'Apa kabar',
          textDirection: TextDirection.ltr,
        ),
        Text(
          listNama[index % listNama.length],
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 45,
            fontWeight: FontWeight.bold,
            color: listWarna[index % listWarna.length]
          ),
        )
      ],
    )
  );
}

Coba jalankan aplikasi. Kita akan dapati bahwa tidak ada perbedaan berarti pada tampilan aplikasi.

Itu terjadi karena memang widget container ini belum kita beri property atau argumen apa pun.

Properti Decoration

Properti Container.decoration berfungsi untuk mendefinisikan dekorasi dari sebuah container.

Ada beberapa jenis dekorasi pada flutter semisal BoxDecoration, ShapeDecoration, dan lain-lain.

Di sini kita hanya akan menggunakan BoxDecoration karena tampilan yang kita inginkan dari object kita adalah sebuah box.

Properti Border

Kita mulai dari properti yang pertama: yaitu border.

Kenapa border?

Border berfungsi agar kita tahu batas dari objek yang kita bangun.

Istilah lainnya: border akan menjadi sebagai garis pembantu buat kita untuk mempermudah proses penyusunan layout.

Untuk garis bantuan sendiri, kita bisa menggunakan devtools inspector dari flutter, akan tetapi kita skip dulu untuk pertemuan kali ini.

Langsung saja, tambahkan kode program berikut ini pada Container yang telah kita buat tadi.

@override
Widget build(BuildContext context) {
  return Container(
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.blue,
        width: 5,
      ),
    ),
    child: Column(
      ...
    ),
  )
}

Ketika dijalankan, kita akan mendapatkan output:

Lanjut..

Pada fungsi utama main(), masukkan widget teksUtama ke-dalam widget Column agar posisinya berada di atas. Insyaallah kita akan membahas lebih lanjut tentang Column pada pertemuan-pertemuan yang akan datang.

...
body: Center(
  child: Column(
    children: [
      teksUtama
    ],
  ),
),
...

Sekarang, hasil komponen kita menjadi seperti berikut:

Sampai di sini, border cukup membantu.

Properti Padding

Seperti pada ilustrasi sebelumnya, padding adalah sebuah jarak antara content (dalam hal ini child widget) dengan border.

Kita bisa menambahkannya dengan menambahkan arguman Container.padding:

@override
Widget build(BuildContext context) {
  return Container(
    padding: EdgeInsets.all(20),
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.blue,
        width: 5,
      ),
    ),
    ...
  )
}

Anda juga bisa menggunakan variasi lain dari padding seperti:

// ganti left, top, right, dan bottom dengan angka
EdgeInsets.fromLTRB(left, top, right, bottom)

Atau dengan mendefinisikan padding vertical dan padding horizontal:

EdgeInsets.symmetric(vertical: 20, horizontal: 50),

Atau menggunakan fungsi EdgeInsets.only() untuk mendefinisikan arah tertentu saja yang diberi padding:

EdgeInsets.only(top: 50, right: 150)

Kira-kira output-nya adalah seperti tangkapan layar berikut:

Properti Margin

Kebalikan dari padding, margin adalah jarak antara border dengan dunia luar.

Kita bisa mendefinisikannya dengan menambahkan argumen margin saat membuat objek Container seperti berikut:

@override
Widget build(BuildContext context) {
  return Container(
    padding: EdgeInsets.symmetric(vertical: 20, horizontal: 50),
    margin: EdgeInsets.all(20),
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.blue,
        width: 5,
      ),
    ),
    ...
  )
}

Sama seperti padding, Anda juga bisa menggunakan variasi lain untuk mendefinisikan margin, seperti:

// ganti left, top, right, dan bottom dengan angka
EdgeInsets.fromLTRB(left, top, right, bottom)

Atau dengan mendefinisikan margin vertical dan margin horizontal:

EdgeInsets.symmetric(vertical: 20, horizontal: 50),

Atau menggunakan fungsi EdgeInsets.only() untuk mendefinisikan arah tertentu saja yang diberi margin:

EdgeInsets.only(top: 50, right: 150)

Output aplikasi kita setelah diberi margin, kira-kira seperti berikut:

Properti Color (Background)

Dengan menggunakan container widget, kita bisa membungkus sebuah UI tampilan dan memberikannya warna latar belakang.

Caranya adalah dengan mendefinisikan atribut atau argumen decoration.color.

Simak contoh berikut:

@override
Widget build(BuildContext context) {
  return Container(
    padding: EdgeInsets.symmetric(vertical: 20, horizontal: 50),
    margin: EdgeInsets.all(20),
    decoration: BoxDecoration(
      color: Colors.lightBlue[50],
      border: Border.all(
        color: Colors.blue,
        width: 5,
      ),
    ),
    ...
  )
}

Pada VSCode, anda bisa mengarahkan cursor ke arah bagian Colors.<warna>, maka akan muncul preview colornya seperti tangkapan layar berikut:

Hasil output dari potongan kode program di atas adalah seperti ini:

Properti Border Radius

Selain border, kita juga bisa mendefinisikan border radius dari sebuah container. Border radius akan membuat box container kita tidak 90% pada sudut-sudutnya.

Perhatikan contoh berikut:

Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 20, horizontal: 50),
      margin: EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.lightBlue[50],
        borderRadius: BorderRadius.circular(20),
        border: Border.all(
          color: Colors.blue,
          width: 5,
        ),
      ),
      ...
    )
}

Output dari kode program di atas:

Properti Box Shadow

Properti terakhir yang akan kita bahas adalah: box shadow.

Box shadow adalah properti yang mendefinisikan objek bayangan dari suatu widget component.

Dengan box shadow, kita bisa memberikan efek 3D kepada suatu objek, atau kita juga bisa mempertegas tumpukan berbagai objek: mana objek yang ada di atas dan mana yang ada di bawah.

Agar bayangan lebih terlihat, kita hapus property border, kemudian kita tambahkan property boxShadow.

Perhatikan contoh berikut:

Widget build(BuildContext context) {
  return Container(
    padding: EdgeInsets.symmetric(vertical: 20, horizontal: 50),
    margin: EdgeInsets.all(20),
    decoration: BoxDecoration(
      color: Colors.lightBlue[50],
      borderRadius: BorderRadius.circular(20),
      boxShadow: [BoxShadow(
        color: Colors.black12,
        spreadRadius: 5,
        blurRadius: 5,
      )],
      ...
    )
    ...
  )
}

Di dalam kode program di atas:

  • bagian spreadRadius untuk mendefinisikan radius penyebaran bayangan
  • dan blurRadius adalah untuk daya buram/kabur dari bayangan

Save dan jalankan kembali aplikasi.

Sekarang anda akan mendapatkan tampilan yang kira-kira seperti ini:

Anda juga bisa bermain-main dengan properti offset untuk mengatur kemana arah bayangan, lihat contoh berikut:

boxShadow: [BoxShadow(
  color: Colors.black12,
  spreadRadius: 5,
  blurRadius: 5,
  offset: Offset.fromDirection(-15, -53)
)],

Anda akan mendapatkan tampilan kira-kira seperti berikut:

Kode Program Lengkap

Kode program lengkap untuk tutorial flutter kali ini bisa anda dapatkan di sini.

Pembahasan Selanjutnya

Insyaallah pada pertemuan-pertemuan selanjutnya, kita akan membahas tentang layouting pada Flutter.

Jadi, tetep stay tune ya!

Jangan lupa share ke teman-teman kalian!

Terima kasih banyak!

Belajar Ngoding di Udemy