Flutter UI generator
Describe a screen in plain words and get real Flutter UI: layouts, reusable widgets and a theme, running in a live phone preview. Refine it by chat and keep the Dart code.
Free to start, no card needed. Read every generated file in Show code, then download it or sync it to GitHub on Pro and up.
Five apps built in FlutterGo from prompts. Each screen below is a capture of that app's live preview, and each app's colours, type and layout came from its own prompt.
Sample data: the dishes, plants, gifts, services, prices and products in these captures are placeholders.
The idea behind each app, in one line:
A weeknight dinner app and a birthday gift planner call for different moods, so each app got its own palette, type and layout. Some ideas also name features that need more than a screen, such as watering reminders and live van tracking. The generator draws the interface. Sending a reminder or tracking a van needs a service you connect afterwards. Kora's other screens are on the booking app builder page.
Dart, not mock-ups. As a Flutter UI code generator, FlutterGo turns each request into Material 3 widgets inside a standard Flutter project, with Riverpod for state and go_router for navigation. One codebase serves iOS and Android.
Every screen you describe becomes a widget tree of real text, buttons, lists and images. Northwind Goods has eight, from the splash and sign-in screens to the bag, checkout and orders. Each sits in its own folder under lib/features. The preview hot-reloads as the agent writes, so you watch the layout take shape.
In Northwind Goods, the quantity control on each bag line is its own widget class that takes a number and a callback. Its code is further down this page. Widgets meant for several screens live in lib/shared/widgets, and you can ask in chat for any repeated piece to move there.
The palette is a set of named colours in lib/theme/app_colors.dart, beside app_theme.dart. Widgets read their colours from AppColors and the theme, so one edit in one file restyles every screen. Type is a chat request too: ask for a serif for headings, then check each screen in the preview.
Routes are declared with go_router in lib/router/app_router.dart, so the path from product to bag to checkout is code you can read and change. Kora moves between four bottom tabs: Discover, Services, Bookings and Profile. Ask in chat for a new tab, a new route or a different back behaviour.
Three steps take a description to screens you can refine, and the preview runs in your browser with no Mac or emulator. This route starts from words. If your screens already exist as a design, Figma to Flutter starts from that file instead.
Write what the screen is for and what it shows: the sections, the items in each list and the actions people can take. Add the mood in a few words, such as warm and minimal, and send it from the home page composer. The agent plans the screen and writes the Dart while the preview updates.
Pick a saved design system, or attach screenshots or an HTML page as the look to follow. If you already have brand colours and fonts, name them in the prompt. The palette ends up in the project's theme files, which every screen reads.
Ask for one change per message, such as two product cards per row or an empty state for the bag, and check it in the preview. Each chat command costs 1 credit. Use Edit mode for small fixes to text, colours and spacing, and Show code to read or edit any file.
Build a shopping app for Northwind Goods, a small home goods shop. Keep it warm and minimal: a cream background, warm white cards, deep forest green for the main actions and a gold accent used sparingly. Give it six screens: home, product detail with colour and size variants, bag, checkout, orders and account. On each bag line, add a rounded quantity stepper that removes the item below 1 and stops at 9. Keep every colour in one theme file and put shared widgets in their own folder. Use sample data.
Two excerpts from the code FlutterGo generated for Northwind Goods, the home goods shop in the demo, shortened to fit this page. First the palette, then a reusable control from the bag screen.
/// Northwind Goods, warm, minimal home-goods palette.
/// Cream canvas, deep-green accent, a restrained gold note.
abstract final class AppColors {
static const Color background = Color(0xFFF5EDDD); // warm cream
static const Color surface = Color(0xFFFFFCF5); // warm white (cards/sheets)
static const Color primary = Color(0xFF1F4A38); // deep forest green
static const Color accent = Color(0xFFBE9A42); // gold, used sparingly
static const Color ink = Color(0xFF2B2620); // warm near-black
static const Color line = Color(0xFFE6DAC5); // warm hairline
}Each colour is a named constant with a comment on its job: cream for the canvas, warm white for cards and sheets, forest green as the primary and gold for small touches. The stepper below asks for AppColors.background and AppColors.line rather than hex codes. Change a value in this file and every widget that reads that name follows.
class _QtyStepper extends StatelessWidget {
const _QtyStepper({required this.qty, required this.onChanged});
final int qty;
final ValueChanged<int> onChanged;
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: AppColors.background,
borderRadius: BorderRadius.circular(999),
border: Border.all(color: AppColors.line),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
_StepButton(
icon: Icons.remove,
// At 1, stepping down removes the line.
semanticLabel: qty > 1 ? 'Fewer' : 'Remove item',
onTap: () => onChanged(qty - 1),
),
Text('$qty'),
_StepButton(
icon: Icons.add,
enabled: qty < 9,
semanticLabel: 'More',
onTap: () => onChanged(qty + 1),
),
],
),
);
}
}_QtyStepper keeps no state of its own. The bag screen passes in the quantity and a callback, so the same class can serve every line. At 1, the minus button removes the line, and a screen reader announces Remove item instead of Fewer. The plus button stops at 9. The leading underscore keeps the class private to bag_screen.dart; to use it on another screen, ask the agent to move it into lib/shared/widgets.
Around those two files, the Northwind Goods project follows the standard layout:
lib/theme holds app_colors.dart and app_theme.dart, the palette and theme the widgets read.lib/features has one folder per screen, such as home, product, bag, checkout, orders and account.lib/shared/widgets keeps shared pieces apart from any single screen.lib/router/app_router.dart declares the go_router routes.lib/providers, with lib/models and lib/data beside them.flutter run.
Treat the first result as a draft. Change it in plain words, one request per message, and check each change in the preview before you send the next.
Used this way, FlutterGo is a Flutter UI builder you steer in sentences. A good request names the screen, the part and the change. Sending one per message keeps each result easy to judge. Here are three that would suit the Northwind Goods shop; each is one chat command and costs 1 credit.
Make the product cards two per row with larger photos. Use a serif for headings. Add an empty state to the bag.
Edit mode for small tweaks. Some fixes are quicker by hand than by prompt: a wrong word, a cramped margin, a shade that is slightly off. Edit mode lets you change text, colours and spacing on the preview itself. The blog post on how FlutterGo keeps visual changes and Flutter code in sync goes deeper.
Show code for everything else. Show code opens every file in the project. Read the files after a request, or edit a widget yourself when typing is faster than describing.
Keep a look you like. Save it as a design system and pick it for your next project, or attach screenshots or an HTML page as the look to follow. The templates and design systems chapter explains both.
Generated screens show sample data until real services stand behind them. Data, sign-in, payments and business rules come next, and each one runs on an account you hold.
Data and sign-in. Supabase is the main backend. Connect it once from Settings, approve access when its window opens, and each app can link an existing Supabase project or create a new one. Ask for the tables your screens need: the agent wires auth, Postgres tables, storage, realtime and an RLS-safe client behind the UI you already have. Firebase has its own setup form, and an existing REST API works too if you ask the agent to point the app at it. The backends chapter has the steps.
Payments. FlutterGo is not a payment processor. Ask for payments and a Stripe setup form shows up in the Setup list of the project console, asking for your publishable and secret keys. The publishable key is built into the app. The secret key lives only on the server, in .env.server, and GitHub never receives it. Money moves through your own Stripe account, so a success screen in the preview proves nothing until the test payment shows up there.
Business rules. Hiding a button when stock runs out is a display choice, not a rule. Prices, limits and who may read which rows belong on the server. Ask for row-level security and server-side checks in Supabase, then try to break them from a second account.
An admin panel in the app's theme. Pro and higher plans add a website and an admin panel that share the app's Supabase backend and wear its theme. You sign in there to add, edit and delete data and to manage users. The website and admin panel chapter covers it, and the ecommerce app builder page covers a full shop.
You can generate and preview UI on every plan, Free included. Download code and GitHub sync start at Pro.
| Plan | Price | Credits | What it adds |
|---|---|---|---|
| Free | $0 | 5 at sign-up, kept until used | Build and live preview, up to 2 projects |
| Starter | $19 a month | 50 a month | An Android test APK to install on your phone |
| Pro | $49 a month | 150 a month | Download code and GitHub sync, publishing to Google Play and the App Store, a website and admin panel, your own AI and MCP |
| Business | $99 a month | 500 a month | Everything in Pro, plus the Secrets Vault |
These are monthly list prices in US dollars; some countries get a regional price at checkout, and the pricing page shows yours.
What a credit buys. Each chat command costs 1 credit, whether it creates a screen or nudges a margin, so a credit pays for a turn rather than a fixed amount of UI. Fix with AI costs nothing. An Android test APK costs 1 credit, refunded if the build fails.
What you need. A browser and a FlutterGo account. Previewing works without a Mac or an emulator. To work on the code locally, download it from Pro and load it into VS Code or Android Studio. Store publishing needs your own Google Play developer account, and for iOS an Apple Developer account and a connected GitHub repo. See plans and included features, or read plans and billing for how credits work.
Answers on the code, the look and what each plan unlocks.
Yes. Describe a screen in chat and the FlutterGo agent plans it and writes the Dart while you watch, and the app hot-reloads into a phone preview in your browser. The output is a standard Flutter project with Material 3 widgets, Riverpod state and go_router navigation. The Free plan includes 5 credits at sign-up to start your first project.
Real code. Every screen is Dart in a standard Flutter project, and the phone preview is that project running, not a picture of it. Buttons, lists and text are real widgets you can tap, and Show code opens files such as lib/theme/app_colors.dart for reading or editing.
Yes. Plain Dart classes travel well: on Pro and up, download the project and copy the widget files into another Flutter app. Bring lib/theme along or swap in your own colours, because widgets like the Northwind stepper read their colours from AppColors. A private class such as _QtyStepper is only visible inside its own file, so drop the underscore if other files need it.
Yes. Name them in your prompt, pick a saved design system, or attach screenshots or an HTML page as the look to follow. For fonts, the agent uses ones it can load, such as system and Google fonts, and custom font files can be added afterwards. To change a colour later, ask in chat or use Edit mode on the preview.
The starting point. Here you begin with words, and the agent designs the screens from your description. Figma to Flutter begins with frames you have already designed: each top-level frame becomes a screen, and the agent builds it to match. Both end as an editable Flutter project that you refine by chat.
Yes, on Pro and up. Under Ship, Download code saves a ZIP of the whole Flutter project, and GitHub sync keeps a copy in a private repository under your own GitHub account. It opens in VS Code or Android Studio like any Flutter project, and flutter run starts it. Cancelling later does not take back code you have already downloaded or synced.
Yes: the same Flutter code runs on both, and you can preview it in a browser without a Mac or an emulator. On Starter, install an Android test APK on your own phone. From Pro, a signed App Bundle goes to the Google Play track you pick, and GitHub Actions builds and signs the iOS app on a cloud Mac runner in your own repository for TestFlight. Store review stays with Apple and Google, and you need your own developer accounts.
Describe your first screen and watch it run as real Flutter.Free to start, no card needed.