Show HN: Biblioteca de GUI em Rust usando Flutter

• Para desenvolvedores que querem criar programas com GUI em Rust, é proposta uma abordagem que mantém estado e lógica em Rust e adiciona uma UI em Flutter
• O SDK multiplataforma maduro do Flutter, seu ecossistema de widgets, controle em nível de pixel e hot reload tornam o trabalho iterativo de UI mais rápido
• Não é uma abordagem 100% puramente Rust, mas é parecida com outros compromissos já existentes de UI em Rust que separam a camada de UI, como HTML/CSS/Slint ou DSLs baseadas em macros
• flutter_rust_bridge faz a ponte entre Rust e Flutter convertendo automaticamente tipos arbitrários, &mut, async, traits, results, closures, lifetimes etc.
• É possível entender a estrutura por meio dos exemplos de app contador e app de lista de tarefas, e o código completo está no diretório de exemplos do repositório flutter_rust_bridge

---

Como conectar Flutter a uma GUI em Rust

• Rust foi apontada por 8 anos como a “linguagem de programação mais amada” segundo StackOverflow e GitHub, e há grande demanda de quem quer criar programas com GUI em Rust
• A abordagem proposta usa Flutter e flutter_rust_bridge para adicionar uma GUI a programas em Rust
• Para executar diretamente, é possível usar o repositório no GitHub ou a pasta de demonstração

Por que usar Flutter

• O Flutter foi apontado pelo StackOverflow como o “SDK mobile multiplataforma mais popular”, e é usado por vários desenvolvedores e marcas
• Graças ao rico ecossistema de widgets, fica fácil implementar os recursos de UI desejados
  • Existem até pacotes como animação de confete
  • Ele oferece vários widgets, recursos e flexibilidade de controle em nível de pixel
• O hot reload acelera a iteração durante o desenvolvimento, quando ajustes de UI são frequentes
  • Após mudar o código, é possível ver a UI atualizada quase instantaneamente sem perder o estado
  • Reduz o tempo de espera por recompilações
• A mesma base de código pode rodar não só em Android e iOS, mas também em Linux, MacOS, Windows e Web

O compromisso de não ser puramente Rust

• Essa abordagem não é 100% puramente Rust
  • Rust cuida do estado e da lógica, enquanto o Flutter cuida da UI
  • É semelhante a outras abordagens de UI em Rust que usam outra linguagem, como DSLs customizadas com macros ou HTML/CSS/Slint
• Essa separação combina com a separação de responsabilidades e já foi adotada em outros casos
• Considera-se que Flutter é fácil de aprender para quem já entende Rust
• Há algumas críticas à plataforma Web, e ela parece mais adequada para formatos de “app”, como Google Earth ou o editor de animação Rive, do que para páginas web estáticas
• O Flutter tem bastante boilerplate e código de scaffold
  • Em projetos pequenos, normalmente esses arquivos quase não precisam ser alterados, então é como se nem estivessem ali
  • Em projetos grandes, a possibilidade de modificação acaba significando também possibilidade de personalização

O que o flutter_rust_bridge conecta

• O objetivo do flutter_rust_bridge é conectar Rust e Flutter de forma natural, como se fossem uma única linguagem
• Ele converte automaticamente vários elementos
  • tipos arbitrários
  • &mut
  • async
  • traits
  • results
  • closures (callbacks)
  • lifetimes
• “GUI em Rust usando Flutter” é apenas um dos casos de uso possíveis
• Outros usos incluem empregar qualquer biblioteca Rust no Flutter, ou escrever em Rust apenas partes como algoritmos e fazer o restante em Flutter

Exemplo de app contador

• O exemplo é apenas uma entre várias formas de integrar Rust e Flutter
• Como o flutter_rust_bridge é uma ferramenta genérica que não impõe uma estrutura específica, também é possível seguir uma abordagem ao estilo Redux ou Elm
• Do lado do Rust, o estado é definido com #[frb(ui_state)] e os métodos de alteração são marcados com #[frb(ui_mutation)]
  • RustState tem count: i32
  • new() inicializa count com 100
  • increment() aumenta count em 1
• Diz-se que #[frb(ui_state)] e #[frb(ui_mutation)] são extremamente leves, sem mágica escondida por trás, e o código tem cerca de dez linhas
• A UI em Flutter é escrita de forma declarativa
  • Text mostra a contagem atual
  • TextButton chama state.increment
  • Os dois elementos são agrupados em uma coluna com padding aplicado
• Ao modificar a UI durante a execução, é possível verificar as mudanças imediatamente com hot reload

Exemplo de app de lista de tarefas

• O app de lista de tarefas é uma seção opcional para fins de completude e representa apenas uma das várias abordagens que o flutter_rust_bridge pode suportar
• O estado em Rust inclui os itens da lista, o texto de entrada, o filtro e o próximo ID
  • items: Vec<Item>
  • input_text: String
  • filter: Filter
  • next_id: i32
• Item tem id, content, completed
• Filter tem All, Active, Completed
• As ações de mudança de estado são implementadas sob #[frb(ui_mutation)]
  • add() adiciona um item com o texto atual de entrada e limpa o campo
  • remove(id) remove o item com o ID correspondente
  • toggle(id) inverte o estado de conclusão
• A lógica de negócio é composta por filtered_items() e Filter::check()
  • All deixa passar todos os itens
  • Active deixa passar apenas itens não concluídos
  • Completed deixa passar apenas itens concluídos
• A UI em Flutter organiza em uma coluna um campo de texto, uma list view e uma linha de botões de filtro
  • SyncTextField conecta mudanças de entrada e envio às alterações de estado em Rust
  • Cada item da lista é composto por checkbox, texto e botão de exclusão

Localização do código e execução

• O código completo está no repositório flutter_rust_bridge
  • frb_example/rust_ui_counter
  • frb_example/rust_ui_todo_list
• A maior parte consiste em arquivos de boilerplate gerados automaticamente por recursos do Flutter
• Os arquivos principais são src/app.rs e ui/lib/main.dart
• Para executar a demonstração, rode o seguinte comando no diretório ui
  • flutter_rust_bridge_codegen generate && flutter run