Flutter Widget: Pengenalan Container Class pada Flutter

Dalam pembuatan sebuah aplikasi, layout sangat menjadi bagian penting atau bagian dasar sebelum aplikasi tersebut diberikan isi dan desain. Membuat sebuah layout aplikasi di Flutter bertujan agar bisa meletakkan dan memposisikan tata letak seperti teks dan tombol atau bagian lainnya sesuai yang diinginkan.

Apabila anda ingin menambahkan padding, margin, border, dan atau warna background pada suatu widget, maka disinilah fungsi dari Container class pada Flutter widget.

Container bisa diartikan Bahasa Indonesia sebagai wadah yang dimana dapat menyimpan berbagai macam attribute dan menampung berbagai macam fungsi objek yang membuat kotak container bisa menampilkan berbagai macam efek dan hasil didalamnya.

Container widget pada flutter merupakan “Single Child Widget” yang berarti hanya dapat memiliki satu buah child widget saja. Akan tetapi dalam sebuah container kita dapat menempatkan row, column, text atau bahkan container lain. Container widget juga dapat dijadikan sebagai dasar dan serangkaian awal dari suatu layout aplikasi.

Penerapan Fungsi Property di Widget Container.

1. Property Child.

Seperti yang telah disampaikan sebelumnya bawah Container merupakan Single Child Widget. Ciri utama dari tipe tersebut yaitu memilik properti child. Pada properti ini digunakan untuk memuat anakan atau turunan dari Container, yang dapat memuat widget lainnya seperti Text, Column, ListView, dll.

Berikut contoh penerapan penggunaan property child dalam Widget Container Class.

body: Container(
  child: Text(
    'Ayo Belajar Flutter',
  )
),

2. Property Alignment.

Dengan container widget kita dapat mengatur posisi child widget menggunakan fungsi property Alignment diantaranya seperti :

• bottomCenter untuk memindahakan kebawah bagian tengah.
• bottomLeft untuk memindahkan ke bawah bagian Kiri.
• bottomRight untuk memindahkan ke bawah bagian Kanan.
• center untuk untuk memindahkan ke posisi tengah.
• centerLeft untuk memindahkan ke tengah bagian Kiri.
• centerRight untuk memindahkan ke tengah bagian Kanan.
• topCenter untuk memindahkan ke atas bagian Tengah.
• topLeft untuk memindahkan ke atas bagian Kiri.
• topRight untuk memindahkan ke atas bagian Kanan.

Untuk penerapan dan pemasangan fungsi Alignment pada container dapt dilakukan seperti kode dibawah ini :

body: Container(
  alignment: Alignment.bottomCenter,
  child: Text(
    'Ayo Belajar Flutter',
    style: TextStyle(
      fontSize: 20,
    ),
  )
),

Kita bebas memposisikan child widget dalam Container sesuai dengan kebutuhan layout.

3. Property Color

Penambahan property ini untuk membuat wadah / Container memiliki warna latar belakang menyesuaikan dengan keseluruhan bagiannya. Contoh kodenya :

body: Container(
  alignment: Alignment.center,
  color: Colors.purple,
  child: Text(
    'Ayo Belajar Flutter',
    style: TextStyle(
      fontSize: 20,
      color: Colors.white
    ),
  )
),

Pemilihan warna dapat disesuaikan dengan keinginan. Jika anda menggunakan Visual Studio Code maka saat kita mengketik Colors. maka akan muncul pilihan-pilihan warna yang sudah disediakan oleh Flutter.

Apabila Anda menginginkan warna dengan custom bisa menggunakan kode berikut :

color: Color(0xFF42A5F5);

color: Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);

color: Color.fromARGB(255, 66, 165, 245);

color: Color.fromRGBO(66, 165, 245, 1.0);

Tinggal sesuaikan dengan kode warna pilihan yang diinginkan.

4. Property Height dan Weight.

Karena secara default ukuran container akan menyesuaikan dengan body layar aplikasinya maka agar bisa disesuaikan layoutnya bisa diatur dengan menambahkan properti tinggi dan lebarnya.

Karena height dan weight merupakan 2 property yang berbeda maka pastikan gunakan tanda koma setiap akan menambah property baru di dalam Widget Container.

5. Property Margin.

Margin digunakan untuk membuat jarak diantara sisi container dengan widget lainnya sehingga container akan menjorok ke bagian dalam. Property margin bisa digunakan sekaligus kepada 4 sisi wadah dengan menggunakan fungsi EdgeInsets.all().

Penerapan margin dalam Container :

body: Container(
  margin: EdgeInsets.all(20),
  height: 200,
  width: 200,
  alignment: Alignment.topLeft,
  color: Colors.purple,
  child: Text(
    'Ayo Belajar Flutter',
    style: TextStyle(
      fontSize: 20,
      color: Colors.white
    ),
  )
),

Ukuran margin menggunakan satuan pixel. Apabila anda ingin merubah ukuran margin pada sisi tertentu bisa menggunakan kode EdgeInsets.only() sebagai contoh :

margin: EdgeInsets.only(left: 20)

Kode diatas hanya digunakan untuk merubah ukuran margin pada sisi kiri saja dengan ukuran 20.

6. Property Padding

Digunakan untuk menambahkan jarak antara container dengan widget yang ada dalamnya. Sama dengan margin penggunaannya bisa dengan menambahakan fungsi EdgeInsets.all() untuk mengatur ukuran padding sama di ke-empat sisinya.

body: Container(
  padding: EdgeInsets.only(left:20),
  height: 200,
  width: 200,
  alignment: Alignment.topLeft,
  color: Colors.purple,
  child: Text(
    'Ayo Belajar Flutter',
    style: TextStyle(
      fontSize: 20,
      color: Colors.white
    ),
  )
),

7. Property Transform.

Difungsikan untuk melakukan rotasi pada wadah (container) yang dapat dilakukan dengan melakukan dari berbagai sumbu putar misalnya X,Y dan Z yang dimana kita menggunakan fungsi Matrix4 untuk melakukan rotasinya.

Contoh penerapannya seperti demikian.

Container(
  margin: EdgeInsets.all(20),
  transform: Matrix4.rotationZ(0.1),
  height: 200,
  width: 200,
  color: Colors.purple,
),

Dalam fungsi diatas menyatakan bahwa Container diputar pada sumbu Z di titik 0.1

Untuk Mengganti sumbu putarnya tinggal ubah pada bagian rotationZ menjadi rotationX atau rotationY.

8. Property Decoration

Yang terakhir disini Anda bisa menghias kotak Container dengan berbagai macam efek dekorasi seperti misalnya mengubah warna border, memberikan gambar, atau membuat efek bayangan pada kotak containernya.

Ada banyak efek lainnya yang bisa anda tambahkan di sini yang menggunakan fungsi decoration: BoxDecoration()

Pemakaian kodenya seperti ini.

Container(
  decoration: BoxDecoration(
    color: const Color(0xff7c94b6),
    image: const DecorationImage(
      image: NetworkImage('https://i.pinimg.com/originals/91/86/6b/91866b918c9cca0747f483a46943e926.jpg'),
      fit: BoxFit.cover,
    ),
    border: Border.all(
      color: Colors.black,
      width: 8,
    ),
    borderRadius: BorderRadius.circular(12),
  ),
  height: 280,
  width: 200,
  margin: EdgeInsets.all(20)
)

Dari kode diatas ada beberapa penambahan efek dekorasi pada Container diantaranya yaitu pemberian warna border dan menginputkan gambar kedalam Container. Dimana gambar tersebut bersumber dari link gambar di internet yang dimana dibutuhkan fungsi NetworkImage sebagai pemanggilan.

Kesimpulan

Masing masing penerapan property diatas merupakan bagian gambaran umumnya, yang tentu disetiap bagiannya ada detail kode kode yang dibutuhkan untuk menghasilkan property yang lebih detail lagi. Penerapan Property ini dimaksudkan untuk mengatur tata letak pada aplikasi sesuai yang diinginkan.

Sumber :

https://flutter.dev/docs/development/ui/layout

https://api.flutter.dev/flutter/widgets/Container-class.html