flutter widget

Tutorial Flutter #8 – Mengenal dan Memahami Stack Widget

Tutorial Flutter #8 – Mengenal dan Memahami Stack Widget

Wildan Fuady

Tutorial mengenal dan memahami stack widget di flutter. Stack Widget merupakan widget yang memungkinkan kita untuk memasang beberapa lapis widget di layar.

Widget ini mengambil banyak anak dan memesannya dari bawah ke atas.

Jadi, item pertama adalah yang paling bawah dan yang terakhir adalah yang paling atas.

Contoh:

 Stack(
  children: <Widget>[
    Bottom(),
    Middle(),
    Top(),
  ],
),

Untuk lebih jelasnya, coba lihat gambar di bawah ini:

Tutorial mengenal dan memahami stack widget di flutter.

Dari gambar di atas maka dapat disimpulkan bahwa urutan kode program menempatkan top di urutan ke 3, sementara dalam hasilnya posisi top berada di atas.

Jadi apapun yang berada di akhir children Stack, maka akan tampil di paling atas.

Contoh Kode:

 import 'package:flutter/material.dart';

class StackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Stack(
        children: <Widget>[
          Container(
            width: 300,
            height: 300,
            color: Colors.blue[200],
          ),
          Container(
            width: 200,
            height: 200,
            color: Colors.red[200],
          ),
          Container(
            width: 100,
            height: 100,
            color: Colors.yellow[200],
          )
        ],
      ),
    );
  }
}

Hasilnya:

Tutorial mengenal dan memahami stack widget di flutter.

Praktik Menggunakan Stack Widget

Ini adalah contoh bagaimana kita menggunakan stack widget untuk membuat tampilan semakin menarik. Berikut contoh hasilnya:

Tutorial mengenal dan memahami stack widget di flutter.

Mari kita membuatnya:

Step #1 – Buat Stack 

Stack(
  children: <Widget>[

  ],
)

Step #2 – Tambahkan Sebuah Background

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('images/new_york.jpg'),
      fit: BoxFit.fitHeight,
    ),
  ),
),

Step #3 – Tambahkan Card widget dan Detail

Card(
  elevation: 8.0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: Column(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(
          "New York",
          style: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."),
      ),
    ],
  ),
),

Step #4 – Atur posisi Card

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(
            "New York",
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
              "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."),
        ),
      ],
    ),
  ),
),

Final Code:

import 'package:flutter/material.dart';

class Stack2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('images/new_york.jpg'),
                fit: BoxFit.fitHeight,
              ),
            ),
          ),
          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(
                      "New York",
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text(
                        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Kesimpulan

Banyak hal yang bisa kita eksplor dengan menggunakan Stack ini. Semangat terus buat berlatih dan cobalah untuk mengenal dan memahami stack widget ini lebih lanjut.

Semoga bermanfaat dan tetap terus belajar.

Tutorial Flutter #7 – Memahami dan Mengenal Expanded Widget

Tutorial Flutter #7 – Memahami dan Mengenal Expanded Widget

Wildan Fuady

Memahami dan mengenal Fitur Expanded Widget di Flutter. Expanded Widget merupakan sebuah widget yang memperluas anak dari Row, Column atau flex sehingga mengisi ruang yang tersedia.

Dengan menggunakan expanded widget, membuat children dari Row, Column dan flex meluas untuk mengisi ruang yang tersedia di sepanjang sumbu utama semisal horizontal maupun vertical.

Jika beberapa anak diperluas, ruang yang tersedia dibagi antara factor flex.

Expanded widget merupakan turunan dari Row, Column atau Flex dan hanya mendukung pada StatelessWidget dan StatefulWidget.

Agar lebih memahami tutorial kali ini saya akan memberikan dua contoh, yaitu:

  1. Expanded Column Widget
  2. Expanded Row Widget

Let’s go!

Expanded Column Widget

Kali ini kita akan mencoba membuat Expanded Widget dengan Column Widget. Jika membahas Column, artinya akan membuat Expanded secara vertical. Berikut kodenya:

import 'package:flutter/material.dart';

class ExpandedColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expanded Column Sample'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            Expanded(
              child: Container(
                color: Colors.amber,
                width: 100,
              ),
            ),
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
          ],
        ),
      ),
    );
  }
}

Hasilnya:

Memahami dan Mengenal Expanded Widget

Expanded Row Widget

Kebalikan dari Column, Row akan memperluas secara horizontal. Berikut contoh kode dan hasilnya:

Kode:

import 'package:flutter/material.dart';

class ExpandedRowExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expanded Row Sample'),
      ),
      body: Center(
        child: Row(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            Expanded(
              child: Container(
                color: Colors.amber,
                height: 100,
              ),
            ),
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
          ],
        ),
      ),
    );
  }
}

Hasil:

Memahami dan Mengenal Expanded Widget

Kapan Harus Menggunakan Expanded Column Widget?

Expanded Column sebaiknya digunakan apabila kita ingin memperluas wilayah widget secara vertical.

Kapan Harus Menggunakan Expanded Row Widget?

Expanded Row Widget sebaiknya digunakan apabila kita ingin memperluas wilayah secara horizontal.

Penutup Mengenal dan Memahami Expanded Widget

Demikianlah tutorial salah satu fitur terbaik Flutter yaitu tentang expanded widget kali ini.

Semoga artikel ini bermanfaat.

Aamiin.