Bab 1: Dasar-dasar Flutter

Selamat. Dengan membuka buku ini, kamu sudah mengambil langkah pertama menjadi seorang master Flutter. Buku ini akan menjadi panduan kamu dalam belajar Flutter UI Toolkit, sebuah produk dari Google untuk membuat aplikasi mobile, desktop maupun web dari satu kode sumber yang sama.

Delapan bagian di buku ini akan mengajarkan bagaimana cara membuat aplikasi dengan Flutter secara progresif. Kamu akan belajar semua tentang Widget, komponen yang akan kita pakai dalam membuat sebuah aplikasi. Kamu juga akan belajar tentang navigasi dan transisi, bagaimana mengelola state dan mengonsumsi api. Terkahir kamu akan belajar bagaimana deploy aplikasi ke tester dan user.

Buku ini mengasumsikan kamu mengenal pengembangan aplikasi iOS dengan Swift atau Android dengan Kotlin, tapi tidak perlu menguasainya. Meskipun begitu buku ini akan menunjukkan bagaimana cara membangun aplikasi Flutter dari nol, sehingga meskipun kamu benar-benar baru belajar, kamu masih bisa mengikuti materi yang ada.

Apa itu Flutter?

Flutter adalah seubah software development toolkit dari Google untuk membangun aplikasi cross-platform. Aplikasi Flutter terdiri atas package, plugin dan widget - tapi bukan hanya itu saja. Flutter adalah sebuah proses, sebuah filosofi dan sebuah komunitas.

Flutter merupakan cara termudah untuk membangun aplikasi dan menjalankannya dibanyak platform. Kamu bisa jadi lebih produktif daripada yang kamu kira berkat konsep deklaratif Flutter, struktur UI berbasis widget, dan dukungan untuk reactive programming, cross platform abstractions dan virtual machine-nya yang memungkinkan proses hot reloading saat perubahan kode terjadi.

Flutter bukan bahasa pemrograman, Flutter menggunakan Dart. Jika kamu mengenal Kotlin, Swift, Java atau TypeScript, kamu akan cepat terbiasa dengan Dart karena ia adalah bahasa pemrograman berbasis objek dengan sintaks seperti C, sama seperti bahasa-bahasa tadi.

Kamu bisa melakukan kompilasi kode Dart menjadi native code yang membuatnya cepat. Tapi, Dart juga memanfaatkan virtual machine (VM) dengan fitur khusus: hot reload. Kemmapuan ini membuatmu bisa mengubah kode dan melihat perubahanya langsung tanpa melakukan redeploy.

Selama bertahun-tahun programming dijanjikan kemampuan untuk write once and run anywhere; Flutter mungkin salah satu usaha terbaik untuk mencapai tujuan itu.

Benarkah?

Ya, Fluter memang sekeren itu. Kamu bisa membuat aplikasi berkualitas tinggi dengan performa yang baik dan tampilan yang cantik dengan sangat cepat. Buku ini akan membantumu melakukannya.

Dalam beberapa bab awal, kita akan mengenal dasar-dasar UI-nya. Diakhir buku, kamu akan bisa membuat aplikasi yang tidak hanya terlihat bagus tapi juga bekerja dengan baik.

Dan aplikasi ini pun bisa dijalankan baik di desktop maupun di web.

Solusi cross-platform lain mencoba melakukan abstraksi dengan menambahkan layer baru di atas _native UI _. Hal ini membuat developer mendapat pilihan UI yang terbatas denagn performa yang jauh menurun.

Sebaliknya, widget Flutter bekerja parallel dengan native widget berkat Skia (https://skia.org). Ini artinya, toolkit mengontrol bagaimana UI tampil dan bekerja, sehingga memungkinkan behavior yang sama diantara semua platform.

Flutter Untuk Siapa?

Flutter ditujukan bagi developer baru maupun yan berpengalaman yang ingin membuat sebuah aplikasi dengan mudah tanpa banyak masalah. Flutter adalah alat untuk membuat aplikasi yang bisa berjalan di banyak perangkat, baik langsung maupun di masa depan. Flutter juga bisa dipakai bagi seseorang yang lebih suka membangun UI secara deklaratif dengan dukungan yang sangat besar dari komunitas open-source.

Selain itu, Flutter juga bagi developer dengan pengalaman di salah satu platform dan ingin mengembangkan sebuah aplikasi yang bisa berjalan di platform lain. Ini semakin terasa jika kamua dalah seorang web developer dengan penguasaan JavaScript atau TypeScript yang mendalam, tapi belum memulai mobile atau desktop development. Kamu bisa belajar banyak platform sekaligus.

Di sisi lain, jika kamu sudah memiliki aplikasi yang solid di satu platform dengan teknologi native, sebaiknya evaluasi biaya pemeliharaan jangka panjang untuk menentukan apakah masuk akal untuk menggunakan Flutter atau tetap dengan toolkit native.

Keunggulan Flutter

Berikut beberapa keunggulan yang bisa kamu dapatkan dengan menggunakan Flutter:

• Flutter bersifat open-source. Artinya, kamu bisa mengikuti perkembangannya dan mengetahui apa yang akan hadir ke depannya—bahkan mencoba fitur-fitur baru yang masih dalam tahap pengembangan. Kamu juga bisa membuat patch dan package sendiri atau berkontribusi langsung pada kode sumbernya. Selain itu, kamu dapat terlibat dalam komunitas untuk membantu pengguna lain atau ikut berkontribusi dalam menentukan arah masa depan Flutter.
• Flutter menggunakan bahasa pemrograman Dart. Dart (https:/dart.dev) adalah bahasa modern yang berfokus pada pengembangan UI, dan dapat dikompilasi menjadi kode native ARM atau x86, maupun dikompilasi lintas platform ke JavaScript. Bahasa ini mendukung berbagai fitur modern yang sudah dikenal dan diharapkan oleh banyak developer, seperti async/await, serta type inference.
• Salah satu keungggulan terbesar Flutter adalah hot reload. Hot reload memungkinkan kita untuk membuat perubahan di kode lalu mendapatkan UI barunya secara langsung di emulator atau perangkat tanpa harus melakukan kompilasi ulang.
• Kadang, kita akan membuat perubahan yang terlalu banyak sehingga widget tree atau app state tidak bisa langsung di hot reload dengan mudah. Untuk kasus itu, kita bisa melakukan hot restart. Hot restart membutuhkan waktu sedikit lebih lama dari hot reload karena ia memuat ulang semua perubahan, memuat ulang aplikasi dan me-reset state, tapi ini masih lebih cepat dari full restart, yang melakukan kompilasi ulang dan melakukan deploy ulang. Kita perlu melakuakn full restart saat membuat perubahan yang signifikan seperti mengubah apapun terkait state management.
• Fitur restart ini memanfaatkan Dart VM untuk meng-inject kode yang kita ubah, sehingga proses ini hanya tersedia di debug mode tidak di aplikasi production.
• Solusi cross-platform lain menghasilkan aplikasi dengan UI yang biasa saja. Flutter sementara itu sangat atraktif denagn Material Design. Kita juga bisa menggunakan Cupertino bila menginginkan tapilan seperti di iOS. UI Flutter sangat bisa di kostumisasi agar sesuai dengan brand yang dibangun.
• Flutter memiliki banyak animasi dan transisi bahkan bisa membangun widget custom sendiri. Karena widget bersifat composable, kamu bisa berkreasi sekreatif dan sefleksibel mungkin. Contoh, kamu bisa menyimpan video di belakang scroll view atau menyusun toolbar di atas sebuah canvas.
• Banyaknya piliha widget (https://docs.flutter.dev/ui/widgets) akan membuatmu sangat produktif dalam membangun UI dengan sintaksnya yang deklaratif. Widget stateful terhubung dengan data dan secara otomatis menyesuaikan tampilannya saat data mengalami perubahan.
• Jika kamu pernah menggunakan SwiftUI atau Jetpack Compose, kemungkinan sudah familiar dengan banyak konsep di Flutter. Namun, Flutter menawarkan lebih banyak keunggulan dan kamu bisa membangun aplikasi untuk berbagai platform sekaligus.
• Flutter juga dirancang dengan accessibility sebagai prioritas, dengan dukungan bawaan untuk ukuran font dinamis dan screen reader, serta berbagai solusi terbaik terkait bahasa, kontras, dan metode interaksi.
• Integrasi dengan platform sangat penting untuk mengakses library yang ditulis dalam bahasa lain atau memanfaatkan fitur platform yang belum memiliki package Flutter. Flutter mendukung interoperabilitas dengan C dan C++, serta menyediakan platform channels untuk terhubung dengan Kotlin & Java di Android, serta Swift atau Objective-C di iOS.

Sudah Cukup Yakin?

Kalau kamu belum sepenuhnya yakin bahwa Flutter memang sekeren itu, coba lihat Flutter Showcase (https://flutter.dev/showcase) yang menampilkan berbagai aplikasi yang dibangun menggunakan Flutter. Di sana, kamu bisa melihat perusahaan-perusahaan besar yang memakai Flutter serta betapa beragamnya jenis aplikasi yang bisa dibuat dengannya. Aplikasi-aplikasi tersebut mencakup aplikasi yang dinamis dan interaktif.

Aplikasi-aplikasi tersebut membantu kamu menjadi lebih produktif, lebih mudah mendapatkan informasi, berkomunikasi dengan lebih lancar, dan tentu saja, lebih menikmati pengalaman pengguna. Performa Flutter dan integrasinya membuat tool ini menjadi pilihan yang lebih baik dibandingkan aplikasi web atau hybrid untuk sebagian besar aplikasi mobile.

Banyak aplikasi populer dari perusahaan-perusahaan terbesar di dunia yang dibangun menggunakan Flutter, di antaranya:

• Abbey Road Studio
• BMW
• eBay
• Google Pay
• Hamilton
• Tencent
• Toyota
• US Department of Veterans Affairs

Kapan Untuk Tidak Menggunakan Flutter?

Flutter tidak selalu menjadi pilihan terbaik untuk semua aplikasi. Berikut beberapa area di mana Flutter masih berada dalam tahap pengembangan dan terus berevolusi.

Game dan Audio

Pembuatan game dengan Flutter berada di luar cakupan buku ini. Namun, Kodeco (https://www.kodeco.com/) menyediakan berbagai tutorial game Flutter, termasuk beberapa game 2D yang dibangun menggunakan Flame Engine (https://flame-engine.org), sebuah engine yang ditulis dengan Flutter. Flutter juga memiliki casual games toolkit (https://flutter.dev/games) yang bisa membantu kamu.

Untuk game 2D dan 3D yang lebih kompleks, kamu kemungkinan akan lebih memilih membangun aplikasi menggunakan teknologi game engine seperti Unity atau Unreal. Engine-engine ini menawarkan fitur yang lebih spesifik untuk pengembangan game, seperti physics, sprite dan aset, game state amnagement, dukungan multiplayer, dan sebagainya.

Saat ini, Flutter belum memiliki audio engine yang canggih, sehingga aplikasi untuk pengeditan atau mixing audio berada pada posisi yang kurang menguntungkan dibandingkan aplikasi yang memang dirancang khusus untuk platform tertentu.

Aplikasi dengan Kebutuhan SDK Native yang Spesifik

Flutter mendukung banyak, tetapi tidak semua, fitur native. Untungnya, dalam banyak kasus kamu bisa membuat "jembatan" ke kode yang spesifik pada platform tertentu. Namun, jika sebuah aplikasi sangat bergantung pada fitur perangkat dan SDK platform, mungkin akan lebih masuk akal untuk menulis aplikasi tersebut menggunakan tool khusus. Selain itu, Flutter juga menghasilkan aplikasi dengan ukuran yang lebih besar dibandingkan aplikasi native.

Flutter juga mungkin bukan pilihan yang paling praktis jika kamu hanya menargetkan satu platform dan sudah memiliki pemahaman yang sangat mendalam tentang tool dan bahasa di platform tersebut. Sebagai contoh, jika kamu mengerjakan aplikasi iOS yang sangat ter­kustomisasi berbasis CloudKit dan memanfaatkan berbagai fitur native seperti hardware, MLKit, StoreKit, extension, dan sebagainya, proses pemeliharaan serta pemanfaatan fitur-fitur tersebut akan lebih mudah jika menggunakan SwiftUI. Hal yang sama tentu berlaku untuk aplikasi Android yang sangat bergantung pada Jetpack Compose.

Platform lain

Flutter tidak mendukung semua platform yang ada. Platform seperti watchOS, tvOS dan beberapa iOS app extensions memerlukan perhatian khusus yang belum didukung oleh Flutter.

Dalam kasus ini, kamu bisa membangun komponen tadi secara native dan menghubungkannya dengan aplikasi berbasis Flutter. Tergantung kasusnya, mungkin bukan solusi terbaik untuk membuat aplikasi native sekaligus aplikasi dengan Flutter.

Sejarah Flutter

Flutter datang dari sebuah tradisi untuk meningkatkan performa web. Ia dibangun di atas beberapa teknologi open-source yang dikembangkan oleh Google untuk membawa native performance dan modern programming ke web lewat Chrome.

Tim Flutter memilih Dart yang juga dibuat oleh Google atas produktivitasnya. Karena ia object oriented juga memiliki type system dan dukungan akan reactive dan asynchronous programming, membuat Dart lebih ungguh dari JavaScript. Dan yang paling penting, Google menyimpan Dart VM kedalam browser Chrome sehingga memungkinkan aplikasi web yang dibuat dengan Dart untuk berjalan dengan native speed.

Kepingan puzzle terkahir adalah Skia sebagai graphic rendering layer. Skia merupakan produk open-source lain dari Google yang menjadi tulang punggung grafis di Android, browser Chrome, Chrome OS, dan Firefox. Skia berjalan langsung di GPU dengan memanfaatkan Vulkan di Android dan Metal di iOS, sehingga layer grafisnya sangat cepat di perangkat mobile. API yang dimilikinya memungkinkan widget Flutter dirender dengan cepat dan konsisten, terlepas dari platform tempat aplikasi tersebut berjalan.

note

Flutter sedang bermigrasi ke engine rendering baru bernama Impeller, yang menghadirkan performa dan konsistensi yang lebih baik. Impeller memberikan manfaat yang sama seperti Skia, sekaligus menyempurnakannya. Dalam praktiknya, kamu hampir tidak perlu berinteraksi langsung dengan engine ini. Namun, penting untuk mengetahui keberadaannya karena Impeller menjadi engine rendering default untuk semua aplikasi iOS yang dikembangkan menggunakan Flutter versi 3.10 ke atas.

Kamu juga mungkin melihat pesan peringatan saat menjalankan aplikasi. Untuk informasi lebih lanjut atau untuk melaporkan masalah, silakan merujuk ke dokumentasi Impeller (https://docs.flutter.dev/perf/impeller).

Arsitektur Flutter

Flutter memiliki arsitektur modular dan berlapis. Hal ini memungkinkan kita menulis logika aplikasi sekali dan memiliki perilaku yang konsisten di seluruh platform, meskipun engine code di bawahnya akan berbeda tergantung pada platform. Arsitektur berlapis juga mengekspos berbagai kemungkinan untuk kustomisasi, bila diperlukan.

Arsitektur Flutter terdiri dari tiga layer utama:

1. Layer Framework ditulis dengan Dart dan memiliki high-level libraries yang akan kamu pakai dalam membuat aplikasi. Ini termasuk tema UI, widget, layout, animasi, gesture dan lain-lain. Selain framework Flutter ada juga plugin seperti JSON serialization, geolocation, camera access, in-app payments dan lain-lain. Arsitektur plugin ini memungkinkan kamu hanya menggunakanf itur yang dibutuhkan aplikasi.
2. Layer Engine mengandung C++ libraries untuk mendukung aplikasi Flutter di belakang layar. Engine ini memiliki low-level primitives yang dibutuhkan oleh Flutter API seperti I/O, graphic, text layout, accessibility, artisetuktur plugin dan Dart runtime. Engin ini juga bertanggung jawab untuk proses rasterisasi layar Flutter agar cepat di render di layar.
3. Layer Embedder akan berbeda untuk setiap platform dan bekerja dalam proses packaging kode Flutter menjadi aplikasi stand-alone atau menjadi embedded module.

Setiap layer arsitektur terdiri atas banyak sublayer dan module. Dalam proses pengembangan aplikasi secara umum layer framework terdiri atas:

Beberapa sublayar framework Flutter diantaranya:

• UI theme, yang menggunakan salah satu dari dua design language yaitu Material (Android) atau Cupetino (iOS). Layer ini mengatur bagaimana tampilan komponen yang dipakai sehingga kita bisa membuat aplikasi yang mirip dengan aplikasi native.
• Selanjutnya adalah layer *widget** yang akan memakan waktu kita paling banyak saat development aplikasi Flutter. Layer ini lah tempat di mana kita memanfaatkan elemen interaktif yang menyusun sebuah aplikasi.
• Dibawah layer widget adalah layer rendering, yang merupakan abstraksi untuk memproses layout dibelakang layar.
• Layer foundation sementara itu memberikan komponen dasar seperti animasi dan gesture yang membangun layer-layer di atasnya.

Apa yang Akan Kita Pelajari?

Buku ini dibagi menjadi empat bagian:

• Bagian 1 adalah pendahuluan. Kamu sedang ada di sini! Kita akan mengenal Flutter, belajar untuk memulai membuat aplikasi mobile dengan menyiapkan semua yang dibutuhkan. Kita akan membuat sebuah aplikasi sederhana untuk melihat bagaimana bentuk kode dari bahasa pemrograman Dart dan Flutter SDK.
• Bagian 2 membahas semua tentang widget, komponen yang akan kita pakai dalam membuat aplikasi.
• Bagian 3 membahas navigasi dan deep links. Bila widget bisa kita sederhanakan sebagai komponen untuk membuat tampilan sebuah halaman, maka navigasi akan menyatukan halaman-halaman tersebut sehingga user bisa menyelsaikan tugas dengan aplikasi tersebut.
• Bagian 4 membahas state dan data. Kita akan belajar bagaimana menyimpan data dan bekerja dengan local persistence serta networking.
• Bagian 5 menunjukkan bagaimana membangun sebuah aplikasi instant messaging (chat) menggunakan Firebase Cloud Firestore.
• Bagian 6 membahas pentingnya testing di aplikasi Flutter yang kalian buat. Kita akan belajar bagaimana menguji kualitas aplikasi lewat unit dan widget testing.
• Section 7 membahas pentingnya mendukung accessibility agar benar-benar tersedia bagi semua jenis penggua.

Diakhir buku, kita akan mampu memproses sebuah ide dan mengubahnya menjadi sebuah aplikasi yang menarik dan dapat dijalankan di banyak platform serta siap untuk dikirim untuk publikasi ke App Store maupun Play Store.

Bersiap Untuk Memulai

Sekarang setelah kamu memutuskan bahwa Flutter adalah pilihan yang tepat, langkah selanjutnya adalah menyiapkan tools yang diperlukan untuk membangun aplikasi Flutter: Flutter SDK dan Dart compiler. Kamu juga memerlukan sebuah IDE yang dilengkapi Flutter plugin, serta tool untuk membangun dan melakukan deploy ke berbagai platform. Yang terakhir ini berarti Xcode untuk iOS dan Android Studio untuk Android.

Sebagai langkah awal, kunjungi https://flutter.dev/. Portal ini merupakan sumber utama dan paling tepercaya untuk semua instruksi instalasi maupun perubahan API yang terjadi antara waktu buku ini diterbitkan dan saat kamu membacanya. Jika terdapat perbedaan informasi, maka panduan di flutter.dev yang harus dijadikan acuan.

Yang Kamu Butuhkan

• Sebuah komputer. Kamu dapat mengembangkan aplikasi Flutter di Windows, macOS, Linux, atau ChromeOS. Namun, karena Xcode hanya berjalan di macOS, maka Mac diperlukan untuk membangun dan melakukan deploy aplikasi iOS.

  note

  Karena keterbatasan Xcode pada macOS, buku ini menggunakan toolchain Flutter di Mac. Kamu tetap bisa mengikuti di platform apa pun yang kamu pilih — cukup lewati langkah-langkah yang spesifik untuk iOS atau macOS.

• Flutter SDK.

• Editor, seperti Android Studio atau Visual Studio Code.

• Setidaknya satu perangkat. Kamu bisa menjalankan aplikasi di iOS Simulator atau Android emulator, tetapi menjalankan aplikasi Flutter di perangkat fisik akan memberikan pengalaman pengguna yang sesungguhnya.

• Akun developer (opsional). Untuk melakukan deploy ke Apple App Store atau Google Play Store, kamu memerlukan akun yang valid pada masing-masing platform.

Mendapatkan Flutter SDK

Langkah pertama adalah mengunduh SDK. Kamu bisa mengikuti langkah-langkah yang tersedia di flutter.dev atau langsung menuju halaman rilis Flutter (https://docs.flutter.dev/release).

Satu hal yang perlu diperhatikan adalah bahwa Flutter mengelompokkan SDK-nya berdasarkan channels, yaitu cabang pengembangan yang berbeda. Fitur baru atau dukungan platform biasanya akan tersedia terlebih dahulu di beta channel agar bisa dicoba oleh para developer. Ini merupakan cara yang baik untuk mendapatkan akses lebih awal ke fitur-fitur tertentu, seperti platform baru atau dukungan native SDK.

Untuk buku ini dan juga untuk kebutuhan development secara umum, gunakan stable channel. Cabang ini telah melalui proses verifikasi dan pengujian, sehingga memiliki risiko yang lebih kecil untuk mengalami masalah. Ikuti instruksi untuk mengunduh SDK di https://docs.flutter.dev/get-started. Proses instalasinya cukup sederhana, yaitu mengekstrak arsip lalu menambahkan folder bin ke dalam path sistem.

note

Karena proses instalasi berbeda-beda tergantung platform komputer yang digunakan, buku ini tidak akan membahas detail instalasi untuk semua platform. Silakan merujuk ke dokumentasi Flutter di https://docs.flutter.dev untuk panduan instalasi yang lebih lengkap jika kamu menggunakan platform lain untuk pengembangan aplikasi.

Setelah Flutter terpasang, kamu akan membutuhkan akses ke aplikasi command-line Flutter. Untuk melihat apakah kita sudah memasangnya dengan benar, jalankan perintah berikut di terminal:

flutter help

Bila flutter sudah terpasang harusnyakita akan melihat instruksi utamanya:

Manage your Flutter app development.

Common commands:

  flutter create <output directory>
    Create a new Flutter project in the specified directory.

  flutter run [options]
    Run your Flutter application on an attached device or in an emulator.

Usage: flutter <command> [arguments]
...

Subcommand Flutter ini merupakan pintu gerbang ke seluruh tools yang disertakan bersama Flutter. Kamu akan menemukan berbagai tool untuk manajemen project, manajemen package, serta tool untuk menjalankan dan melakukan testing aplikasi. Banyak di antaranya akan dibahas lebih dalam pada bab ini maupun bab-bab selanjutnya.

Mendapatkan Kebutuhan Lainnya

Selain Flutter SDK, kamu juga memerlukan Java, Android SDK, iOS SDK, serta sebuah IDE yang dilengkapi ekstensi Flutter. Untuk mempermudah proses ini, Flutter menyediakan Flutter Doctor, yang akan memandu kamu dalam menginstal semua tools yang masih belum tersedia.

Cukup jalankan:

flutter doctor

Perintah tersebut akan memeriksa sebuah komponen dan dibutuhkan dan memberikan link atau instruksi untuk mendapatkan yang tidak tersedia.

Berikut contohnya:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.4, on macOS 13.5.2 21G5037d darwin-arm, locale en-ID)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2025.1)
[✓] VS Code (version 1.106.3)
[✓] Connected device (5 available)
[✓] Network resources

• No issues found!

Pada contoh di atas Flutter Doctor tidak menemukan masalah, tapi kalau ada, maka kita akan meliaht pesan-pesan yang berkaitan.

Tanda centang hijau menandakan tool yang dibutuhkan tersedia sedangkan tanda x merah menandakan bahwa ia belum tersedia.

Untuk setup yang kamu gunakan, ikuti rekomendasi yang diberikan untuk menginstal apa pun yang masih belum ada. Setelah itu, terus jalankan flutter doctor hingga semua indikator berubah menjadi tanda centang hijau. Kemungkinan besar kamu perlu menjalankannya lebih dari beberapa kali untuk menyelesaikan seluruh masalah yang terdeteksi.

Harap perhatikan, bila kamu menggunakan Windows, maka bagian Xcode mungkin akan selalu merah karena hanya tersedia di macOS.

note

Jika saran dari Flutter Doctor tidak berhasil, kamu mungkin perlu menginstal tools yang masih kurang secara manual, seperti Java atau Android Studio, dengan mengikuti instruksi di situs resmi masing-masing. Lakukan prosesnya satu langkah demi satu langkah. Menyiapkan environment development memang merupakan bagian tersulit dalam bekerja dengan Flutter.

Menyiapkan IDE

Tim Flutter secara resmi mendukung tiga editor: Android Studio, Visual Studio Code, dan Emacs. Namun, ada banyak editor lain yang mendukung bahasa Dart, dapat bekerja dengan Flutter command line, atau memiliki Flutter plugin dari pihak ketiga.

Contoh-contoh dalam buku ini menggunakan Android Studio, tetapi seluruh kode dan contoh tetap dapat dijalankan di editor apa pun yang kamu pilih. Selain itu, Flutter Doctor memang akan meminta kamu menginstal IDE ini untuk mendapatkan seluruh tool Android, sehingga menggunakan Android Studio membuat kamu tidak perlu menginstal editor tambahan. Flutter Doctor juga akan meminta kamu menginstal Flutter plugin untuk Android Studio, yang secara otomatis akan menginstal Dart plugin untuk Android Studio.

Setelah kamu menyelesaikan seluruh langkah yang direkomendasikan oleh flutter doctor, kamu akan memiliki semua yang dibutuhkan untuk membuat aplikasi Flutter di Android Studio. Jika kamu melihat opsi New Flutter Project di jendela sambutan Android Studio, berarti kamu sudah siap untuk mulai.

Mari Kita Coba

Mengunduh seluruh komponen adalah bagian tersulit dalam menjalankan aplikasi Flutter. Berikutnya, kita akan mencoba membangun sebuah aplikasi.

Ada dua cara yang direkomendasikan untuk membuat project baru: melalui IDE atau menggunakan tool command line Flutter di terminal. Pada bab ini, kamu akan menggunakan shortcut dari IDE, dan pada bab berikutnya kamu akan menggunakan command line.

Di Android Studio, klik opsi New Flutter Project. Biarkan pilihan aplikasi default tetap terpilih, lalu klik tombol Next untuk melanjutkan ke layar berikutnya.

Untuk contoh ini, kamu bisa mempertahankan nilai default atau mengubahnya menjadi sesuatu yang lebih sesuai dengan kebutuhanmu. Klik tombol Next untuk melanjutkan.

Opsi-opsi di sini memungkinkan kamu untuk menyertakan dukungan platform tertentu atau mengubah package name. Kamu akan mempelajari lebih lanjut tentang opsi-opsi ini nanti. Untuk sekarang, klik tombol Finish.

Jika kamu menggunakan Visual Studio Code, prosesnya kurang lebih sama. Untuk membuat project baru, pilih View ▸ Command Palette… ▸ Flutter: New Project. Setelah itu, ikuti form pembuatan project yang muncul dengan mengklik langkah-langkahnya.

Dengan editor apa pun yang kamu gunakan, kamu mungkin akan melihat pop-up atau pesan untuk mengunduh atau memperbarui berbagai tools dan komponen. Ikuti petunjuk yang diberikan hingga semua pesan tersebut terselesaikan.

Sebagai contoh, banner di Android Studio ini menampilkan pesan: ‘Pub get’ has not been run. Mengklik Get dependencies akan menyelesaikan masalah tersebut.

Template Project

Project baru dengan pengaturan default akan sama di kedua editor. Ini adalah demo Flutter sederhana. Aplikasi demo tersebut menghitung berapa kali kamu menekan sebuah tombol.

Untuk mencobanya, pilih perangkat yang terhubung, iOS simulator, atau Android emulator.

Jalankan aplikasi dengen klik icon Run:

Mungkin akan memakan waktu beberapa menit untuk melakukan kompilasi dan menjalankannya untuk pertama kali. Setelah selesai, kamu akan melihat hasilnya.

Selamat, kamu sudah berhasil membuat aplikasi Flutter pertamamu! Klik pada tombol yang ada di kanan bawah untuk melihat angkanya berubah di label.

Semua kode untuk aplikasi ini ada di lib/main.dart. Silahkan lihat-lihat dulu isinya.

Sepanjang sisa buku ini, kamu akan mendalami aplikasi Flutter, widgets, state, themes, dan berbagai konsep lainnya yang akan membantu kamu membangun aplikasi yang indah.

Bonus: Hot Reload

Kamu akan mempelajari lebih banyak tentang hot reload di bab-bab berikutnya, tetapi fitur ini terlalu keren untuk tidak dicicipi sedikit sejak sekarang. Sebelum mulai, atur jendela IDE-mu agar kamu bisa melihat IDE serta simulator atau emulator yang sedang menjalankan aplikasi secara bersamaan.

Di file main.dart, temukan Text widget berikut:

Text(
    'You have pushed the button this many times:',
),

Inilah bagian yang tidak terlalu rumit: cukup simpan file-nya. Sekarang, lihat aplikasi yang sedang berjalan dan perhatikan perubahannya.

Dan voilà! Perubahanmu dimuat ulang tanpa harus menghentikan aplikasi dan melakukan redeploy. Terkadang, menyimpan file tidak secara otomatis memicu hot reload. Jika itu terjadi, cukup tekan ikon Hot Reload yang berbentuk petir di toolbar.

Jika kamu menjalankan aplikasi di beberapa simulator/emulator secara bersamaan, maka kamu perlu klik hot realod di setip tab run.

Poin-Poin Penting

• Flutter adalah software development toolkit dari Google untuk membangun aplikasi cross-platform menggunakan bahasa pemrograman Dart.
• Dengan Flutter, kamu dapat membangun aplikasi berkualitas tinggi yang memiliki performa baik dan tampilan menarik dalam waktu yang relatif singkat.
• Flutter ditujukan baik untuk developer pemula maupun berpengalaman yang ingin mulai membangun aplikasi mobile dengan overhead yang minimal.
• Instal Flutter SDK dan tools terkait dengan mengikuti panduan yang tersedia di dokumentasi Flutter (https://flutter.dev).
• Perintah flutter doctor membantu kamu memasang dan memperbarui tools Flutter.
• Buku ini menggunakan Android Studio sebagai IDE untuk pengembangan Flutter.

Langkah Selanjutnya

Lokasi utama untuk segala hal tentang Flutter adalah flutter.dev (dan dart.dev untuk bahasa Dart). Jika kamu mengalami kendala pada salah satu langkah instalasi, kunjungi situs tersebut untuk mendapatkan panduan terbaru.

Situs flutter.dev berisi dokumentasi resmi dan halaman referensi (https://flutter.dev/docs). Inilah sumber utama kamu untuk mendapatkan informasi yang lengkap dan selalu terbaru mengenai SDK.

Selain itu, ada juga komunitas Flutter (https://flutter.dev/community), yang menyediakan tautan ke berbagai komunitas Flutter resmi di beragam platform media sosial. Secara khusus, kamu disarankan untuk mengunjungi channel YouTube Google Developers’ Flutter (https://www.youtube.com/c/flutterdev/).

Terakhir, tersedia di kodeco.com buku Dart Apprentice: Fundamentals (https://www.kodeco.com/books/dart-apprentice-fundamentals), yang merupakan buku pendamping untuk mempelajari Dart lebih dalam. Untuk mulai dengan cepat, kamu bisa membaca artikel gratis Dart Basics (https://www.kodeco.com/4482551-dart-basics) atau mengikuti video course Programming in Dart: Fundamentals (https://www.kodeco.com/4921688-programming-in-dart-fundamentals).