01.Flutter - Perkenalan



Flutter ?

update april 2020, source code di github dan code dibuat dengan Flutter 1.12.13+hotfix.9

Flutter bukanlah bahasa pemrograman (seperti c, c++, js, dll). Flutter adalah sebuah SDK untuk mengembangkan aplikasi mobile, desktop, web, Embedded. Awalnya Flutter dikembangkan oleh Google untuk membuat aplikasi native yang dapat berjalan pada perangkat Android dan IOS, kemudian berkembang mengearah ke desktop, web dan embedded https://developers.googleblog.com/2019/05/Flutter-io19.html

Keuntungan menggunakan Flutter adalah developer dapat membuat aplikasi yang berjalan pada Android dan IOS menggunakan kode yang sama. Flutter dikembangkan untuk produktivitas tinggi, sehingga applikasi bisa cepat dibuat, beberapa keuntungan mengembangkan aplikasi dengan Flutter SDK:


  • Kita dapat mengganti kode dan langsung bisa melihat hasilnya di emulator berkat adanya fitur Hot Reload.
  • Adanya UI Widget yang langsung disediakan oleh flutter dengan standart Google Material Design.
  • Support IDE VSCode, IDE selain Android Studio sehingga tidak terlalu membebani komputer (Android Studio cukup memakan memory yang banyak).
  • Kualitas Widget yang tinggi, sehingga ketika kita mengembangkan aplikasi android, widget akan terlihat seperti Android App yang normal, begitu juga pada saat kita mengembangkan aplikasi IOS.
  • Flutter bersifat bebas dan kode terbuak (free & open source).


Untuk instalasi flutter bisa dilihat di https://flutter.dev/docs/get-started/install

Setelah selesai melakukan instalasi, jalan perintah: flutter doctor -v, hasilnya sebagai berikut:

flutter doctor -v


Flutter akan memberitahu apa saja yang sudah diinstall dan belum.

Aplikasi Pertama Flutter.


Ketika kita membuat sebuah project baru, secara default flutter akan membuatkan aplikasi 'counter' sederhana yang mendemonstrasikan penggunaan event (state) sehingga kita bisa berinteraksi dengan sebuah tombol, dimana ketika tombol itu kita tekan, maka akan membuat nilai dari counter tersebut bertambah.

Langkah-langkah untuk membuat project di flutter (VSCode):

1. Buka VSCode, kemudian tekan Ctrl+p (akan membuka tempat mengetikan perintah)



2. Ketik Flutter, pilih Flutter: New Project
3. Isi nama projectnya, dan tentukan lokasi projectnya.



4. Jalankan Emulator, klik No Devices pada sudut kanan bawah editor VSCode, maka akan muncul pilihan emulator yang sudah kita buat (jika belum ada buat terlebih dahulu emulatornya).



5. Buka Terminal pada VSCode dengan menekan ctrl+`, kemudian ketik perintah Flutter Run, Hasilnya akan terlihat pada Emulator.


Hot Reloading & Hot Restarting

Salah satu fitur dari Flutter adalah kemampuannya melakukan hot reload code, terjemahan dokumentasi resminya kira-kira seperti ini:

"Hot Reload pada Flutter membantu kita lebih cepat dan mudah dalam ber-experimen, membangun UI, menambahkan fitur-fitur, dan memperbaiki bugs (kesalahan). Cara kerja hot reload adalah dengan meng-inject kode secara langsung pada Dart Virutal Machine (VM) pada saat sedang berjalan. Setelah VM memperbaharui (update) kelas-kelas dengan field-field dan fungsi-fungsi terbaru, Flutter secara otomatis membangun uang struktur widgetnya, sehingga kita langsung bisa melihat perubahan yang kita lakukan"

Hot restarting adalah memuat ulang kode yang telah dirubah kedalam Dart VM dan me-restart applikasi pada emulator. Ini adalah hal yang paling aman untuk dilakukan.

Perbedaan Hot Reloading dan Hot Restarting adalah jika kita menggunakan Hot Reloading, kita seolah-olah memperbaharui bagian2 dari aplikasi (tidak semua aplikasi) sehingga kita langsung dapat melihat perubahannya, tetapi jika kita mematikan aplikasi, maka perubahan yang kita lakukan tidak akan terlihat, karena hanya bersifat sementara, berbeda dengan Hot Restarting, aplikasi yang kita buat akan dibuild restart ulang, artinya kode terbaru akan diinstallkan pada emulator, sehingga perubahan yang kita lakukan akan tetap tersimpan pada emulator.

Untuk mendemonstrasikan fitur hot reloading, gantilah kode pada baris 23 -> home: MyHomePage...


Kemudian pada terminal, tekan r (hot reloading, R hot restart), maka aplikasi pada emulator akan langsung berubah.

01.Flutter - Perkenalan 01.Flutter - Perkenalan Reviewed by jc on July 10, 2019 Rating: 5

No comments:

Powered by Blogger.