Show HN: Library GUI Rust melalui Flutter

• Untuk pengembang yang ingin membuat program GUI dengan Rust, pendekatan ini mengusulkan mempertahankan state dan logika Rust apa adanya lalu menambahkan UI Flutter
• SDK lintas platform Flutter yang matang, ekosistem widget, kontrol hingga tingkat piksel, dan hot reload mempercepat iterasi UI
• Ini bukan pendekatan Rust murni 100%, tetapi mirip dengan kompromi UI Rust lain yang memisahkan lapisan UI seperti HTML/CSS/Slint atau DSL berbasis makro
• flutter_rust_bridge menjadi jembatan antara Rust dan Flutter dengan mengonversi otomatis tipe arbitrer, &mut, async, traits, results, closure, lifetimes, dan lainnya
• Struktur dapat dilihat lewat contoh aplikasi counter dan todo-list, dan seluruh kode ada di direktori contoh repositori flutter_rust_bridge

---

Cara menambahkan Flutter ke GUI Rust

• Rust telah dipilih sebagai “bahasa pemrograman paling diinginkan” selama 8 tahun berdasarkan StackOverflow dan GitHub, sehingga ada banyak permintaan untuk membuat program GUI dengan Rust
• Pendekatan yang diusulkan adalah menambahkan GUI ke program Rust menggunakan Flutter dan flutter_rust_bridge
• Untuk menjalankannya langsung, Anda dapat menggunakan repositori GitHub atau folder demo

Mengapa memakai Flutter

• Flutter disebut sebagai “SDK mobile lintas platform paling populer” menurut StackOverflow, dan telah digunakan oleh berbagai pengembang serta merek
• Berkat ekosistem widget yang kaya, lebih mudah mewujudkan fungsi UI yang diinginkan
  • Tersedia juga paket seperti animasi confetti
  • Menyediakan beragam widget, fitur, dan fleksibilitas kontrol hingga tingkat piksel
• Hot reload meningkatkan kecepatan iterasi saat proses pengembangan yang sering menyesuaikan UI
  • Setelah mengubah kode, Anda dapat melihat UI yang diperbarui hampir seketika tanpa kehilangan state
  • Waktu menunggu kompilasi ulang pun berkurang
• Basis kode yang sama dapat dijalankan bukan hanya di Android dan iOS, tetapi juga di Linux, MacOS, Windows, dan Web

Kompromi karena bukan Rust murni

• Pendekatan ini bukan Rust murni 100%
  • Rust menangani state dan logika, sementara Flutter menangani UI
  • Ini mirip dengan pendekatan UI Rust lain yang memakai bahasa berbeda seperti DSL kustom berbasis makro, HTML/CSS, atau Slint
• Pemisahan seperti ini sesuai dengan pemisahan tanggung jawab dan juga diadopsi dalam contoh lain
• Flutter dinilai mudah dipelajari jika Anda sudah memahami Rust
• Ada sejumlah kritik terhadap platform Web, dan tampaknya lebih cocok untuk bentuk “aplikasi” seperti Google Earth atau editor animasi Rive daripada halaman web statis
• Flutter memiliki banyak boilerplate dan scaffold code
  • Dalam proyek kecil, biasanya file-file itu tidak diubah sehingga terasa seolah tidak ada
  • Dalam proyek besar, kemungkinan untuk mengubahnya berarti juga kemungkinan untuk melakukan kustomisasi

Apa yang dihubungkan oleh flutter_rust_bridge

• Tujuan flutter_rust_bridge adalah menghubungkan Rust dan Flutter secara alami seolah-olah satu bahasa
• Berbagai elemen dikonversi secara otomatis
  • tipe arbitrer
  • &mut
  • async
  • traits
  • results
  • closure(callback)
  • lifetimes
• “GUI Rust melalui Flutter” adalah salah satu contoh penggunaan yang memungkinkan
• Contoh penggunaan lain termasuk memakai library Rust arbitrer dari Flutter, atau menulis bagian seperti algoritme dalam Rust dan sisanya dalam Flutter

Contoh aplikasi counter

• Contoh ini hanyalah salah satu dari berbagai cara untuk mengintegrasikan Rust dan Flutter
• flutter_rust_bridge adalah alat umum yang tidak memaksa struktur tertentu, sehingga pendekatan ala Redux atau Elm juga dimungkinkan
• Di sisi Rust, state didefinisikan dengan #[frb(ui_state)] dan metode perubahan ditandai dengan #[frb(ui_mutation)]
  • RustState memiliki count: i32
  • new() menginisialisasi count ke 100
  • increment() menambah count sebesar 1
• #[frb(ui_state)] dan #[frb(ui_mutation)] sangat ringan; dikatakan tidak ada sihir tersembunyi di dalamnya, dan kodenya pun hanya sekitar belasan baris
• UI Flutter ditulis secara deklaratif
  • Text yang menampilkan hitungan saat ini
  • TextButton yang memanggil state.increment
  • Kedua elemen dibungkus dalam kolom dan diberi padding
• Saat UI diubah ketika aplikasi berjalan, perubahan dapat langsung dilihat melalui hot reload

Contoh aplikasi todo-list

• Aplikasi todo-list adalah bagian opsional demi kelengkapan, dan merupakan salah satu dari berbagai pendekatan yang bisa didukung flutter_rust_bridge
• State Rust mencakup item todo, teks input, filter, dan ID berikutnya
  • items: Vec<Item>
  • input_text: String
  • filter: Filter
  • next_id: i32
• Item memiliki id, content, dan completed
• Filter memiliki All, Active, dan Completed
• Perubahan state diimplementasikan di bawah #[frb(ui_mutation)]
  • add() menambahkan item dari teks input saat ini lalu mengosongkan input
  • remove(id) menghapus item dengan ID tersebut
  • toggle(id) membalik status selesai
• Logika bisnis terdiri dari filtered_items() dan Filter::check()
  • All meloloskan semua item
  • Active hanya meloloskan item yang belum selesai
  • Completed hanya meloloskan item yang sudah selesai
• UI Flutter menata kolom berisi text field, list view, dan row tombol filter
  • SyncTextField menghubungkan perubahan input dan submit ke perubahan state Rust
  • Setiap item todo terdiri dari checkbox, teks, dan tombol hapus

Lokasi kode dan cara menjalankan

• Seluruh kode ada di repositori flutter_rust_bridge
  • frb_example/rust_ui_counter
  • frb_example/rust_ui_todo_list
• Sebagian besar merupakan file boilerplate hasil generasi otomatis yang muncul karena fitur Flutter
• File inti adalah src/app.rs dan ui/lib/main.dart
• Untuk menjalankan demo, jalankan perintah berikut di direktori ui
  • flutter_rust_bridge_codegen generate && flutter run