Show HN: Flutter के जरिए Rust GUI लाइब्रेरी

• Rust में GUI प्रोग्राम बनाना चाहने वाले डेवलपर्स के लिए, Rust state और logic को ज्यों का त्यों रखते हुए Flutter UI जोड़ने का तरीका प्रस्तावित किया गया है
• Flutter का परिपक्व cross-platform SDK और widget ecosystem, pixel-level control, और hot reload UI iteration को तेज बनाते हैं
• यह 100% pure Rust approach नहीं है, लेकिन HTML/CSS/Slint या macro-based DSL की तरह UI layer को अलग करने वाले मौजूदा Rust UI trade-offs जैसा है
• flutter_rust_bridge arbitrary types, &mut, async, traits, results, closure, lifetimes आदि को अपने-आप convert करके Rust और Flutter के बीच bridge बनता है
• counter app और todo-list app के उदाहरणों से structure देखा जा सकता है, और पूरा code flutter_rust_bridge repository की examples directory में है

---

Rust GUI में Flutter जोड़ने का तरीका

• Rust को StackOverflow और GitHub के अनुसार 8 साल तक “सबसे वांछित programming language” चुना गया है, और Rust में GUI program बनाना चाहने वालों की मांग बड़ी है
• प्रस्तावित तरीका Flutter और flutter_rust_bridge का उपयोग करके Rust program में GUI जोड़ना है
• सीधे चलाने के लिए GitHub repository या demo folder का उपयोग किया जा सकता है

Flutter इस्तेमाल करने की वजह

• Flutter को StackOverflow के अनुसार “सबसे लोकप्रिय cross-platform mobile SDK” चुना गया है, और कई developers और brands इसका उपयोग कर रहे हैं
• समृद्ध widget ecosystem की वजह से इच्छित UI features लागू करना आसान है
  • confetti animation जैसे packages भी मौजूद हैं
  • यह अलग-अलग widgets और features, और pixel-level control की flexibility देता है
• hot reload उस development process में iteration speed बढ़ाता है जहां UI tuning बार-बार करनी पड़ती है
  • code changes के बाद state खोए बिना लगभग तुरंत updated UI देखा जा सकता है
  • recompilation का इंतज़ार करने में लगने वाला समय घटता है
• वही codebase Android, iOS के साथ-साथ Linux, MacOS, Windows, Web पर भी चलाया जा सकता है

Pure Rust न होने का trade-off

• यह approach 100% pure Rust नहीं है
  • Rust state और logic संभालता है, और Flutter UI संभालता है
  • यह Rust UI के उन तरीकों जैसा है जो macro से बने custom DSL, HTML/CSS/Slint जैसी दूसरी languages का उपयोग करते हैं
• यह separation separation of concerns के अनुरूप है, और अन्य cases में भी अपनाया गया तरीका है
• माना गया है कि अगर आप Rust समझते हैं तो Flutter सीखना आसान है
• Web platform को लेकर कुछ आलोचनाएं हैं, और यह static webpages की तुलना में Google Earth या Rive animation editor जैसी “app” form के लिए अधिक उपयुक्त लगता है
• Flutter में boilerplate और scaffold code काफी होता है
  • छोटे projects में आम तौर पर इन files को बदला नहीं जाता, इसलिए इन्हें न होने जैसा माना जा सकता है
  • बड़े projects में बदलाव की संभावना customization की संभावना से जुड़ती है

flutter_rust_bridge क्या जोड़ता है

• flutter_rust_bridge का लक्ष्य Rust और Flutter के बीच इतना natural connection बनाना है कि वे एक ही language की तरह लगें
• यह कई elements को automatically convert करता है
  • arbitrary types
  • &mut
  • async
  • traits
  • results
  • closure(callback)
  • lifetimes
• “Flutter के जरिए Rust GUI” इसके संभावित use cases में से एक है
• अन्य उपयोगों में Flutter से किसी भी Rust library का उपयोग करना, या algorithms जैसे code Rust में लिखकर बाकी हिस्सा Flutter में लिखना शामिल है

Counter app example

• example Rust और Flutter को integrate करने के कई तरीकों में से एक है
• flutter_rust_bridge एक general-purpose tool है जो कोई specific structure force नहीं करता, इसलिए Redux-style या Elm-style approach भी संभव है
• Rust side में #[frb(ui_state)] से state define किया जाता है, और #[frb(ui_mutation)] से mutation methods mark किए जाते हैं
  • RustState में count: i32 होता है
  • new() count को 100 से initialize करता है
  • increment() count को 1 बढ़ाता है
• कहा गया है कि #[frb(ui_state)] और #[frb(ui_mutation)] बहुत हल्के हैं, इनके अंदर कोई hidden magic नहीं है और code भी करीब 10 lines का है
• Flutter UI declarative रूप में लिखा जाता है
  • current count दिखाने वाला Text
  • state.increment call करने वाला TextButton
  • दोनों elements को column में बांधकर padding apply किया जाता है
• run time में UI modify करने पर hot reload से changes तुरंत देखे जा सकते हैं

Todo-list app example

• todo-list app पूर्णता के लिए चुना गया section है, और flutter_rust_bridge जिन कई approaches को support कर सकता है उनमें से एक है
• Rust state में todo items, input text, filter, और next ID शामिल हैं
  • items: Vec<Item>
  • input_text: String
  • filter: Filter
  • next_id: i32
• Item में id, content, completed होते हैं
• Filter में All, Active, Completed होते हैं
• state mutation actions #[frb(ui_mutation)] के नीचे implement किए जाते हैं
  • add() current input text से item जोड़ता है और input खाली करता है
  • remove(id) उस ID वाले item को हटाता है
  • toggle(id) completed state को उलटता है
• business logic filtered_items() और Filter::check() से बना है
  • All सभी items को pass करता है
  • Active केवल उन items को pass करता है जो completed नहीं हैं
  • Completed केवल completed items को pass करता है
• Flutter UI text field, list view, और filter button row को column में arrange करता है
  • SyncTextField input changes और submit को Rust state mutation से जोड़ता है
  • हर todo item checkbox, text, और delete button से बना होता है

Code location और चलाना

• पूरा code flutter_rust_bridge repository में है
  • frb_example/rust_ui_counter
  • frb_example/rust_ui_todo_list
• ज़्यादातर files Flutter features के कारण बनने वाली auto-generated boilerplate files हैं
• मुख्य files src/app.rs और ui/lib/main.dart हैं
• demo चलाने के लिए ui directory में नीचे दिया command चलाएं
  • flutter_rust_bridge_codegen generate && flutter run