Tutorial Flutter #6 – Wrap Widget

Pada edisi seri tutorial Flutter kali ini saya akan membahas tentang wrap widget. Flutter memiliki begitu banyak widget-widget yang bisa digunakan untuk membuat aplikasi mobile. Salah satunya yang menurut saya perlu Anda tahu adalah wrap.

Apa itu Wrap Widget?

Wrap widget mirip dengan Row dan Column namun dengan tambahan yang mampu menyesuaikan dengan ukuran layar yang tersedia. By default, wrap widget memiliki layout horizontal. Namun kita bisa membuatnya jika menginginkan layout secara vertikal. Dengan wrap widget kita bisa menyesuaikan ruang di antara children widget yang berdekatan dan garis sesuai dengan kabutuhan.

Bagaimana Wrap Widget Bekerja?

Biasanya layout yang tidak cukup atau melebihi garis pembatas akan mendapatkan tampilan warning. Meski bisa saja digunakan tetapi tidak bagus untuk ditampilkan dalam suatu aplikasi. Oleh sebab itu gunakanlah wrap widget agar widget-widget yang ada di dalam turunan wrap widget bisa otomatis mengambil baris baru.

Contohnya:

Pada gambar di atas terlihat sangat jelas bahwa Widget Container berwarna merah secara otomatis mengambil baris baru. Inilah keunggulan saat menggunakan wrap widget.

Contoh Source Code Flutter Wrap Widget

Belajar tanpa disertai praktik merupakan hal yang kurang lengkap. Oleh sebab itu Anda akan melihat dan membaca source code ini untuk mengimplementasikan wrap widget.

Berikut source codenya:

 import 'package:flutter/material.dart';

class WrapLayoutExample extends StatelessWidget {
  
  @override 
  Widget build(BuildContext context){

    return Container(
      color: Colors.green,
      child: Column( 
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Wrap(
            spacing: 8.0,
            runSpacing: 4.0,
            children: <Widget>[
              Container(
                color: Colors.yellow,
                height: 100.0,
                width: 100.0,
              ),
              Container(
                color: Colors.red,
                height: 100.0,
                width: 100.0,
              ),
              Container(
                color: Colors.white,
                height: 100.0,
                width: 100.0,
              ),
              Container(
                color: Colors.brown,
                height: 100.0,
                width: 100.0,
              ),
              Container(
                color: Colors.grey,
                height: 100.0,
                width: 100.0,
              ),
            ],
          )
        ],
      ),
    );

  }
} 

Penjelasan:

1. Penamaan Class. Saya memberikan contoh nama class WrapExample. Silahkan Anda menyesuaikan.
2. Struktur yang saya gunakan ini tidak menggunakan appBar maupun bottomNavigation. SIlahkan tambahkan jika Anda memerlupannya.
3. Memanggil return Container yang memiliki child Column. Tujuannya karena di Column memiliki property children. Sehingga kita bisa menambahkan beberapa widget.
4. Kemudian menggunakan widget Wrap yang memiliki turunan container. Jika diperhatikan tanpa menggunakan Wrap maka layoutnya akan berantakan.

Kapan Harus Menggunakan Wrap Widget?

Saya menyarankan Anda menggunakan wrap widget ketika ada tumpukan widget yang begitu banyak, baik secara horizontal maupun vertikal. Dengan wrap maka tampilan tidak akan terpengaruh dan bisa menyesuaikan ukuran layar. Kalau di websiste itu namanya mobile responsive.

Penutup

Demikianlah ulasan saya tentang wrap widget di edisi kali ini. Semoga bermanfaat khususnya untuk Anda yang sedang memperdalam Flutter dan umumnya buat Anda semua. Aamiin.