Show HN: Una biblioteca de GUI para Rust mediante Flutter

• Propone una forma de crear programas GUI en Rust manteniendo intactos el estado y la lógica en Rust y agregando una UI en Flutter
• El SDK multiplataforma maduro de Flutter, su ecosistema de widgets, el control a nivel de píxel y hot reload agilizan la iteración de UI
• No es un enfoque 100% Rust puro, pero se parece a otros compromisos existentes de UI en Rust que separan la capa de UI, como HTML/CSS/Slint o DSL basados en macros
• flutter_rust_bridge actúa como puente entre Rust y Flutter al convertir automáticamente tipos arbitrarios, &mut, async, traits, results, closures, lifetimes, etc.
• La estructura puede verse con ejemplos de una app de contador y una app de lista de tareas; el código completo está en el directorio de ejemplos del repositorio de flutter_rust_bridge

---

Una forma de agregar Flutter a una GUI en Rust

• Según StackOverflow y GitHub, Rust fue elegido durante 8 años como el “lenguaje de programación más deseado”, y existe una gran demanda por crear programas GUI con Rust
• El enfoque propuesto consiste en usar Flutter y flutter_rust_bridge para agregar una GUI a un programa en Rust
• Para ejecutarlo directamente, se puede usar el repositorio de GitHub o la carpeta de demo

Por qué usar Flutter

• Según StackOverflow, Flutter fue elegido como el “SDK móvil multiplataforma más popular”, y lo usan varios desarrolladores y marcas
• Gracias a su amplio ecosistema de widgets, es fácil implementar las funciones de UI deseadas
  • También existen paquetes para cosas como animaciones de confetti
  • Ofrece distintos widgets y funciones, además de flexibilidad de control a nivel de píxel
• Hot reload acelera la iteración durante el desarrollo, donde los ajustes de UI son frecuentes
  • Después de cambiar código, se puede ver la UI actualizada casi de inmediato sin perder el estado
  • Se reduce el tiempo de espera por recompilación
• La misma base de código puede ejecutarse no solo en Android e iOS, sino también en Linux, MacOS, Windows y Web

El compromiso de no ser Rust puro

• Este enfoque no es 100% Rust puro
  • Rust se encarga del estado y la lógica, y Flutter se encarga de la UI
  • Es similar a otros enfoques de UI para Rust que usan otros lenguajes, como DSL personalizados creados con macros, HTML/CSS/Slint
• Esta separación encaja con la separación de responsabilidades y también se adopta en otros casos
• Se considera que Flutter es fácil de aprender si ya se entiende Rust
• Hay algunas críticas sobre la plataforma Web, y parece más adecuado para formatos de “app”, como Google Earth o el editor de animaciones Rive, que para páginas web estáticas
• Flutter tiene mucho código boilerplate y de scaffolding
  • En proyectos pequeños, normalmente esos archivos no se modifican, por lo que puede considerarse casi como si no existieran
  • En proyectos grandes, la posibilidad de modificarlos se traduce directamente en capacidad de personalización

Lo que conecta flutter_rust_bridge

• El objetivo de flutter_rust_bridge es conectar Rust y Flutter de forma natural, como si fueran un solo lenguaje
• Convierte automáticamente varios elementos
  • tipos arbitrarios
  • &mut
  • async
  • traits
  • results
  • closure(callback)
  • lifetimes
• “GUI en Rust mediante Flutter” es uno de los casos de uso posibles
• Otros usos incluyen utilizar bibliotecas arbitrarias de Rust desde Flutter, o escribir en Rust código como algoritmos y el resto en Flutter

Ejemplo de app de contador

• El ejemplo es una de varias formas de integrar Rust y Flutter
• flutter_rust_bridge es una herramienta de propósito general que no impone una estructura específica, por lo que también son posibles enfoques tipo Redux o Elm
• Del lado de Rust, el estado se define con #[frb(ui_state)] y los métodos de modificación se marcan con #[frb(ui_mutation)]
  • RustState tiene count: i32
  • new() inicializa count en 100
  • increment() incrementa count en 1
• #[frb(ui_state)] y #[frb(ui_mutation)] son muy ligeros; se dice que no hay magia oculta en su interior y que el código ronda apenas unas 10 líneas
• La UI de Flutter se escribe de forma declarativa
  • Text que muestra el conteo actual
  • TextButton que llama a state.increment
  • Ambos elementos se agrupan en una columna y se les aplica padding
• Si se modifica la UI durante la ejecución, los cambios pueden verse de inmediato con hot reload

Ejemplo de app de lista de tareas

• La app de lista de tareas es una sección opcional para completitud y representa uno de los muchos enfoques que flutter_rust_bridge puede soportar
• El estado en Rust incluye los ítems de tareas, el texto de entrada, el filtro y el siguiente ID
  • items: Vec<Item>
  • input_text: String
  • filter: Filter
  • next_id: i32
• Item tiene id, content y completed
• Filter tiene All, Active y Completed
• Las acciones de cambio de estado se implementan bajo #[frb(ui_mutation)]
  • add() agrega un ítem con el texto de entrada actual y limpia el input
  • remove(id) elimina el ítem con ese ID
  • toggle(id) invierte el estado de completado
• La lógica de negocio está compuesta por filtered_items() y Filter::check()
  • All deja pasar todos los ítems
  • Active deja pasar solo los ítems no completados
  • Completed deja pasar solo los ítems completados
• La UI de Flutter organiza en una columna un campo de texto, una vista de lista y una fila de botones de filtro
  • SyncTextField conecta los cambios de entrada y el envío con cambios de estado en Rust
  • Cada ítem de tarea se compone de un checkbox, texto y botón de eliminación

Ubicación del código y ejecución

• El código completo está en el repositorio de flutter_rust_bridge
  • frb_example/rust_ui_counter
  • frb_example/rust_ui_todo_list
• La mayor parte corresponde a archivos boilerplate generados automáticamente por funcionalidades de Flutter
• Los archivos clave son src/app.rs y ui/lib/main.dart
• Para ejecutar la demo, se corre el siguiente comando en el directorio ui
  • flutter_rust_bridge_codegen generate && flutter run