Prompt, design & code generation

This chapter follows a request from your idea to running code. It covers how FlutterGo plans and builds a new app, the quick questions it may ask, how to give it references, what happens when the code has errors, and how to read the code.

The short version: you describe your app, and the agent plans its design and builds the first screens. FlutterGo checks the code, repairs errors, and shows the preview. Then it keeps building the remaining screens. Everything below uses the labels you see on screen, so keep FlutterGo open while you read.

What you need#

• You know the basics of talking to the agent (Working with the AI agent).
• You are on Home, ready to describe a new app, or you have a project open.

How to do it#

1. Describe your app on Home#

1. In the box on Home, describe your app: "Describe the app you want: the screens, the features, how it should feel. We build it."
2. Keep Mobile app selected for a Flutter app, or choose Website for a website (see Website projects below).
3. Click Start building.
4. FlutterGo asks Where should data live? Choose Supabase for sign-in and a database from day one, or Skip for now. Then click Open workspace (Backends: Supabase, Firebase & secrets).

To start from something you already have, use + (Add context) or the tiles under the box:

Tip: The more you describe, the better the first build: the main screens, what each one does, and the feel you want.

2. Answer the quick questions (sometimes)#

If your description is short, such as "a fitness app", the agent first posts a short plan and asks a few questions. The chat shows "Mind if I ask a couple of quick questions?" Open the Questions tab to see the form: "Here's a starter plan for your app. Tweak any answer, or Continue to build with these defaults."

The agent writes the questions for each app, so they vary. They usually cover:

• your app plan: its name, who it's for, and its main screens;
• what to build first: the phone app alone, or with an admin dashboard, a website, or a landing page (some of these need the Pro plan);
• Look & feel and Color & brand system: cards with colors and fonts to choose from;
• navigation, pictures, animations, and how users sign in.

Change any answer you like, then click Continue. Answering is free. With a detailed description the agent skips this step and builds straight away.

3. Watch the plan and the first screens#

1. The agent writes a plan for your app: its design direction (colors, fonts, shapes, navigation) and the list of screens.
2. A Todos card shows the tasks with a done counter. Click Show tasks to see them all.
3. For a new app, the first turn usually builds the theme, the navigation, and the first screens: splash, onboarding, and home. If you named specific screens, it builds just those.

While it works, the reply shows its progress through Plan, Design, Screens, and Preview.

4. Let FlutterGo check the code and show the preview#

After each turn, FlutterGo checks the code with flutter analyze:

• Errors found: FlutterGo sends them back to the agent to fix. The repair shows in the chat as a message such as "Fix 3 code errors", tagged Free · no credits.
• No errors: the preview builds by itself.
• The preview build fails: FlutterGo sends that error to the agent too.

Anything still wrong shows in Analysis in the right panel, with Fix with AI and Check again. Errors from the running app appear under Runtime errors (browser console), also with Fix with AI. Repairs are free.

5. Let it finish the remaining screens#

When screens are left after a turn, FlutterGo continues on its own once the preview has started. It sends Continue remaining tasks, or the next screen's task such as "Build the Categories screen", for a few turns in a row. Continuing is free. This happens while the project is open in your browser; if you closed it, open the project again and continue by hand (below).

You can also do it yourself: under the last reply, {n} tasks left lists what remains. Click Build next to a screen, or Build all. Needs your input means the agent is waiting for an answer from you first.

6. Add references and designs#

In your project, click + (Add context) in the composer:

• Attach files: screenshots of designs you like, your logo, product photos, or documents. You can also paste an image or drop a file onto the composer. Remove a file with its × before sending.
• Attach Figma link: connect Figma first, then paste a link to a Figma file. FlutterGo pulls its screens and images, and the agent builds from them (Integrations & connectors).
• Connectors: let the agent read from an account you connected, such as Notion or GitHub.

Prefer talking? Click the microphone (Dictate) and speak your request.

7. Read and edit the code#

Click Show code at the bottom of the right panel. The code view opens with a Files list on the left. Click a file to open it, and Hide code to close the view. In a new project you may see "No Dart or pubspec files yet. Generated code will appear here." In a Website project, use View code above the site preview.

You can edit the code yourself. Changes save automatically while you type ("Saving…"). FlutterGo then checks the code again and rebuilds the preview when it is clean.

• Every plan can read and edit the code. Downloading it as a ZIP (Download code) needs Pro or higher (Your code: export & download).
• Edits are never pushed to GitHub on their own. Push from Ship → GitHub when you're ready (Save your code to GitHub).

Success: The generated Dart is standard Flutter with no lock-in. Once on GitHub or downloaded, your project is a normal Flutter app you can open in any editor.

8. Refine#

There is no separate "regenerate" button. You refine with your next message:

• Not happy with a change? Ask "undo the last change", adjust your request, and send it again.
• Want a variation? Describe the difference: "same screen, but with a bottom navigation bar instead of tabs."
• Not sure what to ask for? Switch to Plan, talk it through, then switch back to Build.
• If a turn failed, click Retry, or Continue the run when it's offered. Both are free.
• To change a message you sent, click the pencil on it (Edit & resend). That sends it again as a new message (1 credit) and removes the messages after it. Changes already made to your app stay.
• Fork from here on a reply starts a new chat that continues from that point.

Common mistake: Rewriting the whole prompt from scratch each round. Iterate instead: the agent keeps the conversation, so "make the cards smaller" is enough.

Website projects#

Choose Website on Home to build a website instead of an app. The project opens on its Website tab, and the agent builds a Next.js website instead of a Flutter app: its pages, real copy and photos, its own colors and fonts, and search-friendly page details. It skips the quick questions.

Each change gets a public preview link on previews.fluttergo.ai, on every plan. Publishing the site to your own Vercel account needs Pro (Web deployment). On Free and Starter, a Website project builds the website only. For an app, start a new project as Mobile app.

Troubleshooting#

Problem: The agent asked questions instead of building. Possible causes: Your description was short, so the agent proposed a starter plan first. Solution: Check the answers in the Questions tab and click Continue. Next time, describe the screens and features you want, and it builds straight away.

Problem: The same errors keep coming back. Possible causes: The automatic repairs could not fix them. Solution:

1. Open Analysis and click Fix with AI.
2. Describe what you see in the chat, and name the screen.
3. Still stuck? Click Help beside the preview to reach support.

Problem: My attachment did not upload. Possible causes: A network hiccup during upload. Solution:

1. Look for the "Attachment upload failed" message under the composer.
2. Remove the failed file and attach it again.
3. If it keeps failing, paste the image into the composer instead.

Problem: The code view is empty. Possible causes: The project has no code yet. Solution: Send a build request first. The view says "No Dart or pubspec files yet. Generated code will appear here." until then.

FAQ#

What does the agent build first? For a new app: the theme, the navigation, and the first screens (splash, onboarding, and home). The other screens follow automatically, or when you click Build or Build all.

Do I have to answer the quick questions? No. Click Continue to build with the suggested answers.

Can I use my own colors and fonts? Yes. Pick them in the quick questions, or just tell the agent, for example "use deep green and a rounded font". Attach your logo or brand guide too. See Cloning apps & design systems.

Can I build from a Figma design? Yes. Connect Figma, then use the Figma tile on Home or + → Attach Figma link in a project. You can also attach a screenshot of any design as a reference.

Do repairs cost credits? No. The automatic repairs, Fix with AI, and Retry after a failed turn are free.

Does dictation work in any language? Dictation listens in English.

Can I edit the code by hand? Yes. Open Show code and type; changes save automatically. Most people let the agent do the editing.

Where to go next#

• Working with the AI agent: the composer, modes, and what each message costs.
• Preview, run & build: see your app running.
• Testing & debugging: when a build doesn't compile.