Show HN: Flutter üzerinden Rust GUI kütüphanesi

• Rust ile GUI programları yapmak isteyen geliştiriciler için Rust durumunu ve mantığını olduğu gibi bırakıp üzerine Flutter UI ekleme yaklaşımı öneriliyor
• Flutter’ın olgun çapraz platform SDK’sı ve widget ekosistemi, piksel düzeyinde kontrolü ve hot reload özelliği UI yineleme çalışmalarını hızlandırıyor
• %100 saf Rust yaklaşımı olmasa da HTML/CSS/Slint ya da makro tabanlı DSL gibi UI katmanını ayıran mevcut Rust UI uzlaşılarına benziyor
• flutter_rust_bridge; rastgele tipleri, &mut, async, traits, results, closure, lifetimes gibi öğeleri otomatik dönüştürerek Rust ile Flutter arasında bir köprü oluyor
• Counter uygulaması ve todo-list uygulaması örnekleriyle yapı incelenebiliyor; kodun tamamı flutter_rust_bridge deposunun örnekler dizininde yer alıyor

---

Rust GUI’ye Flutter ekleme yaklaşımı

• Rust, StackOverflow ve GitHub’a göre 8 yıl boyunca “en çok istenen programlama dili” seçildi ve Rust ile GUI programları yapmak isteyenlere yönelik talep büyük
• Önerilen yaklaşım, Flutter ve flutter_rust_bridge kullanarak Rust programına GUI eklemek
• Doğrudan çalıştırmak için GitHub deposu ya da demo klasörü kullanılabilir

Neden Flutter kullanılıyor

• Flutter, StackOverflow’a göre “en popüler çapraz platform mobil SDK” seçildi ve birçok geliştirici ile marka tarafından kullanılıyor
• Zengin widget ekosistemi sayesinde istenen UI işlevlerini uygulamak kolaylaşıyor
  • confetti animasyonu gibi paketler de mevcut
  • Çeşitli widget’lar ve özellikler, piksel düzeyinde kontrol esnekliği sunuyor
• hot reload, UI ayarlamalarının sık yapıldığı geliştirme sürecinde yineleme hızını artırıyor
  • Kod değişikliğinden sonra durumu kaybetmeden neredeyse anında güncellenmiş UI görülebiliyor
  • Yeniden derlemeyi bekleme süresi azalıyor
• Aynı kod tabanı Android ve iOS’un yanı sıra Linux, MacOS, Windows ve Web’de de çalıştırılabiliyor

Saf Rust olmama uzlaşısı

• Bu yaklaşım %100 saf Rust değil
  • Durum ve mantıktan Rust sorumlu, UI’dan Flutter sorumlu olan bir yapı
  • Makrolarla oluşturulmuş özel DSL, HTML/CSS/Slint gibi başka dilleri kullanan Rust UI yaklaşımlarına benziyor
• Bu ayrım sorumlulukların ayrılması ilkesine uygun ve başka örneklerde de benimsenmiş bir yöntem
• Rust’ı anlıyorsanız Flutter’ın öğrenilmesinin kolay olduğu düşünülüyor
• Web platformuna yönelik bazı eleştiriler var; statik web sayfalarından çok Google Earth veya Rive animasyon editörü gibi “uygulama” biçimlerine daha uygun görünüyor
• Flutter’da çok sayıda boilerplate ve scaffold kodu bulunuyor
  • Küçük projelerde bu dosyalar genellikle değiştirilmediği için yokmuş gibi görülebilir
  • Büyük projelerde ise değiştirilebilir olmaları özelleştirilebilirliğe dönüşüyor

flutter_rust_bridge’in bağladıkları

• flutter_rust_bridge’in hedefi Rust ile Flutter arasını tek bir dilmiş gibi doğal biçimde bağlamak
• Birçok öğeyi otomatik dönüştürüyor
  • Rastgele tipler
  • &mut
  • async
  • traits
  • results
  • closure(callback)
  • lifetimes
• “Flutter üzerinden Rust GUI”, olası kullanım senaryolarından biri
• Diğer kullanım örnekleri arasında Flutter’dan rastgele bir Rust kütüphanesi kullanmak veya algoritma gibi kodları Rust ile yazıp geri kalanını Flutter ile geliştirmek bulunuyor

Counter uygulaması örneği

• Örnek, Rust ve Flutter’ı entegre etmenin birçok yolundan biri
• flutter_rust_bridge, belirli bir yapıyı dayatmayan genel amaçlı bir araç olduğundan Redux tarzı veya Elm tarzı yaklaşımlar da mümkün
• Rust tarafında durum #[frb(ui_state)] ile tanımlanıyor, değişiklik metotları #[frb(ui_mutation)] ile işaretleniyor
  • RustState, count: i32 içeriyor
  • new(), count değerini 100 olarak başlatıyor
  • increment(), count değerini 1 artırıyor
• #[frb(ui_state)] ve #[frb(ui_mutation)] oldukça hafif; içeride gizli bir sihir olmadığı ve kodun da yaklaşık 10 satır olduğu söyleniyor
• Flutter UI deklaratif olarak yazılıyor
  • Geçerli sayacı gösteren Text
  • state.increment çağıran TextButton
  • İki öğeyi bir sütunda toplayıp padding uyguluyor
• Çalışma sırasında UI değiştirilirse değişiklikler hot reload ile anında görülebiliyor

Todo-list uygulaması örneği

• Todo-list uygulaması, bütünlük için sunulan isteğe bağlı bir bölüm ve flutter_rust_bridge’in destekleyebileceği çeşitli yaklaşımlardan biri
• Rust durumu todo öğelerini, giriş metnini, filtreyi ve sonraki ID’yi içeriyor
  • items: Vec<Item>
  • input_text: String
  • filter: Filter
  • next_id: i32
• Item, id, content, completed içeriyor
• Filter, All, Active, Completed içeriyor
• Durum değiştirme işlemleri #[frb(ui_mutation)] altında uygulanıyor
  • add(), mevcut giriş metniyle bir öğe ekliyor ve girişi temizliyor
  • remove(id), ilgili ID’ye sahip öğeyi kaldırıyor
  • toggle(id), tamamlanma durumunu tersine çeviriyor
• İş mantığı filtered_items() ve Filter::check() ile oluşturuluyor
  • All, tüm öğeleri geçiriyor
  • Active, yalnızca tamamlanmamış öğeleri geçiriyor
  • Completed, yalnızca tamamlanmış öğeleri geçiriyor
• Flutter UI, metin alanını, liste görünümünü ve filtre düğmeleri satırını bir sütun olarak yerleştiriyor
  • SyncTextField, giriş değişikliklerini ve gönderimi Rust durum değişikliklerine bağlıyor
  • Her todo öğesi bir checkbox, metin ve silme düğmesinden oluşuyor

Kod konumu ve çalıştırma

• Kodun tamamı flutter_rust_bridge deposunda bulunuyor
  • frb_example/rust_ui_counter
  • frb_example/rust_ui_todo_list
• Büyük kısmı Flutter özellikleri nedeniyle oluşan otomatik üretilmiş boilerplate dosyaları
• Temel dosyalar src/app.rs ve ui/lib/main.dart
• Demoyu çalıştırmak için ui dizininde şu komut çalıştırılıyor
  • flutter_rust_bridge_codegen generate && flutter run