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

Tujuan pembelajaran

Di minggu pertama ini, mahasiswa akan memahami:

1. Evolusi Mobile Development

Perkembangan aplikasi mobile dimulai dari pendekatan native, yaitu aplikasi yang dibuat khusus untuk satu platform tertentu seperti Android menggunakan Java/Kotlin atau iOS menggunakan Swift/Objective-C. Metode ini memberikan performa yang sangat baik, tetapi biaya pengembangan menjadi lebih tinggi karena satu fitur harus dikembangkan berulang untuk dua platform.

Seiring kebutuhan pasar global, muncul pendekatan hybrid dan cross-platform. Framework seperti Flutter memungkinkan satu source code dapat dijalankan di Android dan iOS. Ini membuat proses pengembangan lebih efisien, cepat, dan konsisten.

2. Native vs Cross-Platform

Flutter masuk dalam kategori cross-platform modern dengan pendekatan UI declarative dan render engine yang kuat. Karena itu, Flutter sangat cocok untuk pengembangan aplikasi produktif, dashboard, e-commerce, layanan publik, dan startup prototype.

3. Apa itu Flutter?

Flutter adalah framework open source yang dikembangkan oleh Google. Flutter memungkinkan pengembang membangun aplikasi mobile, web, desktop, dan embedded device dengan satu codebase. Flutter menggunakan bahasa Dart dan memanfaatkan engine rendering Skia untuk menghasilkan tampilan yang konsisten di platform berbeda.

Flutter memiliki beberapa keunggulan utama:

4. Arsitektur Dasar Flutter

Secara umum, aplikasi Flutter terdiri dari beberapa komponen penting:

Ketika aplikasi Flutter berjalan, UI dibuat dalam bentuk widget tree. Widget adalah unit dasar penyusun interface. Widget dapat disusun, dikombinasikan, dan dibangun ulang saat state berubah.

5. Dart Refresh

Flutter menggunakan Dart sebagai bahasa utama. Dart adalah bahasa modern yang memadukan beberapa konsep pemrograman berorientasi objek dan fungsional. Beberapa konsep dasar yang perlu dikuasai di awal adalah:

Contoh dasar:

void main() {
  String nama = 'Mahasiswa';
  int umur = 20;
  print('Halo $nama, umur Anda $umur tahun');
}

Dalam Dart, fungsi dan kelas sangat penting. Struktur aplikasi Flutter bahkan dibuat berbasis class dan widget.

Catatan penting: materi dasar Dart tidak diperkenankan menggunakan Gen AI. Mahasiswa harus memahami sintaks dasar secara mandiri dan didukung dengan ujian tertutup untuk menilai pemahaman fundamental.

6. Referensi Dart Dasar

Untuk mempelajari Dart dasar secara mandiri, gunakan referensi berikut:

7. Widget dan Element pada Flutter

Gaya pengembangan aplikasi menggunakan Flutter sedikit berbeda dengan aplikasi pada umumnya, di mana UI dibuat menggunakan widget. Widget dapat dianggap seperti balok LEGO: satu komponen kecil dapat digabungkan dengan komponen lainnya menjadi tampilan yang lebih kompleks.

Flutter memiliki dua jenis widget utama:

Widget disusun dalam bentuk tree, dimana satu widget menjadi parent dan widget lain menjadi child. Perubahan state akan memicu rebuild UI secara deklaratif.

8. Praktikum Minggu 1

Tujuan praktikum minggu ini adalah memastikan masing-masing mahasiswa sudah siap mengembangkan aplikasi Flutter dari awal:

  1. Instalasi Git dan verifikasi versi Git
  2. Instalasi VS Code dan extension Flutter
  3. Instalasi Flutter SDK
  4. Instalasi Android Studio dan Android SDK
  5. Verifikasi dengan perintah flutter doctor
  6. Membuat project Flutter pertama
  7. Menjalankan aplikasi pada emulator atau perangkat fisik

Langkah 1: Verifikasi Git

git --version

Jika perintah berhasil menampilkan versi Git, maka instalasi Git Anda sudah benar.

Langkah 2: Verifikasi Flutter

flutter --version

Jika ada masalah pada PATH, pastikan folder Flutter SDK sudah ditambahkan ke environment variable.

Langkah 3: Membuat project Flutter

flutter create nama_aplikasi

Contoh:

flutter create my_first_app

Setelah project berhasil dibuat, masuk ke folder project lalu jalankan:

cd my_first_app
flutter run

Langkah 4: Uji aplikasi

Jika emulator atau perangkat sudah siap, aplikasi default Flutter akan muncul dengan tampilan counter sederhana. Ini menandakan setup environment Anda sudah berjalan dengan benar.

9. Kesalahan Umum dan Solusi

10. Tugas Minggu 1

  1. Buat project Flutter baru.
  2. Jalankan aplikasi pada emulator atau perangkat fisik.
  3. Pastikan flutter doctor menunjukkan environment yang sehat.
  4. Upload project ke repository GitHub pribadi Anda.
  5. Catat hasil setup dan kendala yang Anda temui.

11. Refleksi

Setelah mengikuti minggu pertama, refleksikan pertanyaan berikut:

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