Tutorial Flutter — Implementasi Simple Pattern BLoC
Tutorial Flutter Bahasa Indonesia — Membuat chatting application sederhana dengan pattern BLoC
Hallo semua, kali ini kita akan membahas penggunaan pattern Business Logic Components (BLoC) pada flutter bersama saya, Saga.
BLoC
Sebelumnya yang belum tau apa itu BLoC pada flutter? Secara simplenya BLoC itu adalah design pattern yang membantu untuk memisahkan presentation dengan business logic. Sehingga file kita nantinya jadi lebih tersusun sesuai dengan fungsinya masing-masing.
Jadi sekarang yang akan kita lakukan adalah mencoba mengimplementasikan pattern BLoC pada applikasi simple yang akan kita buat.
Langsung saja kita buat !
1. Setup pubspec.yaml file
Pertama, Kita akan mensetup pubspec.yaml file dulu agar nanti kita bisa menggunakan Image pada applikasi kita kali ini.
Dan tentu saja membuat folder baru dengan nama “assets” untuk menampung Image yang akan kita pakai. Isi saja dengan image yang kalian mau pakai di applikasi kita kali ini.
Note: Perhatikan nama image kalian karena nanti akan kita gunakan
2. Buat Folder Baru
Buat 3 folder baru dengan nama “bloc”, “models” , dan “UI” di dalam lib untuk membuat file kita terstruktur dengan fungsinya masing-masing mengikuti BLoC pattern.
3. Merapihkan main.dart dan Menambahkan home.dart pada UI
Bersihkan main.dart hingga seperti kode diatas.
home untuk sekarang ini kita biarkan saja seperti ini biar main tidak error.
4. Membuat model
Di applikasi simple kita kali ini, model yang akan kita buat hanya satu saja. Buat contact.dart di dalam folder model, declare variable, dan juga tambahkan setter and getter.
5. Membuat bloc.dart
File dart yang berada di dalem folder ini akan menjadi tempat dimana kita akan menulis semua fungsi atau logic dari applikasi yang akan kita buat. Disini saya memberi nama filenya contactBloc.dart dikarenakan semua fungsi yang akan berhubungan dengan model contact kita, akan ditulis di dalam file bloc ini. Agar mempermudah menemukan masalah atau menambah data yang berurusan dengan model contact kita.
Ada 7 BLoC pattern yang bisa kita terapkan di bloc file kita kali ini.
- Import
Import yang perlu dilakukan kali ini hanya dua saja, yaitu async dan model yang berhubungan dengan bloc yang akan kita buat.
2. Mengisi model kita dengan data
Isi model kita dengan data yang kita inginkan, nantinya data ini akan kita gunakan. Khusus untuk _contactImageUrl kita haruskan sama dengan nama image file yang kita taro di dalam folder assets.
Note: Mulai dari sekarang semua contoh yang saya berikan letaknya ada di dalam class ContactBloc.
3. Membuat Stream Controller
Bagi yang belum tau apa itu Stream Controller, secara simplenya Stream Contoller disini akan membungkus jalannya data kita seperti selang. Artinya semua data masuk dan keluar akan melalui Stream Controller ini terlebih dahulu.
Dikarenakan di applikasi simple kita ini hanya ada data yang akan di set dan get dan juga sebuah fungsi untuk mendelete data kita, jadinya kita hanya akan membuat dua stream controller. Satu untuk mengurus masuk keluarnya data ke model kita, dan satu lagi untuk fungsi mendelete data.
4. Membuat Stream Getter
Secara teori kita hanya membuat getter biasa dengan dukungan Steam. Stream dan Sink disini berguna untuk mengontrol masuk dan keluarnya data. Dikarenakan kita akan menghapus data, kita juga membuat getter untuk fungsi menghapus datanya.
Note: Stream itu artinya data keluar dan Sink itu artinya data masuk.
5. Membuat Constructor
Construktor kita kali ini akan berguna untuk meninput data yang sudah kita buat tadi dan juga untuk fungsi mendelete datanya.
6. Membuat Core Function
Applikasi simple kita kali ini hanya memiliki satu fungsi untuk mendelete data yang sudah kita tambahkan. Pada bagian ini tertulis semua fungsi yang berhubungan dengan model yang kita buat yaitu contact. Nama fungsi disini akan di panggil di construktor untuk dijalankan.
7. Membuat Dispose Function
Dispose disini digunakan untuk melepas resources. Semua stream yang kita pakai harus di close. Di Applikasi kita kali ini hanya ada dua Stream Controller yang kita buat.
6. Membuat UI dan Memanggil Data
Pertama kita buat terlebih dahulu dart file di dalam folder UI. Di Applikasi simple kita kali ini kita memiliki tiga layar yaitu chat, contact, dan home. Karena home dan chat dart isinya hanya simple UI saja, kalian bisa copas kode berikut.
- home.dart
import ‘package:BLoC/UI/contact.dart’;
import ‘package:flutter/material.dart’;class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}class _HomeState extends State<Home> {
@overrideWidget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(“Chatting Bloc”)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Text(“This is the chatting Homepage”)],
)),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.message),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => ContactScreen(),
),);},),);}}
2. chat.dart
import ‘package:flutter/material.dart’;class ChatScreen extends StatefulWidget {
@override
_ChatScreenState createState() => _ChatScreenState();
}class _ChatScreenState extends State<ChatScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(“Chat Room”)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Text(“This is the Chat Room”)],
)),);}}
3. contact.dart
Di contact.dart ini kita akan memanggil data yang sudah kita buat dan juga mendelete data yang kita inginkan.
Pertama kita import terlebih dahulu
import ‘package:BLoC/UI/chat.dart’;
import ‘package:BLoC/bloc/contactBloc.dart’;
import ‘package:BLoC/models/contact.dart’;
import ‘package:flutter/material.dart’;Lalu, kita buat Stateful Widget dengan nama ContactScreen dan mereturn Scaffold
class ContactScreen extends StatefulWidget {
@override
_ContactScreenState createState() => _ContactScreenState();
}class _ContactScreenState extends State<ContactScreen> {
@override
Widget build(BuildContext context) {
return Scaffold();
}
}
Kemudian kita tambahkan appbar
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
iconSize: 30.0,
color: Colors.white,
onPressed: () => Navigator.pop(context),
),
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.all(5.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
“Select Contact”,
style: TextStyle(fontSize: 20.0, color: Colors.white),
),
Text(
“5 Contacts”,
style: TextStyle(fontSize: 15.0, color: Colors.white),),],),),],
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
iconSize: 30.0,
color: Colors.white,
onPressed: () => print(‘Search’),
),
IconButton(
icon: Icon(Icons.more_vert),
iconSize: 30.0,
color: Colors.white,
onPressed: () => print(‘More’),),],
),Sebelum Membuat body, Kita akan membuat object terlebih dahulu dan fungsi dispose.
Sekarang Saatnya kita mengerjakan body. Kita akan menggunakan kelas Stream Builder untuk nanti memanggil data yang sudah kita buat. Kita gunakan Stream Controller di object _contactBloc sebagai stream, dan mereturn ListView.Builder. Dengan menggunakan itemCount, kita bisa seperti meloop semua data yang akan kita panggil sebanyak data yang kita punya. Selanjutnya kita akan memangil data-data yang kita inginkan di itemBuilder.
Disini kita akan mereturn GestureDetector agar kita bisa berpindah halaman saat ditekan. Biarkan child Container kosong untuk sementara ini.
Sekarang saatnya kita mengisi Container kosong child dengan data yang sudah kita buat sebelumnya. Untuk merapihkan data yang akan kita pakai, pada kali ini kita akan membuatnya seperti list menggunakan ListTile. ListTile memiliki tiga property yang akan kita buat, yaitu leading, title, dan trailing. Di setiap list kita kali ini di bagian paling kirinya akan ada gambar dari user, jadi yang akan kita buat pertama kali adalah leading. Dengan sedikit hiasan menggunakan CircleAvatar, kita akan memanggil Image yang kita buat disini.
Note: snapshot.data[index].*nama variable data kita* adalah syntax yang kita gunakan untuk memanggil data yang sudah kita buat.
Setelah membuat leading, kita akan lanjutkan mengisi data di tengah list kita dengan membuat title. Disini kita akan memanggil data lainnya yang sudah kita buat yaitu nama contact dan statusnya, dengan syntax yang sama sebelumnya.
Terakhir kita akan membuat trailing dengan sebuah icon yang berfungsi untuk mendelete dengan cara memanggil fungsi yang sudah kita buat sebelumnya di file contactBloc kita.
Note: Syntax disini memanggil fungsi deleteTapSink yang berada pada object contactBloc yang sudah kita buat tadi.
Ini adalah hasilnya kalau sudah dijalankan.
Begitu saja tutorial applikasi sederhana ini yang dibuat dengan pattern BLoC yang ditenagai dengan Stream. Kalau kalian ingin tahu lebih mengenai kenapa kita harus menggunakan atau mengikuti pattern BLoC cari saja di google ya hehe. Secara singkat patern ini akan memudahkan dalam reusable code dan kerapihannya, jadi semakin besar data yang kalian punya dan pengembangannya akan lebih mudah terdata dan teratur.
Sampai jumpa di toturial lainnya ~
Have a nice day!
Imam Bayu Saga, Mahasiswa di Program Profesi CCIT-Fakultas Teknik Universitas Indonesia
