Arsitektur aplikasi adalah suatu konsep atau rancangan struktural yang mengatur bagaimana komponen-komponen pada aplikasi saling berinteraksi, berkomunikasi, dan terorganisasi secara sistematis. Arsitektur aplikasi bertujuan untuk memastikan bahwa aplikasi dapat berjalan dengan baik, mudah dikembangkan, diuji, dipelihara, dan ditingkatkan.
Arsitektur aplikasi Flutter terdiri dari:
- Widget
- Gesture
- Concept of State
- Layer
Widget
Widget adalah komponen utama dalam aplikasi Flutter. Widget berfungsi sebagai antarmuka pengguna (UI) yang digunakan untuk berinteraksi dengan aplikasi. Aplikasi Flutter itu sendiri terdiri dari kombinasi beberapa widget. Pada aplikasi standar yang dikembangkan menggunakan Flutter, root widget akan mendefinisikan struktur dari aplikasi, diikuti oleh Material App widget yang menempatkan komponen internalnya di tempat. Di sinilah properti UI dan aplikasi itu sendiri ditetapkan. Material App memiliki widget Scaffold yang terdiri dari komponen yang terlihat (widget) dari aplikasi. Scaffold memiliki dua properti utama, yaitu body dan appbar. Properti ini menampung semua child widget dan di sinilah semua propertinya didefinisikan. Diagram di bawah ini menunjukkan hierarki dari aplikasi Flutter:
Di dalam Scaffold, biasanya terdapat widget appbar, yang seperti namanya menentukan appbar dari aplikasi. Scaffold juga memiliki body di mana semua widget komponen ditempatkan. Ini adalah tempat di mana properti-widget ini diatur. Semua widget ini digabungkan untuk membentuk halaman utama aplikasi itu sendiri. Widget Center memiliki properti Child, yang merujuk pada konten sebenarnya dan dibangun menggunakan widget Text.
Layer
Framework Flutter memiliki kategori yang biasanya dikategorikan berdasarkan tingkat kompleksitasnya dan membentuk hierarki yang menurun. Kategori ini dikenal sebagai lapisan (layer) dan dibangun satu per satu. Lapisan paling atas terdiri dari widget yang khusus untuk sistem operasi perangkat seperti Android atau iOS. Lapisan kedua terdiri dari widget asli Flutter, termasuk komponen-komponen UI struktural, detektor gerakan, state management, dan lain sebagainya. Lapisan ketiga adalah tempat di mana semua penggambaran UI dan state terjadi dan mencakup semua komponen yang terlihat dari aplikasi Flutter. Lapisan berikutnya terdiri dari animasi yang digunakan dalam transisi, aliran gambar, dan gerakan. Diagram di bawah ini memberikan gambaran yang sama:
Gesture
Untuk melakukan interaksi fisik dengan aplikasi flutter, semua bentuk gerakan telah ditentukan sebelumnya dan dapat dilakukan melalui Gesture-Detectors, yaitu widget yang tidak terlihat namun digunakan untuk memproses interaksi tersebut. Gerakan tersebut mencakup mengetuk, menarik, menggeser, dan lain sebagainya. Dengan menggunakan fitur-fitur ini secara kreatif, pengalaman pengguna dari aplikasi dapat ditingkatkan dengan membuatnya melakukan tindakan yang diinginkan dengan mudah.
Konsep dari State
Jika Anda pernah bekerja dengan menggunakan React-js, Anda mungkin sudah familiar dengan konsep state. State hanyalah sebuah object data. Flutter juga bekerja di area yang sama. Untuk mengelola state dalam aplikasi Flutter, digunakan Stateful-Widget. Mirip dengan konsep state dalam React-js, widget-widget tertentu akan di-render ulang ketika state berubah. Hal ini juga menghindari rendering ulang seluruh aplikasi setiap kali state dari widget berubah.
Arsitektur aplikasi Flutter atau framework Flutter secara umum terdiri dari kombinasi widget kecil dan besar yang berinteraksi untuk membangun aplikasi. Semua lapisan di dalamnya penting untuk desain dan fungsinya. Meskipun membangun aplikasi di flutter terlihat sederhana, sebenarnya memiliki komponen yang sama kompleks di inti aplikasinya.
Tutorial sebelumnya : Tutorial Belajar Flutter
Tutorial setelahnya : Cara Menginstal Flutter
Semua Tutorial Flutter : Tutorial Flutter