Memahami Stack Widget pada Flutter

Hallo sobat belajar flutter, pada kesempatan ini kita akan coba memahami lebih dalam salah satu widget fundamental yang akan sering digunakan khususnya dalam membuat layout flutter yaitu Stack widget.

Stack widget adalah widget yang memungkinkan kita untuk membuat widget-widget saling bertumpuk. Terdapat dua tipe stack widget yaitu:

Stack
IndexedStack

Stack Widget

Stack widget memungkinkan kita untuk menampilkan beberapa lapis widget ke layar. Stack widget juga merupakan multiple children widget yang artinya memiliki properti children sehingga dapat menampung lebih dr satu widget. Urutan dari lapisan widget pada stack dari bawah ke atas, jadi widget yang pertama di dalam stack akan berada di posisi paling bawah dan begitu juga sebaliknya, widget yang terakhir di stack widget akan berada di posisi paling atas stack.

Stack ( 
  children: <Widget> [ 
    BawahWidget(), 
    TengahWidget(), 
    AtasWidget(), 
  ], 
),

Ukuran dari stack widget diambil dari ukuran item widget terbesarnya. Misal dalam stack widget terdapat 4 widget dimana ukuran widget A (100×100), B (150×200), C (200×200) dan D (50×50), maka ukuran Stack adalah 200×200.

Setiap item dalam stack juga harus di tentukan posisi dan align nya atau akan berada di pojok kiri atas sebagai posisi defaultnya.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: BelajarStackWidget(),
  ));
}

class BelajarStackWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Belajar Stack Widget"),
        ),
        body: Stack(
          children: <Widget>[
            Container(
              color: Colors.green,
            ),
            Container(
              color: Colors.red,
              height: 400.0,
              width: 300.0,
            ),
            Container(
              color: Colors.deepPurple,
              height: 200.0,
              width: 200.0,
            ),
          ],
        ),
      ),
    );
  }
}

Untuk mengubah posisi item dari stack widget, kita bisa menggunakan Align widget

Align(
  alignment: Alignment.topRight,
  child: Container(
    color: Colors.deepPurple,
    height: 200.0,
    width: 200.0,
  ),
)

atau jika ingin lebih leluasa dalam memposisikan widget kita juga dapat menggunakan Positioned widget.

Positioned(
  right: 40.0,
  top: 100.0,
  child: Container(
    color: Colors.deepPurple,
    height: 200.0,
    width: 200.0,
  ),
)

IndexedStack Widget

Berbeda dengan stack widget yang menampilkan semua elemen child widgetnya, IndexedStack hanya menampilkan SATU elemen saja berdasarkan indeksnya. Jadi kita harus menentukan elemen widget mana yang akan tampil dari stack tersebut berdasarkan nilai index. Nilai index sendiri mulai dari 0 nol

Sebagai contoh kita akan menggunakan indexedStack dan menampilkan elemen atau widget ketiga, maka potongan kodenya seperti dibawah ini

IndexedStack(
  index: 2,
  children: <Widget>[
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.red,
      height: 400.0,
      width: 300.0,
    ),
    Positioned(
      right: 40.0,
      top: 100.0,
      child: Container(
        color: Colors.deepPurple,
        height: 200.0,
        width: 200.0,
      ),
    )
  ],
),

Dan tampilannya akan menjadi seperti ini

Seperti yang dapat kita lihat pada gambar diatas bahwa elemen index 0 dan 1 tidak muncul, dan hanya widget ke tiga saja yang tampil. Namun untuk ukuran stack nya sendiri masih menggunakan elemen widget terbesarnya sekalipun elemen tersebut tidak ditampilkan di layar.

Contoh Penggunaan Stack Widget

Kita akan coba membuat sebuah tampilan sederhana seperti gambar di bawah ini menggunakan stack widget.

Caranya juga sangat mudah yaitu :

1. Gunakan stack widget

...
  body: Stack(
    children: <Widget>[
      ...
     ],
...

2. Tambahkan background image pada stack

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage(
          'https://cdn.pixabay.com/photo/2020/10/04/18/13/mountains-5627143_1280.jpg'),
      fit: BoxFit.fitHeight,
    ),
  ),
),

3. Tampilkan jam dan text belajar flutter menggunakan Positioned widget

var date = DateTime.now();
...

Positioned(
  right: 40.0,
  top: 100.0,
  child: Text(date.hour.toString() + ':' + date.minute.toString(),
      style: TextStyle(color: Colors.white, fontSize: 45.0)),
),
Positioned(
  right: 40.0,
  top: 150.0,
  child: Text("BelajarFlutter.com",
      style: TextStyle(color: Colors.white, fontSize: 16.0)),
),

4. Terakhir tampilkan box kata mutiara dengan Card widget dan atur posisinya menggunakan Positioned widget

Positioned(
  bottom: 48.0,
  left: 10.0,
  right: 10.0,
  child: Card(
    elevation: 8.0,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8.0),
    ),
    child: Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            "Kata Mutiara",
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(
              top: 0, left: 16.0, right: 16.0, bottom: 8.0),
          child: Text(
              "Pendidikan adalah senjata paling ampuh yang bisa kamu gunakan untuk mengubah dunia."),
        ),
        Padding(
          padding: const EdgeInsets.only(
              top: 8.0, left: 16.0, right: 16.0, bottom: 32.0),
          child: Text("Nelson Mandela"),
        ),
      ],
    ),
  ),
),

Selesai..

Contoh kode lengkapnya seperti dibawah ini

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: BelajarStackWidget(),
  ));
}

class BelajarStackWidget extends StatefulWidget {
  @override
  _BelajarStackWidgetState createState() => _BelajarStackWidgetState();
}

class _BelajarStackWidgetState extends State<BelajarStackWidget> {
  var date = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(
                    'https://cdn.pixabay.com/photo/2020/10/04/18/13/mountains-5627143_1280.jpg'),
                fit: BoxFit.fitHeight,
              ),
            ),
          ),
          Positioned(
            right: 40.0,
            top: 100.0,
            child: Text(date.hour.toString() + ':' + date.minute.toString(),
                style: TextStyle(color: Colors.white, fontSize: 45.0)),
          ),
          Positioned(
            right: 40.0,
            top: 150.0,
            child: Text("BelajarFlutter.com",
                style: TextStyle(color: Colors.white, fontSize: 16.0)),
          ),
          Positioned(
            bottom: 48.0,
            left: 10.0,
            right: 10.0,
            child: Card(
              elevation: 8.0,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Column(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text(
                      "Kata Mutiara",
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(
                        top: 0, left: 16.0, right: 16.0, bottom: 8.0),
                    child: Text(
                        "Pendidikan adalah senjata paling ampuh yang bisa kamu gunakan untuk mengubah dunia."),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(
                        top: 8.0, left: 16.0, right: 16.0, bottom: 32.0),
                    child: Text("Nelson Mandela"),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}