Ingin bikin Web menggunakan Flutter? Yuk kenalan dengan Hummingbird

Beberapa waktu lalu saya sempat menulis tentang bagaimana cara menerapkan animasi pada aplikasi Flutter yang bisa dibaca di sini. Kali ini, saya ingin berbagi tentang salah satu konsep baru yang dihadirkan Flutter.

Sebulan terakhir saya dibuat tertarik dengan salah satu konsep yang dihadirkan oleh Flutter dimana kita bisa menjalankan proyek Flutter menjadi sebuah web pada browser. Keunggulan Flutter yang dapat kita gunakan untuk membuat aplikasi yang cantik pada mobile, kini kita bisa hadirkan pada sebuah website. Wow! Menarik ya!

Walau konsep ini sudah diumumkan jauh sebelum saya mencobanya, hal ini tidak menghentikan niat saya untuk tetap melakukan eksplorasi dan membagi hasilnya. Penasaran? Mari berkenalan dengan Hummingbird yang akan dibahas lebih dalam pada tulisan saya kali ini.

Apa itu Hummingbird

Pada akhir tahun 2018 tepatnya pada bulan Desember, Google sebagai pengembang Flutter mengumumkan versi yang dapat dijalankan sebagai sebuah web atau yang disebut sebagai proyek Hummingbird. Sederhananya, Hummingbird memiliki arsitektur seperti gambar di bawah ini:

Hummingbird Architecture Dicoding

Hummingbird Architecture

Bisa kita lihat pada gambar di atas bahwa untuk dapat menjalankan proyek Flutter menjadi sebuah website, dibutuhkan core atau inti dari Flutter itu sendiri untuk melakukan drawing pada lapisan teratas standar browser API. Menggunakan kombinasi dari DOM, Canvas, dan CSS, Flutter dapat menyediakan sebuah sistem yang memiliki kualitas tinggi, portable dan tentunya pengalaman pengguna pada setiap browser modern.

Secara teknis, dibutuhkan sebuah kompiler khusus untuk melakukan kompilasi inti dari Flutter dan framework yang berada di dalam project ke dalam sebuah berkas tunggal yang dapat di-deploy ke web server apapun. Menariknya, kita tidak perlu melakukan konfigurasi untuk kompiler tersebut, karena akan dilakukan secara otomatis. Keren kan?

Okay. Talks are cheap, show me the code. Ingat kata siapa itu? Mari coba kita buat proyek Flutter yang dapat dijalankan pada browser. Eits, tidak hanya dapat dijalankan. Kita bahkan akan membuat proyek Flutter dengan tampilan yang responsive pada perubahan ukuran jendela browser. Menarik!

Proyek Web Flutter

Sebelum membuat proyek, kita perlu mengaktifkan terlebih dahulu fitur web untuk Flutter. Karena untuk saat ini, fitur tersebut masih dalam tahap pengembangan. Artinya kita perlu berpindah dari channel stable ke channel beta. Berikut langkah-langkahnya:

  • Buka terminal atau command prompt dan jalankan perintah berikut untuk berpindah dari channel stable ke channel beta:
  • Jika tidak terdapat eror, lanjutkan dengan perintah berikut untuk upgrade Flutter SDK:
  • Setelah selesai, kita bisa langsung mengaktifkan fitur dukungan web dengan perintah berikut:
  • Untuk memastikan apakah fitur dukungan web sudah aktif, jalankan perintah flutter devices pada terminal. Kamu akan melihat beberapa perangkat yang terkoneksi untuk digunakan seperti berikut:

 

Sampai saat ini kita sudah bisa membuat proyek baru seperti biasanya dan menjalankannya langsung pada browser. Cukup mudah ya. Penasaran hasilnya seperti apa? Jalankan perintah berikut pada terminal untuk mencobanya:

Tunggu hingga proses kompilasi selesai dan jendela baru chrome terbuka. Kurang lebih akan seperti ini tampilannya:

Flutter Web Run dicoding

Flutter Web Run

Responsive Widget

Dalam mengembangkan sebuah website, salah satu yang perlu diperhitungkan adalah seberapa responsive website tersebut terhadap perubahan yang terjadi khususnya pada perubahan tampilan. Lantas bagaimana kita memenuhi kebutuhan tersebut pada proyek Flutter yang notabene pengembangannya berbeda dengan pengembangan website pada umumnya? Serahkan semuanya pada widget MediaQuery dan LayoutBuilder!

Okey, kita mulai dengan membuat kelas helper yang akan menampung beberapa informasi terkait ukuran lebar browser seperti berikut:

Jika kita perhatikan, setiap fungsi yang pada kode di atas terdapat penggunaan MediaQuery untuk mendapatkan informasi ukuran lebar browser dan disesuaikan dengan ketentuan ukuran responsive.

Lanjut, kita akan membuat custom widget GridView dimana gridCount-nya akan menyesuaikan masing-masing ukuran responsive. Dimulai dengan membuat berkas Dart baru dan lengkapi kodenya seperti di bawah ini:

Fokus pada kelas GridViewResponsive, tambahkan beberapa properti ukuran dan daftar widget yang akan disematkan pada properti children dari widget GridView seperti berikut:

Kita akan akan mendapati eror di beberapa properti yang sudah ditambahkan. Sans, kita bisa mengatasinya dengan menambahkan constructor untuk menetapkan nilai dari beberapa properti tersebut seperti berikut:

Selesai! Tetap semangat ya, lanjut. Masih pada berkas Dart yang sama, kita akan fokus pada kelas _GridViewResponsiveState. Di sini kita akan menyesuaikan sedikit kode didalamnya dengan menggunakan widget LayoutBuilder dan GridView tentunya. Langsung saja ubah isi dari fungsi build() menjadi seperti berikut:

Jika kita perhatikan, sepertinya masih ada yang kurang dari kode di atas. YapgridCount masih bernilai statis yang artinya tidak dapat menyesuaikan perubahan yang berakibat tidak responsive-nya halaman. Lantas bagaimana menentukan nilainya agar bisa dinamis? Mudah, kita bisa menggunakan cara tradisional yaitu dengan menentukannya menggunakan if statement seperti berikut:

Nah, kurang lebih berkas Dart yang sudah kita sesuaikan kode di dalamnya akan seperti di bawah ini:

Menggunakan Responsive Widget

Setelah selesai dengan custom widget, kita bisa langsung menggunakan widget tersebut pada main screen. Tapi sebelum itu, kita perlu menyesuaikan terlebih dahulu kelas main.dart menjadi seperti di bawah ini:

Selanjutnya kita akan menambahkan data dan daftar widget yang akan ditampilkan pada GridView. Fokus pada kelas _MyHomePageState kemudian tambahkan beberapa baris kode berikut:

Setelah itu, override fungsi initState() untuk melakukan generate daftar widget berdasarkan data yang sudah kita tambahkan seperti di bawah ini:

Terakhir, ubah kode yang berada di dalam fungsi build() dengan menggunakan custom widget yang sudah kita buat seperti berikut:

Masih semangat? Mari kita coba jalankan proyek web flutter kita. Jika tidak terdapat eror saat kompilasi, tampilannya akan seperti di bawah ini:

Flutter Web Responsive dicoding

Flutter Web Responsive

Bagaimana? Sangat menarik bukan? Tidak sampai disitu loh, kita bisa menentukkan sendiri gridCount sesuai dengan ukuran responsive. Contohnya seperti berikut:

Dengan segala kemudahannya, apakah Hummingbird sudah dapat digunakan untuk proyek production? Hm, jika dilihat statusnya yang masih berada pada channel beta, sepertinya saat ini belum disarankan untuk kita gunakan. Untuk itu, mari kita tunggu saja update-update terbaru tentang hummingbird.

Bonus

Sebagai penutup, saya mempunyai project web Flutter hasil redesign halaman utama dicoding dengan tampilan seperti berikut:

Dicoding Flutter

Dicoding Flutter

Proyek di atas dapat dilihat pada tautan github saya di sini. Sebenarnya proyek di atas masih belum selesai. Jadi, saya ingin menantang teman-teman untuk PR dengan menyelesaikan bagian yang belum selesai tersebut. Challenge Accepted?

Okey, mungkin segitu dulu tulisan saya kali ini. Ada yang kurang jelas atau ingin ditanyakan? Yuk tulis komentar di kolom yang sudah tersedia di bawah ya.

Belajar mengembangkan aplikasi atau game dengan kurikulum yang telah divalidasi langsung oleh industri dengan Dicoding Academy.

Belajar di Dicoding Sekarang →
Share this:

Code Reviewer at Dicoding Indonesia (Google Associate Android Developer)