react-to-flutter
React → Flutter
Treat React as evidence of product requirements, not as the architecture to copy. Preserve routes, data contracts, state transitions, validation, loading/error/empty states, accessibility, persistence, and platform behavior. Rebuild them with Flutter's widget, lifecycle, constraint-layout, and platform models.
Inspect before implementation
When source is available, inspect the entry points, package.json, routes, page and shared components, hooks, contexts/stores, TypeScript types, API clients, forms, persistence, CSS/theme files, assets, browser APIs, integrations, and tests. Read TypeScript types rather than inferring contracts from use sites.
For non-trivial migrations, create an inventory before bulk implementation:
| Area | Required behavior | Flutter decision | Risk | Verification |
|---|---|---|---|---|
| Routes | URLs, deep links, redirects | Navigator/Router design | route tests | |
| State | ownership and transitions | local state, state owner, repository | unit/widget tests | |
| Data | contracts and failures | service and repository | contract tests | |
| UI | layout and interactions | widgets and theme | widget/golden tests | |
| Platform | browser/native capability | plugin, interop, or alternative | target-platform test |
Do not leave important, high-risk behavior as an assumed mapping. Record unsupported capabilities and the required product decision; never silently omit them.