Aplikita Enterprise - Membuat Aplikasi Flutter Pertama Studi Kasus Counter App dengan Penjelasan Mendalam

Membuat Aplikasi Flutter Pertama: Studi Kasus Counter App dengan Penjelasan Mendalam

/in /by

Aplikita.com – Setelah memahami konsep widget serta perbedaan antara StatelessWidget dan StatefulWidget, kini saatnya masuk ke praktik nyata dengan membangun aplikasi pertama menggunakan Flutter. Studi kasus yang akan kita bahas adalah Counter App, yaitu aplikasi sederhana untuk menampilkan angka dan menambahkannya setiap kali tombol ditekan.

Meskipun terlihat sangat sederhana, Counter App sebenarnya dirancang untuk memperkenalkan konsep fundamental Flutter seperti widget tree, state management dasar dengan setState(), serta mekanisme rebuild UI.

Ketika kamu menjalankan perintah:

flutter create counter_app

Flutter secara otomatis menghasilkan template aplikasi dengan contoh counter. File utama yang akan kita fokuskan adalah lib/main.dart.

Struktur dasar aplikasi Flutter dimulai dari fungsi main():

void main() {
runApp(MyApp());
}

Fungsi runApp() akan menjalankan widget utama aplikasi. Dalam template default, MyApp biasanya merupakan StatelessWidget yang membungkus MaterialApp.

Contoh sederhana:

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CounterPage(),
);
}
}

MaterialApp adalah widget root yang menyediakan konfigurasi dasar seperti tema, routing, dan struktur aplikasi berbasis Material Design.

Selanjutnya kita masuk ke bagian utama, yaitu CounterPage yang biasanya dibuat sebagai StatefulWidget karena memiliki state yang berubah.

class CounterPage extends StatefulWidget {
@override
_CounterPageState createState() => _CounterPageState();
}

Di sinilah konsep state benar-benar diterapkan. Class _CounterPageState menyimpan variabel counter dan logika perubahan nilainya.

class _CounterPageState extends State<CounterPage> {
int _counter = 0;void _incrementCounter() {
setState(() {
_counter++;
});
}

Variabel _counter menyimpan nilai angka saat ini. Method _incrementCounter() memanggil setState(), yang memberi tahu framework bahwa state berubah dan UI perlu dibangun ulang.

Inilah inti mekanisme reactive dalam Flutter. Setiap kali setState() dipanggil, method build() akan dijalankan ulang.

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Counter App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Jumlah klik:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
child: Icon(Icons.add),
),
);
}
}

Mari kita bedah struktur ini secara arsitektural.

Scaffold adalah kerangka dasar layout halaman yang menyediakan AppBar, body, dan FloatingActionButton. Body berisi Center yang memusatkan widget Column. Column digunakan untuk menyusun widget secara vertikal.

Teks pertama adalah label statis. Teks kedua menampilkan nilai _counter yang berubah secara dinamis. Ketika tombol ditekan, _incrementCounter() dipanggil, nilai bertambah, setState() dieksekusi, dan widget dibangun ulang dengan nilai terbaru.

Di sinilah kekuatan Flutter terlihat. Dengan bahasa Dart yang mendukung paradigma object-oriented serta null safety, perubahan state dapat dikelola secara terstruktur tanpa manipulasi DOM atau callback yang kompleks.

Dari studi kasus sederhana ini, ada beberapa konsep penting yang bisa disimpulkan:

Pertama, UI di Flutter adalah deklaratif. Kita mendeskripsikan bagaimana tampilan seharusnya berdasarkan state saat ini, bukan bagaimana cara mengubahnya secara manual.

Kedua, setState() adalah mekanisme dasar untuk memberi tahu framework bahwa ada perubahan yang memerlukan rebuild.

Ketiga, widget tree dibangun ulang secara efisien. Flutter tidak merender ulang seluruh layar, hanya bagian yang terdampak perubahan state.

Keempat, pemisahan tanggung jawab antara widget dan state membuat struktur kode lebih terorganisir.

Walaupun Counter App terlihat sederhana, pola ini menjadi dasar bagi aplikasi yang jauh lebih kompleks seperti form validation, integrasi API, hingga manajemen state skala besar.

Jika kamu sudah memahami alur kerja Counter App dari entry point, widget tree, hingga setState(), maka kamu telah memahami inti arsitektur Flutter secara praktis.

Pada artikel berikutnya, kita akan membahas konsep layout secara lebih mendalam, termasuk penggunaan Row, Column, Expanded, Flexible, dan Stack untuk membangun tampilan yang responsif dan profesional.

Views: 40