author Ahmad Muhardian

Tutorial Membuat Aplikasi Desktop dengan Flutter


Tutorial Membuat Aplikasi Dekstop 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:

  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, 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…

Upgrade Flutter ke versi terbaru

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.

Versi GCC

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:

Membuat Variabel Environment di Linux

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.

Mencari program env variabel di windows

Kemudian klik Environment Variables…

Mencari program env variabel di windows

Buatlah variabel baru dengan nama ENABLE_FLUTTER_DESKTOP dan bernilai true.

Membuat Variabel Env di Windows

Sehingga akan menjadi seperti ini:

Membuat Variabel Env di Windows

Setelah itu, coba ketik perintah berikut:

flutter doctor
flutter devices

Jika muncul seperti ini:

Flutter Device Linux

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.

Proyek Example aplikasi dekstop dengan flutter

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.

Perbandingan struktur direktori flutter

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.

Menginstal semua paket yang dibutuhkan

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.

Menginstal build tools yang dibutuhkan

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…

Menginstal build tools yang dibutuhkan

…maka akan muncul jendela baru.

Aplikasi desktop dengan Flutter

Wow, keren!

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…

Build Aplikasi Dektop Flutter

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 Aplikasi Dektop Flutter

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…