Ilustrasi: https://flutter.dev/

Terakhir diperbarui: 08 Oktober 2023

Penulis: Habibie Ed Dien

Apa itu framework ?

Framework secara bahasa dalam kamus Oxford memiliki beberapa pengertian, yaitu:

[1] the parts of a building or an object that support its weight and give it shape.

[2] a set of beliefs, ideas or rules that is used as the basis for making judgements, decisions, etc.

Dari pengertian nomor satu menjelaskan bahwa framework adalah bagian dari sebuah bangunan atau sebuah objek yang mendukung bobot dan memberikan suatu bentuk. Pengertian dari nomor dua menjelaskan bahwa framework adalah seperangkat panutan, ide atau aturan-aturan yang digunakan sebagai dasar untuk membuat hukum, keputusan, dsb.

Framework (kerangka kerja) adalah sebuah kerangka program yang digunakan untuk membantu developer dalam mengembangkan kode secara konsisten. Adanya framework developer bisa mengurangi jumlah bug pada aplikasi yang dibuat. Karena, fungsi dan variabel yang sudah tersedia di dalam komponen framework tersebut.

Sebelum belajar lebih jauh tentang framework, ada baiknya jika Anda memahami pengertian framework terlebih dahulu. Sesuai dengan namanya, framework adalah kerangka kerja yang digunakan untuk mengembangkan aplikasi berbasis desktop atau aplikasi berbasis website.

Framework sengaja diciptakan untuk membantu developer mengembangkan aplikasi lebih cepat serta tersusun dan terstruktur. Dengan menggunakan framework Anda akan lebih mudah untuk membuat aplikasi, karena Anda hanya perlu menyusun komponen-komponen pemrograman yang sudah jadi. Sehingga developer dan programmer tidak perlu melakukan koding program yang diulang-ulang.

Apa yang Anda akan pelajari

Di codelab ini Anda akan mempelajari tentang:

Apa yang Anda perlu persiapkan

Pengetahuan yang Anda harus dimiliki

Apa itu Flutter?

Flutter adalah sebuah framework open source yang dibuat oleh Google. Google membuat flutter dengan tujuan membangun sebuah framework untuk membuat UI yang modern, native dan reactive yang dapat berjalan di sistem operasi iOS maupun Android. Tidak hanya pada smartphone google juga membuat flutter untuk desktop, web dan embedded device.

Flutter diprogram dengan menggunakan bahasa Dart sebuah bahasa modern yang dapat dicompile ke arsitektur processor ARM atau javascript. Flutter menggunakan Skia 2D rendering engine yang dapat bekerja pada hardware atau software yang berbeda platform.

Dart menggunakan metode compilasi ahead of time (AOT) untuk mengubah kode Dart menjadi kode native untuk sistem operasi yang digunakan, oleh karena itu aplikasi yang dibangun menggunakan flutter memiliki kecepatan yang hampir sama dengan aplikasi native. Dart juga menggunakan konsep just-in-time (JIT) sehingga memungkinkan programmer dapat membuat perubahan pada kode program dan langsung melihat hasilnya melalui fitur hot reaload yang dimiliki Flutter.

Flutter menggunakan Dart untuk membuat User Interface, sehingga memudahkan dalam membuat aplikasi karena menggunakan satu bahasa (Dart) dalam pembuatan UI maupun logika program. Flutter menggunakan pendekatan declarative dimana Flutter membangun UI mengikuti "State" yang dimiliki oleh aplikasi. Ketika state berubah maka UI akan digambar ulang.

Flutter juga memudahkan programmer karena dari satu kode program dapat dikompilasi ke kode native ARM, menggunakan GPU dan mengakses fitur spesifik dari smartphone baik yang menggunakan sistem operasi iOS ataupun yang menggunakan sistem operasi Android. Jadi dengan satu kali membuat program dapat membuat 2 aplikasi yang sama untuk sistem operasi yang berbeda (iOS atau Android).

Widget dan Element pada Flutter

Gaya pengembangan aplikasi menggunakan flutter sedikit berbeda dengan gaya pengembangan aplikasi pada umumnya, di mana UI pada flutter dibuat menggunakan Widget. Widget adalah sebuah konsep dimana UI dapat dianggap sebagai sebuah balok LEGO, sebuah bentuk baru dapat disusun dari beberapa balok dan masing masing kumpulan balok dapat dikombinasikan dengan kumpulan balok lain sehingga membentuk sebuah bentuk baru yang lebih kompleks. Flutter menggunakan widget ini sebagai balok dasar pembangunan aplikasi.

Widget dapat disusun dan dikombinasikan dalam satu layar, sama halnya dengan xml pada pemrograman android native, widget dapat disusun dalam bentuk tree dimana satu widget menjadi parent dan widget lain menjadi child. Masing masing widget dapat diberikan konfigurasi sesuai dengan kebutuhan aplikasi.

Flutter memiliki dua jenis widget yaitu StatelessWidget dan StatefullWidget. Stateless widget digunakan ketika value (state / konfigurasi) dari widget tersebut tidak pernah berubah, dan StatefullWidget digunakan ketika value (state / konfigurasi) dari widget dapat berubah. Baik StatelessWidget maupun StatefullWidget sama sama memiliki sebuah method bernama "build" yang memiliki BuildContext untuk mengatur posisi widget di dalam widget tree detail mengenai widget dan bagaimana membuatnya akan dibahas pada bab selanjutnya.

Instalasi Git

Jika Git belum terpasang pada komputer Anda, silakan unduh di web resminya: https://git-scm.com/ kemudian lakukan instalasi seperti biasa sesuai langkah-langkah pada proses install aplikasi.

Verifikasi Hasil Instalasi Git

Jika telah berhasil melakukan install Git, silakan verifikasi dengan membuka Command Prompt (CMD) atau Git Bash atau Terminal sesuai dengan sistem operasi Anda. Lalu ketikkan perintah berikut:

git --version

Konfigurasi Akun Git di Sistem Operasi

Jika telah berhasil melakukan instalasi Git, maka perlu diset akun secara global untuk mengidentifikasi bahwa akun yang ingin digunakan adalah milik Anda. Lakukan perintah berikut pada CMD, Git Bash atau Terminal.

  1. Ketik perintah git config --global user.name "username Anda" untuk menset username Anda secara global pada sistem.
  2. Lalu perintah git config --global user.email "email@email.com" isi sesuai email yang Anda gunakan di akun GitHub.
  1. Untuk install VS Code dapat unduh pada link berikut: https://code.visualstudio.com/
  2. Silakan lakukan instalasi seperti biasa.
  3. Untuk memasang Flutter Extension, perhatikan gambar berikut:

  1. Pada kolom pencarian plugin, ketik flutter lalu pilih install pada bagian deskripsi plugin.
  1. Download Flutter SDK, Silakan klik tautan berikut dan pilih sesuai dengan Sistem Operasi pada Laptop atau komputer Anda:

https://docs.flutter.dev/get-started/install

  1. Extract file yang di download ke harddisk anda contoh lokasi ke C:\src\flutter ( JANGAN di install ke folder C:\Program Files\ karena membutuhkan akses admin )
  2. (Cara lain untuk install Flutter) atau jika anda sudah menginstall git buatlah folder src di dalam drive C kemudian buka terminal di folder tersebut dan ketik
git clone https://github.com/flutter/flutter.git -b stable
  1. Update Windows PATH tambahkan path menuju folder C:\src\flutter\bin
  2. Pilih Variabel Path > Klik Button Edit

  1. Pilih New > Paste alamat folder letak Flutter SDK Anda di-install.
  1. Silakan unduh dan install Android Studio pada link berikut: https://developer.android.com/studio
  2. Setelah berhasil install, buka Android Studio kemudian jalankan ‘Android Studio Setup Wizard'. Ini akan melakukan pemasangan:
  1. Android SDK terbaru
  2. Android SDK Command-line Tools
  3. Android SDK Build-Tools
  4. Perangkat tersebut dibutuhkan Flutter ketika mengembangkan aplikasi Android
  1. Jalankan flutter doctor di PowerShell untuk memastikan semua telah terinstal dengan benar.
flutter doctor

  1. Jika perintah flutter doctor mengeluarkan hasil seperti gambar di atas maka anda perlu menerima lisensi android SDK dengan mengetikkan perintah berikut ini di terminal.
flutter doctor –android-licenses
  1. Jika tidak ada error lanjutkan ke langkah praktikum selanjutnya, jika muncul error seperti gambar dibawah ini.

6. Lakukan update di Android SDK pada Android Studio dengan menginstall Android Command Line Tools pada android SDK langkah melakukannya lihat gambar selanjutnya.

Selamat Anda telah menyelesaikan Codelab ini sebagai langkah awal untuk pengetahuan tentang dasar-dasar framework flutter dan persiapan praktikum selanjutnya.

Pada codelab berikutnya, Anda akan diperkenalkan dengan konsep widget pada flutter, rendering, composability, immutability, dan widget tree.

Apa selanjutnya?

Silakan cek beberapa sumber belajar lainnya...

Referensi