PENGEMBANGAN APLIKASI BERGERAK

Materi 2:

Platform & Tools Flutter Get Started

​

•Menjelaskan jenis platform mobile

•Membedakan Native, Hybrid, dan Cross-Platform

•Menjelaskan konsep Flutter

•Menggunakan tools dasar Flutter

•Membuat proyek Flutter pertama

​

Capaian Pembelajaran

Jenis Platform Mobile

Web (based) App

dibangun dengan teknologi Responsive Web menggunakan HTML, CSS, dan Javascript. Bersifat cross platform, dapat dijalankan di platform yang berbeda

​

Mobile App

Native App

sebuah program computer yang berjalan pada sebuah smartphone, tablet, dan perangkat bergerak sejenis lainnya.

​

dibangun, di-compile, dan diinstal untuk platform yang spesifik.

Hybrid

dibangun dengan teknologi Responsive Web menggunakan HTML, CSS, dan Javascript.

​

Cross-Platform Development

Konsep

• Cross-Platform: Pengembangan aplikasi dengan satu codebase yang dapat berjalan di Android dan iOS.
• Memanfaatkan framework yang menyediakan API untuk mengakses fitur native

​

• Flutter (Google)
• Bahasa: Dart
• Kelebihan: UI cepat, performa hampir setara native.
• React Native (Meta/Facebook)
• Bahasa: JavaScript
• Kelebihan: Banyak komunitas, integrasi dengan native.
• Xamarin (Microsoft)
• Bahasa: C#
• Kelebihan: Integrasi kuat dengan .NET ekosistem.

​

Contoh Framework Populer

Kenapa Flutter?

• Dikembangkan dan dikelola oleh Google.
• Mendapat pembaruan dan dukungan komunitas besar.

​

Bahasa Dart yang Modern

Hot Reload

Framework dari Google

• Sintaks mudah dipahami.
• Mendukung object-oriented & asynchronous programming.
• Performa tinggi, compiled to native ARM code.

​

​

• Perubahan kode langsung terlihat di emulator/device tanpa build ulang penuh.
• Mempercepat proses development.

​

UI Berbasis Widget

​

• Semua elemen antarmuka adalah widget.
• Sangat fleksibel untuk membuat tampilan modern & responsif.
• Mendukung Material Design (Google) dan Cupertino (Apple).

Performa Mendekati Native

​

Rendering engine sendiri (Skia) → tidak bergantung pada komponen UI bawaan OS.

Frame rate tinggi (60fps/120fps di device mendukung).

Hampir setara dengan aplikasi native.

​

​

Tools yang Dibutuhkan untuk Flutter Development

• Paket utama untuk mengembangkan aplikasi Flutter.
• Termasuk:
• Framework
• Rendering Engine (Skia)
• Dart SDK

​

• Android Studio
• IDE resmi dari Google, mendukung Flutter Plugin.
• Fitur: UI Designer, Emulator, Debugging.
• Visual Studio Code (VS Code)
• Lebih ringan, fleksibel dengan ekstensi Flutter & Dart.
• Cocok untuk developer yang suka editor simpel tapi powerful.

​

Android Studio atau VS Code

Flutter SDK

• Emulator Android → disediakan oleh Android Studio (AVD).
• Emulator iOS → tersedia di Xcode (macOS).
• Device Fisik
• Bisa menggunakan USB debugging untuk Android.
• Untuk iOS butuh akun developer Apple

​

• Tidak perlu instal terpisah karena sudah termasuk di Flutter SDK.
• Bahasa utama untuk menulis kode Flutter.

​

Dart SDK (Included in Flutter SDK)

Emulator Android/iOS atau Device Fisik

Apa itu Dart pada Flutter

Dart adalah merupakan bahasa pemrograman yang dikembangkan oleh google untuk kebutuhan dalam membuat aplikasi android atau mobile, front-end, web, IoT, back-end (CLI), dan Game. Dart menerapkan konsep pemrograman berorientasi objek (OOP) dimana struktur kode berada dalam class yang didalamnya berisi method maupun variabel. Dart sendiri menggunakan C-Style syntax sehingga mekanisme dart mirip dengan bahasa pemrograman C, java, javascript, dan Swift.

Apa itu Dart pada Flutter

Tipe bahasa pemrograman dart berupa Statically Typed dimana tipe dari variabel diketahui ketika proses compile, ketika membangun aplikasi mobile, dart dicompile kedalam bahasa native agar dapat berjalan di mobile, lalu di transpiler ke javascript agar dapat berjalan di browser.

Transpiler bisa diartikan sebagai source-to-source compiler , yaitu sebuah compiler yang mengambil source code suatu program yang di tulis menggunakan suatu bahasa pemrograman sebagai input dan menghasilkan source code yang equivalent dalam bahasa pemrograman lainnya Dart diterapkan pada framework flutter yang merupakan framework untuk membuat aplikasi mobile yang saat ini ramai diperbincangkan.

1

Instalasi Flutter (Windows)

Download dari flutter.dev.

Ekstrak ke C:\src\flutter.

Tambahkan PATH →

C:\src\flutter\bin.

2

3

4

Cek instalasi →

flutter --version.

Widget dibagi dalam 2 jenis: stateless dan stateful

Stateless Widget adalah widget yang statusnya tidak berubah seperti tombol atau gambar. Seperti namanya, statusnya tidak berubah saat tindakan dilakukan di layar.

Saat widget perlu menahan beberapa status seperti halaman saat ini di Page View, tab yang saat ini dipilih di sebuah Bottom Navigation Bar, Widget stateful adalah pilihan yang tepat untuk dibuat.

​

Stateful Widgets dapat menahan status Widget saat ini. Daripada

menggunakan widget utnuk membangun method, Stateful Widget memiliki state untuk build metode yang terpanggil setiap kali kita secara eksplisit memanggil setState.

​

Widget

PRAKTIKUM

•Buat proyek Hello World

•Ubah teks menjadi nama mahasiswa

•Screenshot hasil aplikasi

•Upload ke LMS

​

Flutter merupakan framework modern yang dikembangkan Google untuk membangun aplikasi mobile, web, dan desktop secara lintas platform hanya dengan satu basis kode menggunakan bahasa Dart. Dengan konsep everything is widget, Flutter memudahkan pengembang dalam merancang antarmuka yang interaktif, konsisten, dan fleksibel. Keunggulan seperti hot reload, performa tinggi berkat kompilasi native, serta dukungan komunitas yang luas menjadikannya salah satu pilihan utama dalam pengembangan aplikasi mobile saat ini. Melalui tools yang relatif mudah diinstal dan digunakan, mahasiswa dapat dengan cepat membuat aplikasi sederhana seperti hingga aplikasi yang lebih kompleks. Dengan memanfaatkan Flutter, pengembangan aplikasi menjadi lebih efisien, hemat waktu, dan tetap menghasilkan aplikasi dengan kualitas mendekati native.

Kesimpulan

THANK YOU!