Ahmad Muhardian · 22 May 2019

Tutorial Membuat Aplikasi Desktop dengan Flutter

---

#Flutter #Dart #Linux #Windows #MacOS

Flutter memang framework yang masih muda, namun ia berkembang sangat cepat. Awalnya dibuat untuk mempermudah pembuatan UI untuk aplikasi mobile (Android dan iOS).

Flutter kini bisa dipakai untuk membuat aplikasi untuk berbagai macam platform…

Mulai dari aplikasi mobile, web, hingga desktop.

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:

1. Git;
2. Flutter versi terakhir (^1.6.1);
3. VS Code atau Android Studio untuk coding;
4. Beberapa Tools dan setup Environment.

Upgrade Flutter ke Versi Terbaru

Pastikan Flutter sudah terinstal di komputermu, silakan baca:

• Cara Install Flutter di Linux

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.

Silakan pilih salah satu…

• Menggunakan VS Code untuk Coding Flutter
• Menggunakan Android Studio untuk Coding Flutter

Setup Tools dan Environment

Beberapa tools yang harus dipersiapkan:¹

• 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, silakan buat di dalam file ~/.bashrc dengan export.

export ENABLE_FLUTTER_DESKTOP=true

Sehingga menjadi seperti ini:

Untuk pengguna Fish Shell, silakan 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->Advanced->Environment Variable.

Silakan 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.

Silakan 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 desktop, terdapat direktori linux, macos, dan windows. Sedangkan pada mobile ada folder android dan ios.

Menjalankan Aplikasi Flutter di Desktop

Tanpa mengubah 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, silakan 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.

Silakan 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 framework bisa dipakai di berbagai platform.

Sepertinya Flutter menjanjikan…

Flutter untuk membuat aplikasi Web dan Desktop masih dalam tahap eksperimental, artinya belum siap untuk digunakan pada aplikasi level produksi.

Masih belum matang, tunggu versi yang stabil…