Skip to content
Primio Docs

Working with Flutter Code

You don’t need to know Flutter to use Primio. The AI handles the code. But understanding the basics of what it generates helps you write better prompts, navigate the file browser, and make sense of what the AI is doing.

Why Flutter?

Section titled “Why Flutter?”

Flutter compiles to native ARM code for Android and iOS from a single Dart codebase. Your app runs at 60fps with platform-native performance — it’s not a web wrapper or hybrid framework.

For a deeper look at the technical advantages, see Why Flutter?.

Project structure

Section titled “Project structure”

Every Primio project follows the standard Flutter project layout:

lib/
├── main.dart             # App entry point — starts the app, sets up routing
├── screens/              # Individual screens/pages
│   ├── home_screen.dart
│   ├── detail_screen.dart
│   └── settings_screen.dart
├── widgets/              # Reusable UI components
├── models/               # Data classes (user, post, recipe, etc.)
├── services/             # API calls, business logic, database access
└── utils/                # Helper functions (formatting, validation)
pubspec.yaml              # Dependencies & project config
assets/                   # Images, fonts, and other static files

Not every project uses all these folders. A simple app might have everything in lib/screens/ and lib/widgets/. As your app grows, the AI creates more folders to organize the code.

Key concepts

Section titled “Key concepts”

You don’t need to learn Dart or Flutter. These five concepts are enough to understand what the AI is doing and communicate effectively with it.

Widgets. Everything in Flutter is a widget. Buttons, text, images, layouts, entire screens — all widgets. When the AI says “I’ll create a custom widget for the card layout,” it means a reusable UI component.

Screens. Each page of your app is typically one Dart file in lib/screens/. The home screen, settings screen, profile screen — each gets its own file. When you ask for a new page, the AI creates a new file here.

Navigation. Flutter uses a router to move between screens. When you ask the AI to “add a button that goes to the settings page,” it wires up a navigation route. Common patterns include bottom navigation bars, drawer menus, and tab layouts.

State. Data that changes during your app’s lifecycle — user input, API responses, toggle switches, selected items. The AI manages state for you, but knowing the concept helps when you describe features: “When the user toggles dark mode, the theme should update across all screens.”

pubspec.yaml. The project’s configuration file. Lists all packages (dependencies) your app uses — things like HTTP clients, image pickers, database libraries. When the AI adds a feature that needs a third-party package, it updates this file automatically.

Using the file browser

Section titled “Using the file browser”

Open the file browser via Workspace → Code. You can:

  • Browse the file tree to see all project files organized by folder
  • Search for files by name using the search field at the top
  • Read code in the built-in editor to understand what the AI built
  • Reference files in prompts using @file: syntax to direct the AI to specific files

The file browser is read-only — you can view and copy code, but cannot edit, add, or delete files manually. All changes are made through chat prompts. Source file editing is coming soon.

Useful prompts when working with code

Section titled “Useful prompts when working with code”

Once you’ve browsed the file structure, you can write more targeted prompts.

Ask the AI to explain code:

What’s the structure of the home screen? Walk me through the main components.

Direct changes to specific files:

In @file:lib/screens/home_screen.dart, add a search bar at the top of the page with real-time filtering of the recipe list.

Ask about dependencies:

What packages are we using? Are there any that are outdated or unnecessary?

Clean up after major changes:

Open the Prompt Library and use “Review & Simplify Code” to ask the AI to clean up the codebase without changing functionality. This is useful after building several features in a row.

Understand what changed:

What files did you just modify? Explain the changes.

Exporting and continuing locally

Section titled “Exporting and continuing locally”

If you want to take the code out of Primio and develop independently:

  1. Export your source code

    Go to Workspace → Export and download the full Flutter project. This requires a paid plan.

  2. Open in your IDE

    Open the extracted folder in VS Code, Android Studio, or any editor with Dart support.

  3. Install dependencies

    Run flutter pub get in the project directory to download all packages listed in pubspec.yaml.

  4. Run locally

    Run flutter run to launch the app on a connected device or emulator. You need the Flutter SDK installed.

See Code Export for full details on what’s included and how to work with exported code.

Next steps

Section titled “Next steps”