Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Tutorial Flutter #8 – Fitur Wrap Widget

1 min read

Tutorial Flutter #7 - Membahas Wrap Widget

Ilmucoding.com – Pada kesempatan kali ini saya akan membahas tentang salah satu fitur Flutter, yaitu wrap widget.

Flutter memiliki banyak widget yang bisa digunakan untuk membangun aplikasi mobile.

Kita tidak perlu menginstall apapun karena widget-widget tersebut sudah disediakan oleh Flutter.

Oleh sebab itu pengembangan aplikasi mobile dengan Flutter amat mempesona, mudah dan cepat.

Tapi …

Sebelum kita mengetahui Fitur Wrap Widget lebih mendalam, mari ketahui apa itu Wrap Widget.

Apa itu Wrap Widget?

Fitur Wrap Widget mirip dengan Row dan Column pada Flutter, namun dengan tambahan yang mampu menyesuaikan dengan ukuran layar yang tersedia.

By default, fitur wrap widget memiliki layout horizontal.

… namun kita bisa membuatnya secara vertical jika menginginkannya.

Dengan fitur wrap widget kita bisa menyesuaikan ruang di antara children widget yang berdekatan dan garis sesuai dengan kebutuhan.

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.

Biar ada gambaran, kita coba dulu membuat file baru bernama wrap_example.dart di dalam directory lib/screens.

Berikut kodenya:

import 'package:flutter/material.dart';

class WrapExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wrap Example'),
      ),
      body: Center (
        child: Row(
          children: [
            Container( 
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
            Container( 
              width: 100,
              height: 100,
              color: Colors.yellow,
            ),
            Container( 
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container( 
              width: 100,
              height: 100,
              color: Colors.orange,
            ),
            Container( 
              width: 100,
              height: 100,
              color: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}

Jangan lupa update main.dart nya ya.

Cari baris kode:

home: MyHomePage(title: 'Flutter Demo Home Page'),

Ubah menjadi:

// pastikan telah diimport
import 'package:flutter_tutorial/screens/wrap_example.dart';

home: WrapExample(),

Sekarang bila dijalankan hasilnya:

Wrap Widget Flutter Error

Ada garis policy karena container tampil secara horizontal dan melebihi space yang tersedia.

Bandingkan jika kita menggunakan Wrap Widget dan sedikit memodifikasi bagian body: pada wrap_example.dart.

Kodenya seperti ini:

body: Center (
  child: Wrap(
    children: [
      Container( 
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
      Container( 
        width: 100,
        height: 100,
        color: Colors.yellow,
      ),
      Container( 
        width: 100,
        height: 100,
        color: Colors.red,
      ),
      Container( 
        width: 100,
        height: 100,
        color: Colors.orange,
      ),
      Container( 
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ],
  ),
),

Jika di jalankan, maka hasilnya sebagai berikut ini:

Wrap Widget Flutter Success

Penjelasan:

Widget Row kita ubah menjadi Wrap.

Hasilnya sangat berbeda ya.

… dengan menggunakan Wrap, container yang tidak muat dengan ukuran layar akan berpindah ke bawah.

Inilah keunggulan saat menggunakan wrap widget.

Sekilas seperti halaman website yang terlihat responsive.

Kapan Harus Menggunakan Wrap Widget?

Saya 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.

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.