Panduan Praktis Tutorial BLoC Flutter untuk Pemula
Irhan Hisyam Dwi Nugroho
•
15 September 2025
•
109
Kadang ngoding Flutter bikin bingung saat harus atur state aplikasi. Tenang Warga Bimbingan, MinDi paham banget tantangan yang sering muncul.
BLoC atau Business Logic Component hadir buat ngebantu kamu pisahin logika bisnis dari tampilan. Dengan begitu, kode jadi lebih rapi dan gampang diatur.
Di panduan ini, MinDi bakal bahas tutorial BLoC Flutter khusus pemula dengan cara yang santai dan mudah dipahami. Yuk, baca sampai akhir supaya Warga Bimbingan makin paham cara kerjanya.
Baca juga: Panduan Memilih Bootcamp Mobile Apps Development Terbaik
Apa Itu BLoC Flutter?
BLoC atau Business Logic Component adalah pola state management di Flutter yang membantu memisahkan logika bisnis dari tampilan aplikasi.
Dengan cara ini, widget hanya fokus menampilkan UI, sementara proses pengolahan data dan aturan aplikasi dijalankan oleh BLoC.
Konsepnya sederhana, setiap aksi pengguna akan dikirim sebagai event, lalu diproses di BLoC untuk menghasilkan state baru yang ditampilkan ke UI.
Pola ini membuat kode lebih rapi, mudah dikelola, dan sangat cocok digunakan baik untuk aplikasi kecil maupun aplikasi berskala besar.
Baca juga: Mengenal Struktur dan Komponen Flutter dalam Aplikasi
Persiapan Sebelum Memulai
Sumber: Canva
Sebelum Warga Bimbingan praktek langsung ke tutorial BLoC Flutter, tentu ada beberapa hal yang harus disiapkan lebih dulu.
Tujuannya biar nanti pas ngoding, semuanya lancar tanpa ada error yang bikin waktu kebuang.
Berikut persiapan yang perlu kamu lakukan:
- Install Flutter SDK
Pastikan sudah ada Flutter SDK di laptop atau PC kamu, karena ini fondasi utama untuk bikin aplikasi Flutter.
- Gunakan Editor yang Nyaman
MinDi rekomendasikan Visual Studio Code atau Android Studio karena dua editor ini paling banyak dipakai developer Flutter.
- Tambahkan Dependency flutter_bloc
Buka file pubspec.yaml lalu tambahkan package flutter_bloc agar kamu bisa mulai menggunakan fitur BLoC di project.
- Buat Struktur Folder yang Rapi
Pisahkan folder untuk bloc, models, views, dan widgets. Dengan struktur ini, kode kamu lebih gampang dicari dan di-maintain.
Baca juga: Flutter Widget: Pengertian, Jenis, dan Cara Menggunakannya
Tutorial Implementasi BLoC Flutter
Kita akan membuat Flutter Counter dengan Cubit dari flutter_bloc agar alur pengelolaan state tetap rapi.
Polanya sederhana: UI menampilkan angka, tombol mengubah state melalui Cubit, dan perubahan langsung terefleksi. Ikuti lima langkah berikut dari setup hingga tampilan jadi.
1. Setup dependency
Tambahkan flutter_bloc ke pubspec.yaml supaya Cubit tersedia di project. Tanpa dependensi ini, kita tidak bisa menggunakan BlocProvider dan BlocBuilder. Setelah menambahkan, jalankan flutter pub get agar paket terunduh.
name: flutter_counter description: A new Flutter project. version: 1.0.0+1 publish_to: none environment: sdk: ">=3.8.0 <4.0.0" dependencies: bloc: ^9.0.0 flutter: sdk: flutter flutter_bloc: ^9.1.0 dev_dependencies: bloc_lint: ^0.2.0-dev.0 bloc_test: ^10.0.0 flutter_test: sdk: flutter integration_test: sdk: flutter mocktail: ^1.0.0 flutter: uses-material-design: true |
Baca juga: Panduan Belajar Flutter untuk Membuat Aplikasi Mobile
2. Project Structure
lib/ │ ├── bloc/ │ ├── counter_bloc.dart // logika utama: event → state │ ├── counter_event.dart // daftar event │ └── counter_state.dart // definisi state (angka counter) │ ├── view/ │ ├── pages/ │ │ └── main_page.dart // halaman utama aplikasi │ │ │ └── widgets/ │ └── number_card.dart // widget kecil untuk tampilkan angka │ └── main.dart // entry point aplikasi |
3. Apa itu Bloc di Flutter?
BLoC (Business Logic Component) adalah pola arsitektur di Flutter yang membantu memisahkan logika bisnis dari UI. Jadi, widget hanya fokus tampilkan data, sedangkan BLoC yang urus event (aksi user) dan state (hasil yang tampil).
Di contoh counter app, ketika user klik tombol Increment, event dikirim ke CounterBloc, lalu BLoC mengubah state dan memberitahu UI untuk update. Dengan cara ini, aplikasi jadi lebih bersih dan mudah dikembangkan.
4. Bagaimana Cara Kerja Bloc?
Secara umum, Bloc bekerja dalam alur sederhana:
1. Event → User melakukan aksi (misal klik tombol).
2. Bloc → Menerima event, memproses logika, dan mengubah state.
3. State → UI mendengarkan perubahan state dan menampilkan hasil baru.
Contoh di counter app:
- CounterEvent.increment() dikirim.
- CounterBloc menangani event, menambah angka di state.
- UI langsung update angka di layar.
// Contoh event sederhana abstract class CounterEvent {} class Increment extends CounterEvent {} // Contoh state class CounterState { final int value; CounterState(this.value); } // Contoh bloc class CounterBloc extends Bloc<CounterEvent, CounterState> { CounterBloc() : super(CounterState(0)) { on<Increment>((event, emit) => emit(CounterState(state.value + 1))); } } |
Dengan alur seperti ini, aplikasi jadi terstruktur, mudah diuji, dan gampang dikembangkan lagi.
Kalau Warga Bimbingan mau lihat kode lengkapnya, MinDi sudah siapin repo GitHub:
Ingin Jadi Mobile Developer Profesional?
Setelah memahami dasar-dasar Flutter dan konsep BLoC, kini saatnya kamu beneran melangkah lebih jauh untuk membangun aplikasi mobile yang profesional!
Yuk, ikuti Bootcamp Mobile Developer di dibimbing.id! Di sini, kamu akan belajar langsung mengembangkan aplikasi Android dan iOS dengan Flutter, state management seperti BLoC, hingga integrasi API yang banyak dipakai industri.
Belajar bersama mentor berpengalaman dengan kurikulum yang aplikatif dan berbasis proyek nyata, sehingga kamu bukan hanya paham teori, tapi juga bisa membuat aplikasi yang siap dipakai.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni hingga 96%, peluangmu untuk berkarier sebagai Mobile Developer semakin terbuka lebar.
Jadi, tunggu apa lagi? Hubungi kami dan daftar sekarang disini untuk memulai perjalananmu menjadi seorang Mobile Developer profesional. #BimbingSampeJadi
Referensi
- BLoC Pattern Flutter [Buka]
Tags
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
