Tutorial Fungsi initState pada Flutter untuk Pemula
Irhan Hisyam Dwi Nugroho
•
04 September 2025
•
40
Fungsi initState pada Flutter dipanggil saat widget pertama kali dibuat dan sebelum tampilan widget muncul. Fungsi ini memungkinkan kamu untuk menyiapkan data atau konfigurasi awal.
initState() sangat berguna untuk menginisialisasi hal-hal yang hanya perlu dilakukan sekali, seperti memuat data atau mengatur controller.
Di tutorial ini, kita akan membahas cara menggunakan initState() dengan contoh sederhana. Yuk, ikuti penjelasan lengkapnya!
Baca juga: Panduan Lengkap Flutter Developer Roadmap untuk Pemula
Apa Itu Fungsi initState pada Flutter?
initState() adalah metode yang ada pada StatefulWidget di Flutter yang dipanggil ketika objek State pertama kali dibuat.
Fungsi ini digunakan untuk menyiapkan hal-hal yang diperlukan sebelum widget ditampilkan, seperti menginisialisasi data atau memulai proses yang hanya perlu dilakukan sekali.
initState() dipanggil sebelum metode build(), yang berarti ini adalah tempat yang tepat untuk melakukan setup awal, seperti memuat data dari API atau menginisialisasi controller.
Setelah proses ini selesai, tampilan widget akan diperbarui dengan data atau konfigurasi yang sudah diatur.
Baca juga: Panduan Memilih Bootcamp Mobile Apps Development Terbaik
Kapan Menggunakan initState()?
Sumber: Canva
Saat mengembangkan aplikasi Flutter, initState() digunakan dalam beberapa kondisi tertentu. Warga Bimbingan, berikut adalah beberapa saat yang tepat untuk menggunakan initState():
1. Menginisialisasi Data
Jika kamu perlu memuat data dari API atau database sebelum widget ditampilkan, gunakan initState(). Hal ini memastikan bahwa data sudah tersedia sebelum widget pertama kali dibangun.
Dengan cara ini, pengguna tidak akan melihat tampilan kosong atau data yang belum lengkap saat widget pertama kali dimuat.
2. Setup Pengaturan Awal
initState() adalah tempat yang tepat untuk menginisialisasi controller atau objek yang hanya perlu disiapkan sekali, seperti animation controller atau stream controller.
Ini memastikan bahwa semua pengaturan awal dilakukan dengan benar sebelum widget dirender di layar.
Setelah pengaturan selesai, widget akan langsung berfungsi sesuai harapan tanpa gangguan.
3. Tugas Sekali Saja
Saat kamu membutuhkan proses yang hanya perlu dilakukan sekali, seperti memulai pengambilan data atau mempersiapkan pengaturan, gunakan initState().
Fungsi ini hanya dipanggil sekali sepanjang siklus hidup widget, memastikan bahwa proses ini tidak akan diulang saat widget dibangun ulang.
Ini membantu meningkatkan efisiensi aplikasi dengan menghindari pekerjaan yang tidak perlu.
4. Mengatur Resource
Jika widget kamu membutuhkan resource eksternal seperti stream atau database connection, inisialisasi mereka di initState().
Fungsi ini memberikan tempat yang baik untuk menyiapkan resource sebelum widget digunakan.
Dengan menggunakan initState(), kamu memastikan bahwa semua resource sudah siap dipakai saat widget muncul di layar, memberikan pengalaman pengguna yang lebih lancar.
Baca juga: Mengenal Struktur dan Komponen Flutter dalam Aplikasi
Cara Kerja Fungsi initState()
Fungsi initState() dipanggil hanya sekali ketika objek State pertama kali dibuat, sebelum widget ditampilkan. Ini memungkinkan kita melakukan inisialisasi atau setup awal yang diperlukan oleh widget.
Setelah initState() dipanggil, widget akan dilanjutkan dengan pemanggilan fungsi build(), yang merender tampilan widget ke layar. Fungsi build() adalah tempat untuk menampilkan hasil inisialisasi atau konfigurasi yang telah dilakukan di initState().
Penting untuk diingat bahwa initState() hanya dipanggil sekali selama siklus hidup widget, dan tidak akan dipanggil lagi meskipun widget dibangun ulang. Hal ini memastikan bahwa setup atau konfigurasi hanya dilakukan sekali dan tidak mengulang proses yang sama.
Baca juga: Flutter Widget: Pengertian, Jenis, dan Cara Menggunakannya
Contoh Penggunaan initState()
Setelah memahami initState(), Warga Bimbingan, mari lihat beberapa contoh penggunaannya dalam Flutter.
Berikut adalah beberapa cara praktis memanfaatkan initState() untuk meningkatkan aplikasi kamu:
1. Mengambil Data dari API Sebelum Widget Ditampilkan
Salah satu penggunaan utama initState() adalah untuk mengambil data dari API atau sumber data lainnya sebelum widget dirender. Dengan cara ini, kita bisa memastikan bahwa data sudah tersedia dan siap ditampilkan.
Contoh Kode:
class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { String data = ""; @override void initState() { super.initState(); fetchData(); } void fetchData() async { // Simulasi pengambilan data dari API await Future.delayed(Duration(seconds: 2)); setState(() { data = "Data berhasil diambil!"; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Contoh initState")), body: Center(child: Text(data)), ); } } |
Penjelasan:
Di sini, initState() dipanggil saat pertama kali widget dibuat untuk memulai pengambilan data dari API. Setelah data diambil, aplikasi akan memperbarui tampilan dengan data tersebut.
2. Inisialisasi Controller atau Pengaturan Awal
Selain pengambilan data, initState() sering digunakan untuk menginisialisasi objek seperti controller, animasi, atau pengaturan lainnya yang hanya perlu dilakukan sekali.
Contoh Kode:
class AnimationPage extends StatefulWidget { @override _AnimationPageState createState() => _AnimationPageState(); } class _AnimationPageState extends State<AnimationPage> with SingleTickerProviderStateMixin { late AnimationController _controller; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, ); _controller.repeat(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Animasi dengan initState")), body: Center( child: RotationTransition( turns: _controller, child: FlutterLogo(size: 100), ), ), ); } } |
Penjelasan:
Di contoh ini, initState() digunakan untuk menginisialisasi AnimationController yang mengatur animasi logo Flutter. Animasi ini dimulai otomatis saat halaman pertama kali dibuat.
3. Mengatur Resource atau Koneksi yang Dibutuhkan
Jika widget memerlukan resource eksternal seperti koneksi database atau stream, initState() adalah tempat terbaik untuk menginisialisasi resource tersebut sebelum widget digunakan.
Contoh Kode:
class StreamPage extends StatefulWidget { @override _StreamPageState createState() => _StreamPageState(); } class _StreamPageState extends State<StreamPage> { late Stream<int> _stream; @override void initState() { super.initState(); _stream = Stream.periodic(Duration(seconds: 1), (count) => count); // Membuat stream yang mengeluarkan angka tiap detik } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Stream dengan initState")), body: StreamBuilder<int>( stream: _stream, builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.active) { return Center(child: Text('Nilai: ${snapshot.data}')); } else { return Center(child: CircularProgressIndicator()); } }, ), ); } } |
Penjelasan:
Dalam contoh ini, initState() digunakan untuk menginisialisasi stream yang mengeluarkan angka secara berkala.
StreamBuilder mendengarkan stream ini dan memperbarui tampilan setiap kali ada data baru.
Baca juga: Panduan Belajar Flutter untuk Membuat Aplikasi Mobile
Ingin Menjadi Mobile Developer Profesional?
Setelah memahami cara menggunakan fungsi initState pada Flutter, sekarang saatnya untuk mengasah kemampuanmu lebih jauh!
Yuk, ikuti Bootcamp Mobile Developer di dibimbing.id! Di sini, kamu akan mempelajari Flutter secara mendalam, mulai dari pembuatan aplikasi mobile hingga pengembangan user interface yang responsif.
Belajar langsung dari mentor berpengalaman dengan kurikulum aplikatif yang membantu kamu mempersiapkan diri untuk karier di industri mobile development.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluang kariermu semakin terbuka lebar!
Jadi, tunggu apa lagi? Daftar sekarang disini dan mulai perjalananmu untuk menjadi Mobile Developer profesional! #BimbingSampeJadi!
Referensi
- Flutter - initState() [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.
