HTML/CSS/JavaScript → Flutter

Rebuild the source application according to Flutter's rendering, state, and platform models. Preserve product intent, behavior, semantics, and visual system; do not recreate the DOM in widgets.

Operating model

Treat the source as four overlapping systems:

• HTML → semantic structure, information hierarchy, controls, content relationships.
• CSS → layout intent, constraints, responsive behavior, design tokens, interaction states, typography, decoration, animation.
• JavaScript/TypeScript → state transitions, business rules, data access, events, routing, persistence, async behavior, browser integrations.
• Flutter/Dart → declarative widgets, constraint-driven layout, typed state/data models, explicit architecture, platform adaptation.

Remember the Flutter box-layout rule:

Constraints go down. Sizes go up. Parents set positions.

Model UI as UI = f(state), not as a mutable collection of elements.