Halo teman – teman,
Pernah bingung atau bosan gk sih sama susunan widget yang hanya menggunakan column, row dan container? Sebenarnya buat mengatur / menyusun widget gk hanya itu saja, tetapi ada juga yang namanya Stack !

Udah pada tau belum stack itu apa ? Secara bahasa stack artinya tumpukan. Jadi udah pada ketebak gk? Pastinya sudah kan. Nah, Stack ini akan berfungsi sebagai pengatur posisi widget yang mana akan menyusun widget tdengan menumpukkan widget itu sendiri.

Secara sederhana akan terlihat seperti gambar berikut :

Stack(
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 90,
      height: 90,
      color: Colors.green,
    ),
    Container(
      width: 80,
      height: 80,
      color: Colors.blue,
    ),
  ],
)

Jadi, pada dasarnya penumpukan akan di susun secara default berurut pada bagian atas (top start) jika tidak mengatur posisinya dengan menggunakan alignment atau positioned.

Sebenarnya ada banyak yang bisa di pakai pada Stack sendiri, seperti pada gambar berikut :

Berikut beberapa contoh penggunaan stack :

• Mengatur IconButton di pojok kanan bawah Circler

             Stack(
                  alignment: Alignment.center,
                  children: [
                    CircleAvatar(
                    child: Icon(Icons.person),
                      radius: 35,
                    ),
                    Positioned(
                      bottom: 0,
                      right: 5,
                      child: Container(
                        height: 30,
                        width: 30,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(50),
                          color: Color(0xffDCE5F0),
                        ),
                        child: IconButton(
                          onPressed: () {},
                          icon: Icon(
                            Icons.camera_alt_outlined,
                            size: 15,
                            color: Colors.black,
                          ),
                        ),
                      ),
                    )
                  ],
                ),

• Menempatkan Icon di atas gambar

          Stack(
            children: [
              Container(
                height: 200,
                width: MediaQuery.of(context).size.width,
                child: Image.asset(
                  'images/boarding01.png',
                  fit: BoxFit.cover,
                ),
              ),
              IconButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                icon: Icon(Icons.arrow_back),
              ),
              Positioned(
                right: 10,
                top: 10,
                child: CircleAvatar(
                  radius: 20,
                  backgroundColor: Colors.white,
                  child: IconButton(
                    onPressed: () {
                      setState(() {
                        changed = !changed;
                      });
                    },
                    icon: Icon(
                      Icons.favorite,
                      color: changed ? Colors.grey : Colors.red,
                    ),
                  ),
                ),
              )
            ],
          ),

• Membuat design untuk tampilan awal page menjadi lebih menarik, dengan penempatan Texformfield di antara warna background

Stack(
              clipBehavior: Clip.none,
              children: [
                Container(
                  color: Colors.green,
                  height: 85,
                  child: ListTile(
                      contentPadding: EdgeInsets.only(left: 20, right: 7),
                      leading: CircleAvatar(
                        child: Icon(
                          Icons.person,
                          color: Color(0xff2B976B),
                        ),
                        backgroundColor: Colors.white,
                        radius: 20,
                      ),
                      title: Text(
                        'Login untuk melanjutkan',
                        style: TextStyle(
                            fontSize: 10,
                            fontFamily: 'OpenSans',
                            fontWeight: FontWeight.normal,
                            color: Colors.white),
                      ),
                      subtitle: Text(
                          'Masuk',
                          style: TextStyle(
                              fontSize: 12,
                              fontFamily: 'OpenSans',
                              fontWeight: FontWeight.w600,
                              color: Colors.white),
                        ),


                      trailing: IconButton(
                        icon: Icon(
                          Icons.notifications,
                          color: Colors.white,
                        ),
                        onPressed: () {
                          //pageNotifikasi
                          Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) =>
                                      PageBerandaNotifikasi()));
                        },
                      )),
                ),
                Positioned(
                  left: 0,
                  right: 0,
                  bottom: -25,
                  child: Container(
                    margin: EdgeInsets.only(left: 20, right: 20),
                    height: 45,
                    child: TextFormField(
                      decoration: InputDecoration(
                        contentPadding: EdgeInsets.only(left: 10, right: 10),
                        fillColor: Colors.white,
                        filled: true,
                        hintText: 'Cari',
                        hintStyle: TextStyle(
                              fontSize: 12,
                            fontFamily: 'OpenSans',
                            color: Colors.grey),
                        border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(5),
                            borderSide: BorderSide.none),
                        suffixIcon: Icon(Icons.search),
                      ),
                    ),
                  ),
                )
              ],
            ),

Jadi sekian pembahasan tentang stack kali ini, semoga dapat di pahami dan memberikan ide baru untuk teman – teman dalam membuat UI untuk aplikasi yang akan dibangun.