# Flutter से आना

> Flutter से आने वालों के लिए पूर्ण Widget→Component तालिका और "पहले कैसा था / अब कैसा है" उदाहरण।

Source: https://crossfly.dev/hi/docs/migrate/from-flutter — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# Flutter से आना

Flutter CrossFly का दार्शनिक रूप से सबसे निकटतम साथी है — **दोनों GPU के माध्यम से रेंडर करते हैं, बिना नेटिव
विजेट्स के**, इसलिए दिखावट सभी प्लेटफ़ॉर्म पर एक समान है। अंतर मॉडल में है: Flutter
स्टेट से **पुनर्निर्माण** करता है; CrossFly में आप **ऑब्जेक्ट्स को म्यूट** करते हैं। पहले
[दर्शन](/docs/migrate/overview) पढ़ें।

## अनुवाद तालिका
| Flutter | CrossFly |
|---|---|
| `Widget` | `Component` |
| `StatelessWidget` / `StatefulWidget` | `Component` / `Window` का सबक्लास |
| `build(context)` | `onShow()` (माउंट करना) / `onPaint()` (ड्रॉ करना) |
| `setState(() => ...)` | फ़ील्ड म्यूट करें + `repaint()` (+ `setValidLayout(false)` यदि आकार बदला) |
| `Scaffold` | `Window` (+ टैब के लिए `TabBar`) |
| `Navigator.push` / `pop` | `window.show()` / `hide()` |
| `Column` / `Row` | `VerticalLayout` / `HorizontalLayout` |
| `Expanded` / `Flexible` | `add(LAY_FILL, c)` (`-1f`) |
| `Padding` | स्टाइल में `ingap` (`ComponentStyle`) |
| `SizedBox` / `Spacer` | लेआउट में `Gap` / अंश |
| `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` | **कोई समकक्ष नहीं** → SQLite ([गाइड](/docs/data-and-services/files-and-preferences)) |

### एक्शन के साथ बटन
```dart
// Flutter
ElevatedButton(onPressed: salvar, child: Text("Salvar"))
```
```java
// CrossFly
new Button("Salvar").onAction(c -> salvar());
```

### सूची वाली स्क्रीन
```dart
// Flutter
ListView.builder(itemCount: itens.length,
   itemBuilder: (ctx, i) => ListTile(title: Text(itens[i].nome)));
```
```java
// CrossFly — वर्चुअलाइज़्ड, 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);
```

### पुष्टिकरण डायलॉग
```dart
// Flutter
showDialog(context: ctx, builder: (_) => AlertDialog(
   title: Text("Excluir"), content: Text("Confirma?"),
   actions: [ TextButton(onPressed: excluir, child: Text("Excluir")) ]));
```
```java
// CrossFly — कंस्ट्रक्टर में टेक्स्ट; क्रिया इंडेक्स द्वारा
Alert a = new Alert("Excluir", "Confirma?", "Cancelar", "Excluir");
a.buttonAction(1, c -> excluir());
a.show();
```

## बदलाव के दौरान सर्वोत्तम प्रथाएँ
- जहाँ आप `setState` करते, वहाँ **म्यूटेशन + `repaint()`** करें — विजेट का रेफ़रेंस रखें।
- जहाँ `FutureBuilder`/`async` था, वहाँ **`Thread` + `Component.onUI`** का उपयोग करें (देखें [background](/docs/data-and-services/background-work))।
- `Expanded` बन जाता है `LAY_FILL`; `Padding` बन जाता है स्टाइल में `ingap`।

## यह भी देखें
- [शुरू करें](/docs/get-started) · [लेआउट](/docs/ui/layouts) · [नेविगेशन](/docs/ui/navigation)