Tutorial Membuat Aplikasi Desktop dengan Flutter
Flutter memang framework yang masih muda, namun ia berkembang sangat cecpat. Awalnya dibuat untuk mempermudah pembuatan UI untuk aplikasi mobile (Android dan iOS).
Flutter kini bisa dipakai untuk membuat aplikasi untuk berbagaimacam platform…
Mulai dari aplikasi mobile, web, hingga dekstop.
Baca juga: Cara Membuat Aplikasi Web dengan Flutter.
Pada kesempatan kali ini, kita akan belajar cara membuat aplikasi desktop dengan Flutter.
Mari kita mulai…
Persiapan Awal
Ada beberapa hal yang harus dipersiapkan untuk membuat aplikasi desktop dengan Flutter:
- Git;
- Flutter versi terakhir (^1.6.1);
- VS Code atau Android Studio untuk coding;
- Beberapa Tools dan setup Environment.
Upgrade Flutter ke Versi Terbaru
Pastikan Flutter sudah terinstal di komputermu, silahkan baca:
Setelah itu, lakukan upgrade ke versi terbaru,
gunakan channel master
untuk mendapatkan versi terakhir.
Ketik perintah berikut pada terminal atau CMD:
# ubah channel ke master
flutter channel master
# upgrade versi flutter
flutter upgrade
Tunggulah sampai prosesnya selesai…
Catatan: Channel master menyediakan versi terakhir, tapi versi yang belum stabil. Untuk menggunakan Flutter versi stabil, kita harus mengubahnya kembali ke channel stabil dengan perintah:
flutter channel stable
.
Install VS Code atau Android Studio
Kita bisa menggunakan VS Code atau Android Studio untuk membuat aplikasi dengan Flutter.
Silahkan pilih salah satu…
Setup Tools dan Environmnet
Beberapa tools yang harus dipersiapkan:1
- Linux: GCC versi terakhir (^7.4.0);
- MacOS: Xcode versi terbaru;
- Windows: Visual Studio 2017 atau 2019 dengan dukungan C++ development.
Pada tutorial ini, saya akan menggunakan Linux Kubuntu 18.04. Artinya, saya butuh GCC. GCC (GNU Compiler Collection) adalah paket yang berisi compiler untuk C/C++/Objective-C, dll.
Berikut ini perintah untuk menginstal GCC di Linux:
sudo apt install gcc
Setelah itu ketik gcc --version
untuk mengecek versi
yang terinstal.
Berikutnya kita harus membuat variabel environment
dengan ENABLE_FLUTTER_DESKTOP
dan isinya true
.
Pada Linux, silahkan buat di dalam file ~/.bashrc
dengan export
.
export ENABLE_FLUTTER_DESKTOP=true
Sehingga menjadi seperti ini:
Untuk pengguna Fish Shell, silahkan buat variabel environment
di dalam file .config/fish/config.fish
dengan perintah berikut.
set -x ENABLE_FLUTTER_DESKTOP true
Untuk pengguna Windows, variabel Env bisa dibuat melalui Properties->Advenced->Environtment Variable.
Silahkan lakukan pencarian, kemudian ketik env
.
Kemudian klik Environment Variables…
Buatlah variabel baru dengan nama ENABLE_FLUTTER_DESKTOP
dan
bernilai true
.
Sehingga akan menjadi seperti ini:
Setelah itu, coba ketik perintah berikut:
flutter doctor
flutter devices
Jika muncul seperti ini:
Maka komputer kita sudah siap dipakai untuk membuat aplikasi Flutter.
Membuat Aplikasi Desktop dengan Flutter
Flutter belum menyediakan perintah untuk membuat aplikasi desktop, karena saat ini masih dalam tahap eksperimental.
Mungkin ke depan nanti akan disediakan,
sehingga kita bisa pakai perintah flutter create
untuk
memulai membuat aplikasi desktop.
Untuk saat ini kita bisa memanfaatkan repositori sampel dari Github.
Silahkan clone ke lokal, ketik perintah berikut:
git clone --depth 1 https://github.com/google/flutter-desktop-embedding.git
Kemudian buka folder example
yang ada pada flutter-desktop-embedding
dengan
teks editor VS Code.
Folder example
pada repository flutter-desktop-embedding
adalah
sampel struktur proyek aplikasi desktop dengan Flutter.
Jika kamu akan membuat proyek baru, kamu bisa copy semua isi dari folder ini.
Jika kita perhatikan, struktur direktorinya hampir sama seperti aplikasi mobile dan web.
Pada aplikasi dekstop, terdapat direktori linux
, macos
,
dan windows
. Sedangkan pada mobile ada folder android
dan ios
.
Menjalankan Aplikasi Flutter di Desktop
Tanpa merubah apapun, kita langsung saja coba menjalankan aplikasi Flutter di Desktop. Namun sebelum melakukan itu, ada beberapa ritual yang harus dilakukan.
Pertama, install semua paket yang dibutuhkan.
Caranya:
Buka terminal di VS Code, kemudian ketik perintah:
flutter packages get
Tunggulah sampai prosesnya selesai.
Kedua, install build tools. Ketik perintah berikut:
flutter precache --linux
Untuk kamu yang menggunakan OS selain linux, silahkan ubah flag --linux
menjadi
--windows
untuk Windows dan --macos
untuk pengguna MacOS.
Perintah-perintah di atas diketik sekali saat awal saja.
Selanjutnya kita tidak akan mengetiknya lagi, kecuali
kalau kita instal package baru. Maka harus mengetik
flutter packages get
untuk mengambil paketnya dari internet.
Terakhir, ketik perintah:
flutter run
Untuk menjalankan aplikasi.
Tunggulah sampai prosesnya selesai…
…maka akan muncul jendela baru.
Wow, keren!
Build Aplikasi Flutter
Oke sekarang mari kita build aplikasinya.
Silahkan ketik perintah berikut:
Build untuk Linux:
flutter build linux
Build untuk Windows:
flutter build windows
Build untuk MacOS:
flutter build macos
Tunggu sampai selesai…
Hasilnya:
Akan ada folder baru pada folder build
bernama linux
(sesuai target build) dan di dalamnya terdapat folder
release
yang berisi file binary, library, dan data.
File binary ini bisa langsung kita eksekusi, coba saja klik 2x. Maka aplikasi akan terbuka.
Pada Windows, file ini akan berekstensi .exe
.
Selanjutnya kita bisa distribusikan file binary ini ke user.
Biasanya dilakukan packaging dalam bentuk file .deb
untuk
distro Linux keluarga Debian dan .appimage
untuk semua distro Linux.
Akhir Kata…
Hebat ya, satu framewrok bisa dipakai di berbagai platform.
Sepertinya Flutter menjanjikan…
Flutter untuk membuat aplikasi Web dan Dekstop masih dalam tahap eksperimental, artinya belum siap untuk digunakan pada aplikasi level produksi.
Masih belum matang, tunggu versi yang stabil…