author Ahmad Muhardian

Tutorial Membuat Aplikasi Web dengan Flutter untuk Pemula

Tutorial Flutter untuk membuat web

Flutter awalnya dibuat untuk memudahkan pembuatan UI pada aplikasi mobile.

Tapi kini sudah semakin berkembang…

Flutter tidak hanya untuk Android dan iOS, Flutter kini juga bisa digunakan untuk membuat aplikasi web dan desktop.

Platform Flutter Saat ini

Jadi…

Satu code base, bisa di-build ke berbagai platform.

Enak kan, nggak perlu capek-capek ngoding.

Project Hummingbird: Flutter di luar Mobile

Flutter untuk web memang pernah disinggung pada acara Flutter Live di bulan desember tahun 2018 lalu.

Mereka menyebutnya project Hummingbird…

Project Hummingbird

Tujuan dari project ini untuk membuat Flutter agar bisa digunakan untuk membuat aplikasi di luar mobile.

…dan di acara Google IO 2019, diumumkan lagi rilis versi technical preview dari project ini.

Itu artinya, kita sudah bisa mencobanya. Yey! 🎉

Tapi sebelum itu, kita pahami dulu bagaimana prinsip kerjanya.

Berikut ini adalah arsitektur, bagaimana aplikasi Flutter untuk Desktop bekerja.

Flutter untuk desktop

Bagian paling atas adalah kode dari aplikasi kita. Lalu di bawahnya akan menggunakan Flutter dan Flutter Engine untuk membangun aplikasi.

Nah Platform-spesific embeder ini tugasnya membungkus aplikasi agar bisa dijalankan di berbagai platform seperti Linux, Windows, Mac OS, dan Chrome OS.

Lalu untuk web bagaimana?

Hampir sama dengan yang desktop…

Flutter untuk Web

Flutter untuk web menggunakan Dart2js untuk kompilasi kode Flutter menjadi Javascript. Sehingga akan bisa dijalankan pada web browser.

Alur kerja Flutter untuk Web
Alur kerja Flutter untuk Web

Tugas kita cukup fokus pada kode aplikasi di bagaian paling atas.

Untuk bagian yang bawah, biarkan Flutter yang urus.

Baiklah, sekarang mari kita coba…

Persiapan Awal untuk Membuat Web dengan Flutter

Sebelum kita mulai, pastikan kamu sudah menginstal Flutter dan Dart di komputermu.

Silakan baca ini:

Setelah itu, Upgrade Flutter ke versi terbaru. Ketik perintah berikut:

flutter upgrade

Tunggulah sampai prosesnya selesai…

Menjalankan perintah flutter upgrade

Ini mungkin akan memakan waktu lama jika koneksi internetmu lambat, karena akan men-download ulang Flutter yang ukurannya sekitar 120MB.

Setelah upgrade selesai, coba periksa versi yang terinstal dengan perintah flutter --version.

Versi Flutter

Membuat Proyek Baru

Berikutnya silakan buat proyek baru. Kita akan menggunakan VS Code.

Silakan buka VS Code, lalu tekan Ctrl+Shift+p, lalu ketik flutter dan pilih New Web Project.

Membuat Proyek Flutter di VS Code

Jika muncul seperti ini…

Upgrade Extension

Langsung saja klik Update.

Setelah itu isi nama proyeknya.

Nama Project Flutter

Tunggulah sampai proyeknya selesai dibuat…

Menjalankan pub get

Setelah itu kita membutuhkan paket webdev untuk menjalankan server.

Silakan buka terminal pada VS Code, tekan Ctrl+` (backtik). Lalu ketik perintah berikut:

flutter packages pub global activate webdev
flutter packages upgrade

Tunggulah sampai prosesnya selesai.

Menginstal paket dengan pub get

Memahami Struktur Proyek Flutter untuk Web

Jika kita perhatikan, struktur direktori proyek flutter untuk web seperti pada android dan iOS.

Struktur direktori proyek Flutter

Bedanya, di sini ada direktori web. Kalau di flutter untuk mobile ada direktori ios dan android.

  • 📄 lib/main.dart adalah file tempat kita menulis kode untuk aplikasi.
  • 📄 web/main.dart adalah file entri point untuk aplikasi.
  • 📄 web/index.html adalah file HTML yang akan digunakan sebagai wadah aplikasi.

Menjalankan Web Server

Oke sekarang tanpa mengubah apapun, kita coba jalankan server-nya.

Ketik perintah berikut:

webdev serve

Tunggu sampai muncul seperti ini:

Menjalankan server webdev

Sekarang coba buka web browser dan arahkan ke alamat tersebut (https://localhost:8080/).

Maka hasilnya:

Menjalankan server webdev

Wow, keren!

Wow keren

Nah untuk mengaktifkan hot reload atau live-reload, kita bisa pakai perintah berikut:

webdev serve --live-reload

#atau

webdev serve --auto restart

Tunggu sampai muncul seperti ini:

Menjalankan server dengan live reload

Berikutnya refresh browser, kemudian cobalah membuat sebuah perubahan pada file lib/main.dart.

Menjalankan server dengan live reload

Oh iya, live reload baru bisa bekerja di Google Chrome. Saya sudah coba di Firefox dan tidak bisa.

Modifikasi Kode

Sekarang mari kita coba modifikasi kode programnya. Ubahlah isi file lib/main.dart menjadi seperti ini:

import 'package:flutter_web/material.dart';

void main() => runApp(Petani Kode());

class Petani Kode extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Petani Kode - Belajar Membuat Web dengan Flutter',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: MyWebsite(),
    );
  }
}

class MyWebsite extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Petani Kode'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
                width: 200.0,
                height: 200.0,
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: DecorationImage(
                        fit: BoxFit.cover,
                        image: new NetworkImage(
                          "https://avatars2.githubusercontent.com/u/16254602?v=4",
                        )))),
            Padding(
              padding: const EdgeInsets.all(20.0),
              child: Text(
                'Selamat datang di Flutter untuk Web',
                style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
              ),
            ),
            Column(
              children: <Widget>[
                Text("Ini adalah demo aplikasi web yang dibuat dengan Flutter."),
                SizedBox(height: 30),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Setelah itu ubah isi file web/index.html menjadi seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Ini adalah demo aplikasi web yang dibuat dengan Flutter">
  <meta name="keywords" content="Flutter, Hummingbird">
  <meta name="author" content="Petani Kode">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Petani Kode: Belajar Membuat Aplikasi Web dengan Flutter</title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>

Maka hasilnya:

Contoh Aplikasi Web dengan Flutter

Build dan Deploy

Ketika aplikasinya sudah jadi, kita bisa melakukan build dan deploy.

Hasil build dari aplikasi ini akan berupa web statis dan ini bisa kita hosting di mana saja.

Baiklah, silakan ketik perintah berikut untuk melakukan build.

webdev build

Tunggulah sampai selesai.

Build aplikasi

Maka kita akan punya folder baru bernama build.

Build aplikasi

Semua isi dari folder inilah yang akan kita upload ke web hosting.

Kita akan coba deploy atau hosting ke surge.sh. Surge adalah layanan hosting untuk web statis.

Kita akan menggunakan NPX untuk menjalankan perintah surge. Silakan ketik perintah berikut:

npx surge build

Tunggulah sampai prosesnya selesai.

Deploy aplikasi

Oh iya, kita akan diminta alamat domain, alamat email dan password untuk login atau mendaftar ke surge.

Hasilnya: https://petanikode-flutter-web.surge.sh/

Deploy aplikasi

Source code dari aplikasi ini dapat di-download di Github

[🎁 Download Source Code]

Troubleshooting…

Karena ini masih versi technical preview, tentu akan ada bugs dan masalah.

Berikut ini beberapa masalah yang saya temukan ketika mencoba Flutter untuk web:

1. Gagal upgrade paket

Saya kurang tahu apa penyebab dari masalah ini.

Could not find a file named "packages/flutter_web/pubspec.yaml" in https://github.com/flutter/flutter_web 7a4c33425ddd7
8c54aba07d86f3f9a4a0051769b.
Running "flutter packages upgrade" in petanikode_web...                 
pub upgrade failed (1)

Tapi ada beberapa hal yang saya lakukan untuk mengatasinya.

Pertama, ubah versi SDK di bagian environment pada pubspec.yaml.

Awalnya seperti ini

environment:
  # You must be using Flutter >=1.5.0 or Dart >=2.3.0
-  sdk: '>=2.3.0-dev.0.1 <3.0.0'

Menjadi:

environment:
  # You must be using Flutter >=1.5.0 or Dart >=2.3.0
  sdk: '>=2.2.0 <3.0.0'

Kedua, hapus folder ~/.pub-cache/git.

Folder git dalam pub cache
Folder git dalam pub cache

Setelah itu jalankan:

flutter pub pub cache repair

Lalu jalankan perintah ini di dalam direktori proyek:

pub get

2. Server tidak mau dijalankan

dian@petanikode~/t/petanikode_web> webdev serve
webdev could not run for this project.
The `build_web_compilers` version – 2.0.0 – is not within the allowed constraint – >=0.3.6 <2.0.0.

Ini karena versi dependency belum saling mendukung dengan webdev. Ubah di bagian dev_dependencies menjadi seperti ini:

dev_dependencies:
  # Enables the `pub run build_runner` command
  build_runner: ^1.1.2
  # Includes the JavaScript compilers
  build_web_compilers: ^1.0.0

Akhir Kata…

Pada percobaan di tutorial ini saya juga mencoba menggunakan Material Icon dan Snackbar, akan tetapi tidak bekerja.

Wajar, karena ini masih versi preview…

Karena itu, Saya tidak menyarankan untuk digunakan di aplikasi level produksi. Soalnya masih banyak bugs dan masalah yang harus diperbaiki.

Kalau hanya untuk coba-coba sih tidak apa-apa.

Oh iya untuk melihat sampel aplikasi web yang lainnya, bisa cek di sini https://flutter.github.io/samples/.

Akhir kata…

Selamat belajar Flutter.