Ditulis oleh Mariam Hasnany, Product Manager, Flutter
Kami senang bisa mengumumkan bahwa dukungan web untuk Flutter sudah masuk versi Beta!

Mengapa kami menghadirkan Flutter ke web?

Developer membangun aplikasi yang harus berjalan di seluler dan web. Penting bagi kami agar Anda bisa merancang dan membangun apa yang Anda inginkan, dan tahu bahwa dengan Flutter itu akan bekerja dengan indah kapan pun Anda membutuhkannya. Sebagai developer, mempelajari satu set keahlian yang bisa dengan mudah ditransfer ke berbagai platform sangatlah dibutuhkan. Dukungan web untuk Flutter memungkinkan developer menggunakan kode yang sama, menghadirkan fitur dengan lebih cepat, dan memastikan konsistensi untuk pengalaman mereka di seluruh perangkat. Selain itu, kompiler Dart yang kuat untuk web dan arsitektur Flutter yang dirancang portabel mempermudah pembuatan pengalaman web interaktif yang menakjubkan menggunakan Flutter.

Lebih dari sekadar pratinjau

Sejak merilis dukungan web sebagai pratinjau teknis di Google I/O tahun ini, dan dimulainya program pengguna awal pada bulan Juli, kami terus bekerja keras untuk mendukung animo yang semakin besar dalam memperluas dukungan web Flutter baik di Google maupun publik yang lebih luas.

Jadi, apa yang dimaksud Beta untuk web?

Dengan dirilisnya Flutter 1.12, web Flutter mendukung keluaran dari pratinjau teknis ke versi Beta. Saat Anda berada di saluran Beta dan telah mengaktifkan dukungan web, membuat project Flutter baru tidak hanya akan memasukkan aplikasi host Android dan iOS, tetapi sekarang juga memasukkan web/direktori yang berisi semua yang diperlukan untuk melakukan compile dan menjalankan kode project yang sama dalam sebuah browser.
Kami percaya dukungan web Flutter mulai stabil dan siap untuk mulai dipergunakan developer pemberani dalam sejumlah skenario. Seiring dengan langkah kami ke tahap pengembangan berikutnya, kami akan terus melakukan perubahan dan meningkatkan aksesibilitas, cakupan pengujian, dan banyak lagi.

Skenario yang bisa dicoba

Karena kami mengembangkan dukungan Flutter untuk berjalan di web, kami secara khusus berfokus pada sejumlah skenario yang kami pikir sangat cocok untuk karakteristik Flutter. Kami percaya bahwa set fitur kami cukup lengkap sehingga developer bisa membangun pengalaman web interaktif yang kaya. Saat bekerja dengan mitra pengguna awal, kami telah memvalidasi dan menyempurnakan dukungan untuk skenario berikut.
Aplikasi mandiri yang terhubung
Flutter memungkinkan developer untuk membangun satu aplikasi dari kode yang sama untuk pengalaman seluler dan browser. Journey, salah satu pengguna awal kami, menggunakan Flutter untuk membangun aplikasi di berbagai platform.


Journey, sebuah aplikasi sosial, baru-baru ini meluncurkan aplikasi lintas platform menggunakan Flutter

Luke O'Brien, Pendiri Journey, mengatakan “Empat bulan lalu, saya akan membangun Journey hanya untuk Android untuk MVP. Saya menemukan Flutter dan berpikir, ‘Ini terlalu bagus untuk menjadi kenyataan’, tetapi memutuskan untuk menjalankannya. Itu adalah keputusan terbaik yang pernah saya buat sampai saat ini. Flutter memangkas waktu pengembangan hingga separuhnya (bahkan mungkin lebih dari itu) dan sekarang kami telah meluncur di Android, iOS, dan web — menggandakan potensi pertumbuhan pengguna. Sulit untuk melebih-lebihkan dampak Flutter dalam mengubah visi saya menjadi kenyataan.’


Konten interaktif sematan

Salah satu skenario adalah menyematkan aplikasi mini yang kaya dan data-sentris di dalam situs induk; Anda tidak memerlukan layanan navigasi atau fungsionalitas seperti-aplikasi lainnya. Menyematkan konfigurator mobil baru, teka-teki silang, atau visualisasi data interaktif ke situs web yang sudah ada hanyalah beberapa contoh kunci yang sesuai dengan skenario ini. Pengguna awal showcase chatbots AEI Studio menyematkan Flutter dalam dialog chat web mereka yang menampilkan animasi, input teks dengan keyboard, dan lainnya.


Weatherbot adalah salah satu chatbots AEI Studio yang menyematkan Flutter dalam dialog chat web mereka


Aplikasi yang ringan

Meskipun runtime seluler khusus Flutter masih bisa memberikan pengalaman yang lancar saat ini, terkadang friksi penginstalan aplikasi menghambat pengguna untuk memulai. Aplikasi Flutter saat ini yang memiliki pengalaman web ringan memberikan perusahaan yang terbaik dari keduanya. Meskipun konsumsi utama aplikasi tetap ada di seluler, aplikasi web yang ringan bisa memberikan pengalaman yang kaya dan lebih sedikit fitur dengan fungsionalitas yang bertalian menggunakan fitur, framework, komponen UI, dan logika bisnis yang sama.


Aplikasi pendamping

Aplikasi pendamping adalah pengalaman web yang dibuat menggunakan Flutter untuk mendukung aplikasi seluler konsumsi utama Anda. Misalnya, menggunakan Flutter untuk membangun aplikasi web yang memungkinkan admin atau pengguna internal untuk membuat konten atau mengelola backend bagi aplikasi seluler Flutter Anda. Meskipun aplikasi web ini dianggap sebagai pengalaman yang terpisah, aplikasi ini bisa memanfaatkan banyak kode yang sama dari aplikasi seluler.

Plugin ada di sini!

Flutter memiliki konsep plugin, yang memungkinkan Anda berbicara dengan library native untuk platform yang Anda jalankan. Saat Anda menjalankan aplikasi Flutter di web, Anda bisa mendapatkan akses penuh ke semua library JS. Kami mengerjakan semua kode JS-interop di belakang layar sehingga semua plugin bisa berfungsi seperti yang Anda harapkan baik di seluler maupun web. Kami telah mengimplementasikan beberapa plugin yang paling banyak diminta sehingga mereka dapat bekerja secara konsisten di seluruh aplikasi web dan native. Sekarang, Anda juga bisa menulis plugin sendiri seperti yang dilakukan Ben Hagan untuk video_player, dan Hadrien Lejard untuk paket sentry. Paket-paket berikut ini telah diupdate:
Kami juga menambahkan pemberian tag platform dan pemfilteran pada repositori paket pub.dev.
Pertama, pada halaman detail paket, kami mendaftar platform yang didukung paket. Proses ini mempermudah identifikasi bila suatu paket memiliki dukungan web.


Halaman detail paket pub.dev menampilkan SDK dan tag kompatibilitas platform

UI penelusuran juga memiliki filter baru, sehingga Anda bisa menemukan paket yang memiliki dukungan web. Ini didasarkan pada tag manifes platform baru yang sekarang tersedia di Flutter 1.12.


UI penelusuran pub.dev menunjukkan SDK dan dukungan filter platform

Jalan menuju versi stabil

Kami membuat banyak kemajuan dengan versi beta, tetapi masih banyak pekerjaan yang harus dilakukan. Pekerjaan kinerja kami belum lengkap dan kami sedang berupaya memperluas cakupan kami untuk aksesibilitas, kompatibilitas browser, dan yang lain.


Aksesibilitas

Kami memiliki dukungan aksesibilitas di browser seluler melalui TalkBack di Android dan VoiceOver di iOS. Beberapa fitur yang sudah diimplementasikan untuk teknologi bantu lintas platform termasuk hal-hal seperti UI traversal dan traversal order, tanda interaksi UI seperti bisa di-tap, label, dapat diedit, inkremental, gambar, live-region, dan dapat diperiksa. Dan, kami sedang berupaya menambahkan dukungan pembaca layar untuk browser web desktop.


Dukungan browser

Seiring dengan Flutter yang terus berevolusi dari framework khusus seluler kemudian juga mencakup idiom ux desktop, dukungan Flutter untuk browser web desktop akan meningkat dan terasa lebih mulus. Kami berencana untuk mendukung dan mengujinya untuk Chrome, Edge, Firefox, dan Safari di browser desktop dan seluler.


Cakupan pengujian

Sejak pratinjau, kami meningkatkan cakupan pengujian kami baik pada framework maupun mesin web Flutter. Sampai hari ini, kami menjalankan pengujian otomatis di Chrome, dan mengujinya secara manual di Safari. Masih banyak pekerjaan pengujian yang harus dilakukan, dan regresi dapat muncul dalam skenario yang belum diuji.

Cobalah dukungan web Flutter, berkontribusi, dan bagikan!

Sekarang adalah waktu yang tepat untuk mencoba dukungan web Flutter! Buka flutter.dev/web untuk memulai, dan temukan contoh, dokumentasi, dan lainnya. Jika Anda sudah bereksperimen dengan dukungan web Flutter, Anda bisa beralih ke saluran beta.
Ada lebih dari 1800 plugin Flutter saat ini; tetapi, sebagian besar untuk iOS atau Android. Anda bisa membantu menjembatani kesenjangan antara seluler dan web dengan menambahkan dukungan web ke plugin yang sudah ada atau dengan membuat plugin sendiri. Untuk membantu memandu Anda, kami menerbitkan artikel tentang cara menulis plugin web.

Penutup

Kami berharap Anda senang dengan dukungan web Flutter yang masuk ke saluran beta, dan merasakan komitmen kami seiring dengan proses yang semakin dekat dengan rilis dukungan web berkualitas-produksi.
Kami menyambut baik semua masukan, dan berharap Anda membagikan apa yang sedang Anda kerjakan menggunakan #Flutter. Kami benar-benar senang bisa melihat Anda menggunakan Flutter untuk membangun pengalaman web interaktif yang indah!