Nowa and your Flutter code
Every screen you design and every change Nowa AI makes ends up as real code in a standard Flutter project, and the project is yours. Flutter is Google's toolkit for building iOS, Android, web and desktop apps from one code base, and its apps are written in a language called Dart. Read the code, edit it by hand, add code of your own, and keep using the board and Nowa AI on the same files.
Install the desktop app and set up Flutter. Then import your folder as a local-only project, open it in VS Code and keep its history with Git.
What's in your project
Open code mode to browse the whole project. If you've never seen a Flutter project before, this is the map. Nowa creates new files in these places:
| File or folder | What's in it |
|---|---|
lib/main.dart | Where your app starts. You can edit it, but you can't delete it. |
lib/pages/ | Your screens. |
lib/components/ | Your components. |
lib/models/ | Your data models. |
lib/globals/ | App-wide files: global state, themes, routes and constants. |
boards/ | Your boards, saved as .board files for Nowa. They aren't part of your app's code. |
assets/ | Images, fonts and other files. |
pubspec.yaml | The project's settings file: its name, its packages (ready-made add-ons from pub.dev), assets and fonts. |
Integrations add their own folders under lib/, such as lib/api/ for REST API collections. The project also holds the usual platform folders, such as android/, which Flutter uses to build your app for each platform.
How code and design stay in sync
The board, Nowa AI and your own edits all change the same files, so Nowa keeps them in step in both directions.
| When you | What happens |
|---|---|
| Change something on the board or in Details, or Nowa AI builds it | Nowa rewrites the code it owns. Code that belongs to Nowa is marked @NowaGenerated, a tag on the declaration. |
| Edit code in code mode | Nowa reads your edits back when you save with Ctrl/Cmd + S, or when auto save runs. The board updates. |
| Write code of your own | Nowa reads it so it can draw it, and writes it back exactly as you wrote it, until you change that part visually. |
When you change one of your own declarations visually, Nowa takes it over. It adds @NowaGenerated and an import of package:nowa_runtime/nowa_runtime.dart, turns relative imports into package: imports, and can reorder constructor parameters or write 16 as 16.0. Anything you haven't touched stays as you wrote it.
Files that Nowa saves follow the formatter page width in your project's analysis_options.yaml (80 when the project sets none), so your diffs show only what changed. If an edit by Nowa AI would leave a Dart file with syntax errors, Nowa refuses it and writes nothing.
Nowa reads your code to draw it on the board. It doesn't run it there the way a real device does. When Nowa can't read a part of a file, it skips that part, loads the rest and tells you why. See What Nowa can show on the board.
Where your code lives
- Cloud projects live in your Nowa account. Edit them in Nowa, push them to GitHub with Git, or download the code.
- Local projects are folders on your computer, so any editor can open them. See Work with local projects and Use Nowa with VS Code.
Cloud and local projects compares the two.
In this section
| Page | What you can do |
|---|---|
| Edit code in Nowa | Open code mode, work in tabs, edit Dart with find, autocomplete and go to definition, and preview your app next to the code. |
| Manage project files | Add, move and delete files with the Library, browse the whole project in code mode's Files tree, and search it. |
| Add packages | Add, update and remove pub.dev packages. |
| Write your own code | Use your own widgets, functions and classes on the board, and import Dart code. |
| What Nowa adds to your code | See the files, classes, packages and platform settings Nowa adds for each feature, such as an integration. |
| What Nowa can show on the board | See what the board can't draw yet, and check the real result with Run. |
| Import an existing Flutter project | Bring in an app you already have, from a folder or from GitHub. |
| Work with local projects | Keep your app in a Flutter folder on your computer, link it to the cloud and find it again if it goes missing. |
| Use Nowa with VS Code | Open the same folder in Nowa and VS Code at once and see every save in both. |
| Use Git and Connect GitHub | Keep a history of your code, sync it with GitHub and work on it as a team. |
You never have to open code mode. Describe the change to Nowa AI, then read what it changed here if you're curious.
Next steps
- Install the desktop app: set up Flutter so you can use local projects.
- Download your code: take the full Flutter source with you.
- Get ready to publish: put your app on the web, Android and iOS.