Vindo do Flutter

Flutter é o par filosófico mais próximo do CrossFly — ambos renderizam via GPU, sem widgets nativos, então a aparência é idêntica em todas as plataformas. A diferença é o modelo: Flutter reconstrói a partir do estado; CrossFly você muta objetos. Leia primeiro a filosofia.

Tabela de tradução

Flutter	CrossFly
`Widget`	`Component`
`StatelessWidget` / `StatefulWidget`	subclasse de `Component` / `Window`
`build(context)`	`onShow()` (montar) / `onPaint()` (desenhar)
`setState(() => ...)`	mutar campo + `repaint()` (+ `setValidLayout(false)` se mudou tamanho)
`Scaffold`	`Window` (+ `TabBar` para abas)
`Navigator.push` / `pop`	`window.show()` / `hide()`
`Column` / `Row`	`VerticalLayout` / `HorizontalLayout`
`Expanded` / `Flexible`	`add(LAY_FILL, c)` (`-1f`)
`Padding`	`ingap` no estilo (`ComponentStyle`)
`SizedBox` / `Spacer`	`Gap` / frações no layout
`ListView.builder`	`VirtualListView`
`Text`	`Label`
`ElevatedButton` / `TextButton`	`Button`
`TextField`	`TextField`
`showDialog` / `AlertDialog`	`Alert`
`SnackBar` / `Tooltip`	`Hint`
`Theme` / `ThemeData`	`Theme` / `ColorScheme` / `Skin`
`Future` / `async` / `await`	`Thread` + `Component.onUI(...)`
`Color(0xFF2196F3)`	`int 0xFF2196F3` (`UIConstants` / `ColorUtils`)
`shared_preferences`	sem equivalente → SQLite (guia)

Botão com ação

// Flutter
ElevatedButton(onPressed: salvar, child: Text("Salvar"))

// CrossFly
new Button("Salvar").onAction(c -> salvar());

Tela com lista

// Flutter
ListView.builder(itemCount: itens.length,
   itemBuilder: (ctx, i) => ListTile(title: Text(itens[i].nome)));

// CrossFly — vitualizado, montado em onShow()
VirtualListView lista = new VirtualListView(Relative.ofFont(3f), new DataAdapter() {
   public int getCount() { return itens.size(); }
   public Component createView() { return new Label(""); }
   public void bindView(Component v, int i) { ((Label) v).setText(itens.get(i).nome); }
});
add(LAY_FILL, lista);

Diálogo de confirmação

// Flutter
showDialog(context: ctx, builder: (_) => AlertDialog(
   title: Text("Excluir"), content: Text("Confirma?"),
   actions: [ TextButton(onPressed: excluir, child: Text("Excluir")) ]));

// CrossFly — textos no construtor; ação por índice
Alert a = new Alert("Excluir", "Confirma?", "Cancelar", "Excluir");
a.buttonAction(1, c -> excluir());
a.show();

Boas práticas na virada

Onde você faria setState, faça mutação + repaint() — guarde a referência do widget.
Onde havia FutureBuilder/async, use Thread + Component.onUI (ver background).
Expanded vira LAY_FILL; Padding vira ingap no estilo.

Veja também

Get Started · Layouts · Navegação