Pendahuluan
Ketika berbincang tentang tata letak, maka widget Flexible dan widget Spacer memiliki peranan yang cukup menarik untuk membuat grid antar widget dengan menentukan besaran porsinya masing-masing. Kemudian menjadikan Image sebagai object yang akan mengisi ruang-ruang tersebut.
Pada kesempatan kali ini kita akan belajar bagaimana cara menggunakan Flexible di Flutter, memadukannya dengan Spacer yang dimiliki oleh Flutter sebagia pelengkap. Tidak lupa pula, kita akan belajar bagaimana memanggil image dari internet maupun local file untuk kemudian ditampilkan pada aplikasi Flutter kita.
Baca Juga: Mengenal Widget Flutter #3: List VIew & Text Style
Membuat Grid Dengan Flexible
Ketika berinteraksi dengan proses pembuatan layout, grid memiliki peranan penting untuk membagi space screen sesuai dengan kebutuhan penggunanya. Jika sebelumnya kita telah belajar mengenai widget Row-Column untuk mengatur layout secara vertical maupun horizontal, maka kali ini kita akan belajar bagaimana menggunakan Flexible yang lebih responsive untuk membagi ruang antar widget yang ada.
Skenario yang akan digunakan sebagai contoh untuk memahami cara kerja Flexible adalah dengan membuat 3 buah yang disusun secara horizontal, dimana kotak paling kiri memiliki ukuran lebih kecil dari 2 kotak lainnya. Selanjutnya adalah 3 buah kotak lagi yang akan disusun secara vertical dimana kotak tengah memiliki ukuran lebih besar dari 2 kotak lainnya.
Berikut sketsa singkatnya dari tujuan yang akan kita capai.
Pertama, install Flutter terlebih dahulu dengan command.
flutter create dw_image_flexible_spacer
Buka file lib/main.dart untuk memulai dan buat kerangka berikut ini.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flexible, Image & Spacer"),
),
body: Column(
children: <Widget>[
//KOMENTAR-1 => BARIS HORIZONTAL 3 KOTAK PERTAMA DISINI
//KOMENTAR-2 => BARIS KOTAK TENGAH SECARA VERTICAL DISINI
//KOMENTAR-3 => BARIS KOTAK PALING BAWAH DISINI
],
),
),
);
}
}
Penjelasan: Code di atas masih berupa kerangka dimana children dari Column akan kita isi dengan skenario yang telah digambarkan sebelumnya. Jadi kita tetap menggunakan Row-Column untuk mengatur susunan widget baik secara vertical maupun horizontal, sedangkan Flexible bertindak untuk menentukan besaran ruang yang ingin diberikan kepada widget yang ada di dalam.
Bagian pertama yang akan kita selesaikan adalah 3 buah kotak yang akan disusun mendatar, replace KOMENTAR-1 dengan code berikut.
//KOMENTAR-1
Flexible(
flex: 1, //KITA SET FLEX-NYA 1, JADI 3 BARIS KOTAK INI UKURANNYA PALING KECIL KETIKA KOTAK DIBAWAHNYA SUDAH TERISI
child: Row(
children: <Widget>[
//MISALNYA DISINI, 3 BUAH WIDGET FLEXIBLE DENGAN FLEX 1, 2, 2
//JADI 2 BUAH FLEXIBLE PALING BAWAH AKAN MENGISI RUANG SAMA BESARNYA
//SEDANGKAN FLEXIBLE PALING ATAS AKAN DIBERIKAN RUANG PALING KECIL DARI SISA RUANG YANG ADA
Flexible(
flex: 1,
child: Container(
color: Colors.pink,
),
),
//CONTOH LAIN, JIKA FLEX PADA WIDGET DIBAWAH INI KITA ISI 4
//MAKA DIA AKAN MENGAMBIL RUANG PALING BESAR, DAN SISANYA AKAN DIBERIKAN PADA FLEX 2 DAN 1
Flexible(
flex: 2,
child: Container(
color: Colors.pink[100],
),
),
Flexible(
flex: 2,
child: Container(
color: Colors.pink[300],
),
),
],
),
),
//KOMENTAR-1
//KOMENTAR-2 => BARIS KOTAK TENGAH SECARA VERTICAL DISINI
//KOMENTAR-3 => BARIS KOTAK PALING BAWAH DISINI
Apabila dijalankan maka hasil yang akan kita peroleh tampak seperti gambar di bawah ini.
Selanjutnya adalah membuat kotak yang lebih besar dari kotak lainnya dengan sedikit dekorasi borderRadius pada tiap sisinya, replace KOMENTAR-2 dengan code di bawah ini.
// KOMENTAR-2
Flexible(
flex: 2,
child: Container(
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.amber[200],
borderRadius: BorderRadius.circular(40),
),
),
),
// KOMENTAR-2
//KOMENTAR-3 => BARIS KOTAK PALING BAWAH DISINI
Note: Tidak ada yang perlu dijelaskan dari code di atas karena decoration dari Container sudah dibahas pada artikel sebelumnya.
Bagian terakhir adalah membuat kotak terakhir, replace KOMENTAR-3 menjadi
//KOMENTAR-3
Flexible(
flex: 1,
child: Container(
color: Colors.blueGrey,
),
)
//KOMENTAR-3
Hasil akhir yang kita peroleh adalah seperti gambar berikut
Menampilkan Image Flutter
Widget Image di Flutter menjadi salah satu widget yang wajib diketahui cara penggunaannya, sebab dengannya memungkinkan kita untuk menampilkan gambar pada aplikasi yang sedang di-develop menggunakan Flutter. Ada dua cara dalam menampilkan image menggunakan Flutter, pertama adalah dengan mengambilnya langsung dari internet dan yang kedua adalah secara internal dengan menyimpan file-nya di dalam project Flutter kita.
Sekanarionya adalah 3 kotak paling atas akan diisi dengan image yang diambil dari internet, 1 kotak di tengah diisi dengan image dari local file, dan kotak terakhir diisi dengan image dari internet dengan cara pemanggilan yang berbeda dari sebelumnya.
Masih ingat dengan KOMENTAR-1, KOMENTAR-2, & KOMENTAR-3? Jadi setiap kali saya menyebutkan kode tersebut, replace code-nya dengan source code yang baru agar memudahkan proses penulisan.
Bagian pertama yang akan dikerjakan adalah 3 buah kotak, replace code KOMENTAR-1 menjadi
//KOMENTAR-1
Flexible(
flex: 1,
child: Row(
children: <Widget>[
Flexible(
flex: 1,
child: Container(
color: Colors.pink,
foregroundDecoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://static.vecteezy.com/system/resources/previews/000/229/828/non_2x/vector-beautiful-landscape-illustration.jpg",
),
fit: BoxFit.fill
),
),
),
),
Flexible(
flex: 2,
child: Container(
color: Colors.pink[100],
foregroundDecoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://static.vecteezy.com/system/resources/previews/000/173/109/non_2x/amphitheater-illustration-vector.jpg",
),
fit: BoxFit.fill
),
),
),
),
Flexible(
flex: 2,
child: Container(
color: Colors.pink[300],
foregroundDecoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/113d1046-6bdc-4475-a781-99f6cf7d1acd/001-understand-yourself-large-opt.png",
),
fit: BoxFit.fill
),
),
),
),
],
),
),
//KOMENTAR-1
Penjelasan: Ada dua cara yang akan kita tunjukkan untuk mengambil image dari internet, pertama adalah menggunakan widget NetworkImage() melalui attribute decoration dari Container. Adapun cara kedua menggunakan Image.network(), sedangkan cara penggunaannya akan kita coba pada kotak terakhir.
Selanjutnya adalah mengisi Container tengah dengan image yang telah di-unduh, replace KOMENTAR-2 menjadi
//KOMENTAR-2
Flexible(
flex: 2,
child: Container(
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.amber[200],
borderRadius: BorderRadius.circular(40),
image: DecorationImage(image: AssetImage('images/kotak-2.jpg'), fit: BoxFit.fill),
),
),
),
//KOMENTAR-2
Penjelasan: Mengambil gambar dari local file juga memiliki dua buah widget, pertama adalah AssetImage() melalui attribute decoration dari Container dan cara kedua adalah menggunakan widget Image.asset() . Image.asset() bisa digunakan jika dia bertindak sebagai child dari widget lainnya.
Bagian terakhir adalah mengisi kotak yang paling bawah dengan text dan image, replace KOMENTAR-3 menjadi
Flexible(
flex: 1,
child: Container(
color: Colors.blueGrey,
child: ListTile(
leading: Image.network("https://img.freepik.com/free-vector/vector-illustration-mountain-landscape_1441-72.jpg?size=338&ext=jpg"),
title: Text("DAENGWEB.ID", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),),
)
),
)
Penjelasan: Kita menggunakan ListTile() agar bisa membuat dua buah widget yakni image dan text bersebelahan ketimbang membuat row lagi. Apabila anda ingin mengambil source image-nya dari local file, ganti Image.network menjadi Image.asset, sedangkan value-nya adalah path dari image-nya itu sendiri.
Baca Juga: Mengenal Widget Flutter #2: Container, Stack & Positioned
Memisahkan Widget Dengan Spacer
Memiliki dua buah widget berdampingan baik secara vertical maupun horizontal pasti diapit oleh Row atau Column, sedangkan kedua widget ini memiliki attribute untuk mengatur jarak antar kedua widget yang ada didalamnya menggunakan .spaceBetween dan sejenisnya.
Akan tetapi terkadang kita membutuhkan custom space sesuai keinginan dan tidak berdasarkan jarak yang telah ditetapkan oleh Row-Column, maka dibutuhkan Spacer() sebagai pemisah antar kedua widget yang memungkinkan kita mengatur berapa besaran flex atau jarak yang diinginkan.
Untuk simulasi cara menggunakannya, kita akan memodifikasi kotak paling bawah yang berwarna blueGrey, replace KOMENTAR-3 menjadi
Flexible(
flex: 1,
child: Container(
color: Colors.blueGrey,
child: Row(children: <Widget>[
Flexible(child: Container(color: Colors.yellow,),),
Spacer(flex: 2,),
Flexible(child: Container(color: Colors.red[300],),),
],),
),
)
Penjelasan: Diantara dua buah widget yang ada di dalam row, kita memberikan jarak keduanya dengan ukuran flex 2 yang berarti jaraknya akan lebih besar ketimbang dua kotak yang ada disebelah kiri dan kanan.
Hasil yang akan diperoleh akan terlihat seperti gambar berikut
Comments