Flutter
Design to Flutter code
Design the screen on the One Redesign canvas, then export it. Every widget lands in a `Positioned` inside a `Stack` at the x and y you drew, so Flutter's flex system never gets a chance to reinterpret your layout. The same screen also exports to React Native, HTML/CSS, and SwiftUI.
What does the Flutter output look like?
This is the actual export, unedited.
Why does it match the design exactly?
Coordinate-exact placement
every widget sits in a `Positioned(left:, top:)` at the design's literal x/y inside a `Stack`, so the widget sits where you put it.
Angle-accurate gradients
gradient fills export as `BoxDecoration(gradient: LinearGradient(...))`, with begin and end `Alignment`s computed from the same angle you set on the canvas, not a fixed diagonal.
Multiline fields that actually grow
a multiline `TextField`'s height is measured live (matching its own font, size, and width) and grows to fit typed content, pushing elements below it down by the same amount.
Real scroll behavior
the screen wraps in a `SingleChildScrollView` sized to the full canvas/content height, including live multiline growth, whenever content is taller than the device.
Does the Flutter output build?
Yes. Generated Flutter is verified against the real Flutter SDK: it passes `flutter analyze` clean and `flutter build web` succeeds, run by a dedicated verification suite rather than checked by hand. The export is code that builds, not code that looks like it would.
Is the Flutter output responsive?
No. One screen, one device size, no `LayoutBuilder` and no breakpoints. Cover more sizes by drawing more screens.
Do I own the exported Flutter code?
Yes. Plain Dart, straight into your `lib/`. Nothing to install.
See all four platforms
Try it with Flutter
The demo opens on the Flutter tab. Edit the canvas and watch the code change.