Flutter

Mengelompokkan Berbagai Widget dengan Stack

Hallo teman”, kali ini kita akan membahas tentang Flutter lagi nih. Jika sebelumnya kita membahas tentang Column dan Row, kali ini kita akan coba bahas...

Ikhwan Written by Ikhwan · 1 min read >

Hallo teman”, kali ini kita akan membahas tentang Flutter lagi nih. Jika sebelumnya kita membahas tentang Column dan Row, kali ini kita akan coba bahas tentang Stack.

Jika pada column, widget disusun secara vertikal atau bisa kita sebut dengan sumbu Y, sedangkan row disusun secara horizontal atau sumbu X, lalu Stack dapat dikatakan disusun bertumpuk atau sumbu Z. Seperti berikut ini:

Ilustrasi
Ilustrasi

Child dari Stack

Menurut mimin, ada dua widget yang cocok digunakan dengan Stack yaitu widget Positioned dan Align. Kita coba bahas satu-satu ya.

1. Positioned

Dengan menggunakan widget ini kita bisa menentukan posisi widget secara bebas. Properti yang bisa kita gunakan untuk melakukan hal tersebut adalah left, right, bottom, dan top. Berikut beberapa contoh penggunaan:

  • Jika misalkan kita menggunakan Positioned tanpa mengatur posisi, maka widget Container akan otomatis berada di sudut kiri atas. Berikut contoh codenya:
Positioned(
    child: Container(
        width: 54,
        height: 54,
        color: Colors.red,
))
  • Jika ingin membuat widget berada pada posisi di sudut kanan bawah, gunakan code seperti berikut ini:
Positioned(right: 0, bottom: 0, child: Text("Bottom right"))

Pada contoh sebelumnya kita menggunakan nilai 0 pada property right dan bottom. Jika misalkan kita menggunakan nilai 10, maka nilai tersebut akan berlaku seperti margin. Misalkan right:10, berarti memiliki posisi 10 dari sisi kanan.

2. Align

Untuk align, kita bisa menggunakan property Alignment pada widget ini untuk menentukan posisi yang diinginkan. Terdapat 9 alignment yang tersedia, yaitu:

  • Alignment.topLeft
  • Alignment.topCenter
  • Alignment.topRight
  • Alignment.centerLeft
  • Alignment.center
  • Alignment.centerRight
  • Alignment.bottomLeft
  • Alignment.bottom
  • Alignment.bottomRight

berikut contoh code untuk penggunaan align:

Align(
  alignment: Alignment.center,
  child: Container(
    width: 72,
    height: 72,
    color: Colors.green,
  ),
)

#Demo

Silahkan melakukan experiment dengan menggunakan sample berikut ini. Teman-teman juga bisa copas codenya. Disini saya menggunakan codepen sebagai media untuk demo.

Nah sekian dulu untuk tulisan kali ini. Semoga membantu ya, dan jangan lupa untuk tepuk tangan, dan dishare ya. Hal tersebut sangat berarti bagi mimin. 😀

Oh ya, blog ini juga punya tulisan menarik lainnya loh, baik itu tentang flutter maupun hal lainnya. Terimakasih 😀

Menggunakan Google Map di Flutter

Ikhwan in Flutter
  ·   2 min read

Cara untuk Migrasi ke Flutter 2

Ikhwan in Flutter
  ·   2 min read

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *