Guide ini dikhususkan untuk deploy tampilan saja, jika ada external API yang digunakan, maka harus di deploy juga di tempat lain agar bisa tersambung dengan tampilannya.

Alternatif selain menggunakan Netlify, Vercel. caranya hampir mirip.

Intro

Dalam beberapa case kalian pasti ingin mendeploy aplikasi flutter ke web untuk diakses oleh orang lain secara cepat (tanpa harus install Aplikasi). Nah, untungnya Netlify sudah menyediakan fitur untuk mendeploy aplikasi flutter web. Dalam tutorial ini, kita akan coba deploy aplikasi flutter web ke Netlify.

Persiapan

• Pastikan sudah punya akun Github dan mengerti cara kerjanya (Push, Pull, Fork, dll).
• Akun Netlify (jika belum punya, silahkan daftar di Netlify atau login dengan Github).
• Pastikan sudah punya aplikasi flutter web yang sudah jalan di local.

Langkah

• Buka code aplikasi yang mau di deploy kemudian masuk ke bagian web/index.html

• Tambahkan kode ini pada bagian bawah script (sehabis serviceWorkerVersion)

  <script type="text/javascript">
    window.flutterWebRenderer = "html";
  </script>
  

  

• Tambahkan juga INTERNET PERMISSION pada AndroidManifest.xml dan Info.plist (jika ada)

<uses-permission android:name="android.permission.INTERNET"/>

• Push aplikasi flutter web ke Github. untuk contoh ini saya akan push aplikasi flutter web yang sudah saya buat sebelumnya [image]

Pasti tau lah ya cara push ke Github, kalau belum bisa baca di sini.

• Buka Netlify (Login with Github / Sign Up terlebih dahulu)

• lalu klik tombol Site pada Navbar diatas, kemudian Add new site dan Import an existing project

• Pilih icon Github untuk menghubungkan repository yang sudah kita push tadi ke Netlify.

• Disini kita akan diminta untuk mengauthorize Netlify untuk mengakses repository Github kita. Klik tombol Authorize Netlify untuk melanjutkan.

• Cari repository yang sudah kita push tadi, kemudian klik repository tersebut.

• Pada bagian Build Command silahkan masukkan (copas) command ini (Fungsinya untuk mendownload flutter versi stable terbaru sekaligus menginstallnya secara remote)

if cd flutter; then git checkout stable && git pull && cd ..; else git clone https://github.com/flutter/flutter.git && cd flutter && git checkout stable && cd ..; fi && flutter/bin/flutter config --enable-web && flutter/bin/flutter build web --release

• Pada bagian Publish Directory silahkan masukkan (copas) command ini (Fungsinya untuk menentukan folder yang akan di deploy ke Netlify)

build/web

• Kemudian klik tombol Deploy Site untuk memulai proses deploy.

• Jika proses deploy sudah selesai, maka akan muncul link untuk mengakses aplikasi flutter web yang sudah kita deploy.

• (Opsional) Jika ingin mempercantik nama domain, pergi ke Site Overview -> Site Setting -> Site Details -> Change site name -> Masukkan nama domain yang diinginkan -> Save

Selesai 🎉🎉🎉

Untuk melihat aplikasi yang di deploy pada tutorial ini bisa kunjungi sini