Google Antigravity - freeCodeCamp.org

Learn How AI Agents Are Changing Software Development by Building a Flutter App Using Antigravity and Stitch

Atuoha Anthony — Wed, 11 Mar 2026 21:55:51 +0000

Software development has always evolved alongside the tools we build.

There was a time when developers wrote everything in assembly language. Then higher-level languages arrived and made it possible to think less about the machine and more about solving problems. Frameworks followed, removing the need to repeatedly implement the same patterns.

Today, we are witnessing another shift, and it is happening faster than many people expected.

Artificial intelligence is beginning to participate directly in the development process.

At the 2026 World Economic Forum in Davos, Anthropic CEO Dario Amodei suggested that AI agents could soon be capable of performing most software engineering tasks end-to-end within six to twelve months.

Around the same time, Spotify’s Chief Technology Officer Gustav Söderström revealed something that sounded even more surprising: some of Spotify’s top developers had not written a single line of code in 2026. AI systems generated the implementations while engineers reviewed and supervised the results.

Large technology companies are already reorganizing around this shift. Fintech company Block recently announced layoffs affecting thousands of employees while simultaneously emphasizing its growing reliance on artificial intelligence in engineering workflows.

For many developers, headlines like these raise an uncomfortable question: is artificial intelligence replacing software developers?

The most accurate answer is that software development itself is changing.

Developers are moving away from spending most of their time writing syntax. Instead, they increasingly focus on system design, architectural decisions, and supervising intelligent agents that generate implementations.

Artificial intelligence is becoming the sidekick – but the developer is still the driver.

In this article, you'll explore what this new workflow looks like in practice by building a Flutter application using modern tools: Antigravity, Stitch, Flutter, and Dart

Rather than writing the application manually, we'll guide AI tools to generate the interface and the project architecture for us.

By the end of this guide, you will have built a complete Flutter application for a women’s self-care product store inspired by International Women’s Day.

Prerequisites

Before beginning, make sure your development environment is ready.

You should have Flutter installed and working on your machine. Running flutter doctor should confirm that your environment is properly configured. Since Dart is bundled with Flutter, verifying your Dart installation using dart --version is also recommended.

You will also need access to Antigravity, the agent-based development environment we will use later in this tutorial. You should also create a Stitch account, which will allow you to generate the interface layout for your application.

Although the workflow in this tutorial relies heavily on artificial intelligence, having a basic understanding of Flutter architecture will make the process easier to follow and understand. Concepts like Clean Architecture and state management patterns such as BLoC will appear in the generated code.

The New Role of Developers in an AI-Driven World

To understand why tools like Antigravity and Stitch are becoming important, it helps to consider how the role of developers has evolved over time.

In the earliest days of computing, programming meant giving extremely detailed instructions to the machine. Developers controlled memory locations, registers, and hardware operations directly.

Higher-level programming languages later made development more productive by abstracting away many hardware concerns. Frameworks further improved efficiency by providing reusable components and architectural patterns.

Artificial intelligence introduces yet another level of abstraction.

Instead of manually constructing every function and interface, developers can now describe systems in natural language. AI tools interpret those descriptions and generate large portions of the implementation automatically.

This shift doesn't remove the need for developers. Instead, it changes what developers spend most of their time doing.

When using AI tools, developers increasingly focus on designing systems, defining constraints, reviewing generated implementations, and ensuring that applications behave correctly in real-world conditions.

In many ways, the job is becoming less about writing code and more about orchestrating intelligent systems.

This is exactly the type of workflow platforms like Antigravity are designed to support.

What is Antigravity?

Antigravity is an AI-powered development platform built for what is often described as agentic software development.

Traditional AI coding assistants work by suggesting small pieces of code inside your editor. Antigravity takes a different approach. Instead of assisting with individual lines of code, it allows autonomous agents to execute entire development workflows.

These agents can interpret requirements, plan implementations, generate code, run tests, and verify results. Developers remain in control of the process, but much of the repetitive work is handled automatically.

The platform integrates deeply with the developer environment. Agents can read project files, run terminal commands, inspect application behavior, and interact with external services.

This capability allows AI to function less like a suggestion engine and more like a collaborative engineer working alongside you. You can find more information on https://antigravity.google/

Understanding MCP Servers

One of the core technologies that enables Antigravity’s workflow is something called the Model Context Protocol, commonly referred to as MCP.

MCP servers act as bridges between AI agents and external systems. They allow agents to interact with tools, APIs, and development environments in a structured way.

Without MCP servers, AI agents would be limited to generating static code. With MCP servers, they can actively interact with the development environment.

For example, an MCP server might allow an agent to read files from a project directory, run build commands, access a database, or fetch design assets from another platform.

In our case, MCP servers will allow Antigravity to communicate with Stitch and generate Flutter code based on the UI we design.

What is Stitch?

Stitch focuses on a different part of the development workflow: user interface design.

Building user interfaces manually can be time-consuming. Developers often spend hours structuring layouts, adjusting spacing, and experimenting with visual hierarchies before achieving a design that feels right.

Stitch simplifies this process by allowing developers to describe an interface using natural language prompts.

The system interprets the prompt and generates a structured layout representing the design. This layout can later be transformed into working code.

Instead of manually arranging every UI component, developers can focus on describing the experience they want users to have. You can find more information on Stitch at https://stitch.withgoogle.com/.

Flutter and Dart

Flutter is an open-source UI framework created by Google that enables developers to build applications for multiple platforms from a single codebase.

Applications built with Flutter can run on Android, iOS, web browsers, and desktop operating systems while maintaining consistent performance and visual behavior.

Flutter uses the Dart programming language, which was designed to support reactive frameworks and high-performance interfaces.

Because Flutter applications follow a consistent structure based on widgets and declarative layouts, the framework works particularly well with AI-driven code generation tools. You can find more information about Flutter and Dart at https://flutter.dev/ and https://dart.dev/.

The Application We Will Build

To demonstrate this workflow, we'll build a mobile application for a women’s self-care product store.

The project is inspired by International Women’s Day, celebrating products focused on wellness and personal care.

The application will contain four primary screens.

The home screen will display product categories, featured products, and best-selling items.
A wishlist screen will allow users to save products they want to purchase later.
A cart screen will display items added for purchase and allow users to adjust quantities before placing an order.
Finally, a profile screen will provide access to account information and settings.

The interface will use the following color palette:

#1A05A2
#8F0177
#DE1A58
#F67D31

Step 1: Generating the UI with Stitch

We'll begin by generating the interface design using Stitch.

Open Stitch and create a new prompt. Use the following prompt exactly as written:

Create a modern mobile shopping application UI for a women's self-care product store celebrating International Women's Day.

The design should feel elegant, warm, and modern.

Use the following color palette:

#1A05A2
#8F0177
#DE1A58
#F67D31

The application should contain the following screens:

Home Screen:
Display product categories at the top.
Show a best selling products section.
Include a featured products section with large product cards.

Wishlist Screen:
Display saved products.
Allow products to be removed from the wishlist.

Cart Screen:
Display products added to the cart.
Provide quantity controls to increase or decrease item quantity.
Show a total price section.
Include an order button.

Profile Screen:
Display a circular profile image.
Provide menu options including Profile, Settings, Orders, Notifications, and Help.

Use rounded cards, modern spacing, and soft gradient backgrounds.

Why this prompt works

When prompting Stitch, clarity and structure matter more than long descriptions. This prompt is effective because it breaks the request into four clear components:

1. Context and Theme
The opening line defines the purpose of the app (a women's self-care shopping app celebrating International Women's Day). This helps Stitch generate visuals that match the tone and audience.

2. Visual Direction
The prompt explicitly defines the design style (elegant, warm, modern) and provides a specific color palette, which guides the AI toward a cohesive visual identity.

3. Screen Structure
Instead of asking for a generic app, the prompt clearly lists the required screens (Home, Wishlist, Cart, Profile) and what each screen should contain. This ensures the generated UI is closer to a real product rather than just a concept.

4. UI Design Details
Small design instructions like rounded cards, modern spacing, and soft gradient backgrounds help the AI produce a polished interface instead of a basic wireframe.

The key idea when prompting Stitch is to think like a product designer: describe the purpose, the screens, and the visual style. This gives the AI enough structure to generate a realistic and usable UI.

Once Stitch finishes generating the design, it doesn’t lock you into a single workflow. Instead, it gives you multiple export paths depending on how you want to continue building your product. This flexibility is one of the most powerful aspects of Stitch, because it allows the generated design to move seamlessly between design tools, development environments, and AI agents.

At this stage, you also retain full control over the design. Every component generated by Stitch can be edited, rearranged, or refined before moving to the next step. You can adjust layouts, update color styles, modify text, or restructure entire sections of the interface. Think of the generated design as a strong starting point rather than a fixed output.

Stitch provides several export options that allow you to continue development in different environments.

One option is to move directly into AI Studio. This allows you to begin building the application immediately using AI-assisted development workflows. In this environment, the generated design becomes the foundation for the application structure, allowing you to iterate quickly while AI tools help translate the interface into working code.

Another option is exporting the design to Figma. When exported as a Figma file, the layout becomes a fully editable design system inside Figma. Every component, frame, and layout element can be adjusted using standard Figma tools.

Designers can refine spacing, typography, and interaction states, while developers can inspect the design specifications and collaborate with the design team before implementation begins. This makes it particularly useful in teams where design and development responsibilities are separated.

Stitch also supports exporting the project for use with Jules, another environment focused on AI-assisted workflows. This option allows the generated design to become part of a broader automated development pipeline where AI agents can interpret and transform the design into application code.

If you prefer working locally, Stitch also allows you to download the generated project as a ZIP file. This provides all the design assets and structured files that were created during generation, making it possible to integrate them manually into your development environment or version control system.

Another quick option is copying the generated output directly to your clipboard. This is useful when you want to paste the layout or prompt into another tool or environment without downloading additional files.

Finally, Stitch provides an option to export through MCP, which stands for Model Context Protocol. When using this option, Stitch prepares a prompt specifically designed to be used by an AI agent through the Stitch MCP server. This allows tools like Antigravity, or any other agentic IDE that supports MCP, to access the generated layout and automatically convert it into working application code.

Stitch even provides the prompt that should be used when sending the design to the agent, making the transition between design generation and code generation extremely smooth.

Each of these export options supports a slightly different workflow, but they all share the same goal: allowing the generated design to move easily from concept to implementation while still giving developers and designers the freedom to modify anything they want along the way. For this guide, we'll be using the MCP method with Antigravity.

Step 2: Connecting Stitch to Antigravity

Next, we'll have to open Antigravity, create a directory, and authenticate using Google.

Next, we will enable the Stitch MCP server inside Antigravity (Dart is already installed).

Open the MCP configuration panel and enable the Stitch integration. When prompted, provide your Stitch API key.

Getting Your Stitch API Key

To generate an API key, click on the profile icon and on Stitch Settings, navigate to the API section. Create a new key and copy it into the MCP configuration panel.

Step 3: Generating the Flutter Application

Now that Antigravity can access the Stitch layout, we can generate our Flutter project. It will be worth it for us to install Flutter and Dart extensions as well.

Now that we have these installed, we can enter the following prompt in Antigravity:

## Stitch Instructions

Get the images and code for the following Stitch project's screens:

## Project
Title: User Profile
ID: 2811186611775892217

## Screens:
1. User Profile
    ID: 1768c58e5abb4c328a1837437d83875c

2. Self-Care Home Screen
    ID: 41494ba340bf4d7b8df12112116645ce

3. Shopping Cart
    ID: e107a7a9fd034f83a302851021bbc468

4. Your Wishlist
    ID: ecc8e0e7cea3437c939e04ceeb645b61

Use a utility like `curl -L` to download the hosted URLs.

Use the UI layout generated from Stitch and build a Flutter application using Dart.

The project should follow Clean Architecture and separate presentation, domain, and data layers.

Use the BLoC pattern for state management.

Ensure UI components are separated from business logic and follow a clean architecture project structure.

This prompt is intentionally very structured, which is important when working with AI development environments like Antigravity.

There are a few key things happening here:

1. It references the Stitch export directly

The prompt begins with the Stitch project ID and screen IDs, which allows Antigravity to retrieve the design layout and images generated earlier.

2. It defines the architecture upfront

Instead of generating a quick prototype, we explicitly request Clean Architecture. That means:

Presentation layer: UI + BLoC
Domain layer: business rules and use cases
Data layer: models and repositories

This produces a much more maintainable Flutter codebase.

3. It controls state management

We explicitly instruct the system to use flutter_bloc, ensuring predictable state updates for cart, wishlist, and home data.

These details prevent the AI from generating only UI skeletons and instead produce a working application structure.

When prompting Antigravity (or any AI coding system), think like a technical lead writing a project specification. The more clearly you define architecture, dependencies, and expected behavior, the closer the generated project will be to production-ready code. You can go as low as prompting it on how it can handle routing, network images, using reusable widgets, the cart logic, mock product data and other things.

For the Conversation mode, I'm using Planning mode.

When starting a new Agent conversation, you can choose between multiple modes:

Planning: Agent can plan before executing tasks. Use for deep research, complex tasks, or collaborative work. In this mode, the Agent organizes its work in task groups, produces Artifacts, and takes other steps to thoroughly research, think through, and plan its work for optimal quality.
Fast: Agent will execute tasks directly. Use for simple tasks that can be completed faster, such as renaming variables, kicking off a few bash commands, or other smaller, localized tasks. This is helpful for when speed is an important factor, and the task is simple enough that there is low worry of worse quality.

For the model, I’ll be using Gemini 3.1 Pro (High), which provides maximum performance and accuracy for generating code, handling complex tasks, and interpreting prompts.

Antigravity generates a list of tasks it will perform to build the application. You can review each task and add comments, and it will update them accordingly. Think of it as a clear, step-by-step roadmap of what the agent is going to do and this different for each project or workflow as it depends on what it needs to do.

For this project, Antigravity generated this list of tasks:

Fetch screen data and code from Stitch project
Initialize/Verify Flutter project care_app
Setup Clean Architecture layers (domain, data, presentation)
Download images locally using curl
Integrate generated UI code into Presentation Layer
Setup BLoC pattern for State Management
Integrate Clean Architecture pieces together
Verify functionality and build

It's also good to say that if you are doing this and Antigravity notices you don't have Flutter, Dart, Java, or Android SDK installed, it will first start from there by installing the prerequisites before moving into creating the app.

Once the review and adjustments are complete, Antigravity will prompt you for confirmation before proceeding with the implementation. At this point, it will ask for approval to generate the Flutter application targeting both Android and iOS based on the finalized implementation plan.

When you are satisfied with the structure and ready to proceed, you can simply click Run to allow the agent to begin creating the application.

At this stage, Antigravity will request permission to communicate with Stitch to download all the assets from the generated design. Once you grant permission, it runs the necessary command to fetch the files.

When this process completes, Stitch creates a directory called stitch_data. This directory organizes all the design assets and pages from your project. Each screen or page in your application is saved as a separate .HTML file, making it easy to inspect, edit, or reference individual layouts.

Inside stitch_data, you’ll typically find one .HTML file per screen, such as screen1_profile.html, screen2_home.html, screen3_cart.html, and screen4_wishlist.html. Each file contains the layout structure, design elements, and styling that the AI will later use to generate the corresponding Flutter code.

This step ensures that all design assets are locally available and that the AI has everything it needs to accurately translate the visual layout into functional application components.

After generating the initial response, Antigravity will typically produce an implementation document for you to review before it begins building the application.

This document outlines the proposed structure the agent plans to follow in order to implement the app based on your prompt. It usually includes the architectural approach, the folder structure, the technologies and patterns that will be used, and how different parts of the application will interact with each other.

Think of this document as a blueprint for the project rather than the final implementation.

At this stage, you have the opportunity to carefully review the plan before any code is generated. You can examine how the agent intends to structure the Flutter project, how it plans to separate UI from business logic, and how elements like state management, navigation, and data flow will be handled.

If something does not align with your expectations, you can provide feedback directly within the document. You can add comments, suggest structural changes, request improvements, or clarify parts of the implementation you want handled differently. The agent will then incorporate those adjustments and update the plan accordingly.

It is important to remember that this document is not a final draft. It is meant to be iterative. You can refine it as many times as necessary, and the agent will continuously readjust the plan based on your feedback.

# Implementation Plan: Clean Architecture Flutter App

This plan guides the implementation of the 4 Stitch screens into a Flutter application using Clean Architecture and BLoC.

## Proposed Architecture
The application will be divided into the following layers:
1. Core: Contains themes, routing, and shared utilities.
2. Domain: Contains entities User, Product, CartItem) and abstract repository interfaces.
3. Data: Contains models (data transfer objects) and mock implementations of the repositories.
4. Presentation: Contains BLoCs (for state management) and UI Pages.

## Proposed Changes

### 1. Dependencies Setup
Update pubspec.yaml to include:
- flutter_bloc
- equatable
- google_fonts (for "Plus Jakarta Sans")
- material_symbols_icons (for the icons used in the HTML)

### 2. Core Structure & Theme
#### [NEW] lib/core/theme.dart
Define colors #e31651, #8F0177, #f8f6f6, etc.) and typography based on the Stitch Tailwind config.
#### [NEW] lib/core/app_router.dart
Define routes for the bottom navigation structure and individual pages.

### 3. Domain & Data Layers
#### [NEW] lib/domain/entities/...
Create User, Product, and CartItem.
#### [NEW] lib/data/repositories/...
Create mock repositories that return static data required to populate the UI (e.g., Sarah Mitchell profile data).

### 4. Presentation Layer (Pages & BLoCs)
#### [NEW] lib/presentation/pages/main_scaffold.dart
A scaffold with the bottom navigation bar connecting Home, Saved (Wishlist), Cart, Deals, and Profile.
#### [NEW] lib/presentation/blocs/...
- ProfileBloc
- HomeBloc
- CartBloc
- WishlistBloc

#### [NEW] lib/presentation/pages/profile_page.dart
Translate [screen1_profile.html](file:///Users/atuoha/Documents/Flutter_Apps/care_app/stitch_data/screen1_profile.html) into a Flutter Widget. Use NetworkImage for the profile photo.
#### [NEW] lib/presentation/pages/home_page.dart
Translate screen2_home.html into a Flutter Widget.
#### [NEW] lib/presentation/pages/cart_page.dart
Translate screen3_cart.html into a Flutter Widget.
#### [NEW] lib/presentation/pages/wishlist_page.dart
Translate screen4_wishlist.html into a Flutter Widget.

## Verification Plan

### Automated Tests
- Run flutter analyze to ensure code is clean and adheres to Dart best practices.
- Run flutter test (if we add basic widget/unit tests for BLoC logic).

### Manual Verification
- We will ask the user to run the app using flutter run on an iOS Simulator or Android Emulator.
- Verify that the bottom navigation bar works and all 4 screens match the structural layout and aesthetics of the generated Stitch HTML mockups.

This review stage is particularly valuable because it allows you to guide the architecture before code generation begins. Instead of correcting issues after the project is built, you shape the direction early and ensure the generated application follows the standards and structure you expect.

Next, Antigravity will request permission to set up the domain and install dependencies. Once granted, it begins implementing the Flutter project following Clean Architecture.

During this step, it sets up the folder structure, separating presentation, domain, and data layers, and installs all the required dependencies so the project is ready for development. This creates a solid foundation for the application, ensuring that the code is well-organized, maintainable, and follows best practices.

While all of this is happening, Antigravity keeps track of progress by ticking off each task as it is successfully completed. This provides a live view of what has been done and what is still pending, so you can monitor the workflow step by step.

Next, Antigravity moves on to creating each individual file in the project. For every file it generates, you are given the option to Accept or Reject it. This allows you to review the output in real-time and ensure that every piece of code meets your expectations before it becomes part of the project.

As the agent works through each setup, it will gradually create the project files. Don’t be alarmed by any red lines in the editor, they usually appear because some referenced files haven’t been generated yet, but the agent will create them in the next steps.

One important thing to keep in mind is the model you’re using, as its ability to handle complex tasks directly affects how smoothly the project is generated and how accurately the files are implemented.

Once all files are generated, Antigravity will request permission to run flutter analyze. This process checks the project for syntax errors, unused imports, and other potential issues. After the analysis, the agent generates a walkthrough of all changes, summarizing what was created, modified, or adjusted in the project, and at this point, you can also review the walkthrough by adding comments to places you think can be made better or changed.

For our workflow, Antigravity generated a Walkthrough file with this content:

Walkthrough content

How to Build an AI-Powered Flutter App with Google Antigravity: A Hands-On Tutorial

Anna Muzykina — Wed, 07 Jan 2026 17:26:39 +0000

As a Flutter developer who’s building a cloud-based ecosystem for digital media lifecycle management, I’m constantly looking for ways to speed up the transition from idea to prototype.

In November 2025, Google launched antigravity, a new interactive coding platform that has fundamentally shifted my workflow.

Antigravity has completely changed how fast you can prototype and iterate on projects. Instead of writing boilerplate code or spending hours searching through documentation, you can describe your needs in natural language, review the plan, and let AI agents create, test, and even run the code.

This "coding in the air" approach creates the feeling of working with a very capable junior developer who never tires.

Based on my positive experience, I decided to share my first steps and thoughts about Antigravity. In this hands-on tutorial, we’ll create Water Tracker, a beautiful, modern Flutter app that helps users track their water intake with smart progress visualization and gentle reminders.

We’ll use Antigravity to let AI agents plan, write, test, and show video walkthroughs of your app. This “vibe coding” style means that you describe what you want, review plans, and approve changes – all while agents handle the heavy lifting.

The app will feature a glassmorphism design: frosted glass cards, blurred backgrounds, subtle borders, and soft translucency. This will give the app a premium, modern feel that’s both elegant and calming.

Here's what we'll cover:

Prerequisites
Understanding the Antigravity Engine
Prompts - the Key to Successful Vibe Coding in Antigravity
Step 1: Open Antigravity and Create a Workspace
Step 2: Mastering the Art of Agentic Prompting
Step 3: Implement the Glassmorphic Main Screen
Step 4: Add Persistence and Daily Logic
Step 5: Add On-Device Smart Reminders with Gemma
Step 6: Final Polish
Antigravity quota limit
Conclusion

In this tutorial, we will build Water Tracker: a modern Flutter app featuring an attractive glassmorphism design. We will use Antigravity’s agentic workflow to handle the heavy lifting, including a circular progress visualization and on-device smart reminders powered by Gemma.

Prerequisites

To follow along, you’ll need:

Flutter SDK installed (Flutter doctor should be clean)
Android emulator or physical device
Google Antigravity installed (you can use the free public preview from antigravity.google)

Understanding the Antigravity Engine

Before we dive into the code, it is important to understand what is happening under the hood. Unlike standard LLM chat interfaces that simply provide code snippets for you to copy-paste, Google Antigravity is an agentic development platform.

While the core is a familiar AI-powered IDE experience that uses the best of Google’s models, Antigravity is evolving the IDE towards an agent-first future with browser control capabilities, asynchronous interaction patterns, and an agent-first product form factor. Together, all this enables agents to autonomously plan and execute complex, end-to-end software tasks.

It connects to powerful Large Language Models, but it also has "tools" or "skills" that allow it to interact with your file system, run terminal commands like flutter create, and even execute the app in an emulator.

When you send a prompt, the system doesn't just guess the next word. It uses a reasoning loop to plan actions, execute them, and verify the output.

But because these agents can make autonomous decisions, your role shifts from "writer" to "editor and supervisor." You must verify the agents’ plans to ensure they follow best practices and don't introduce security or performance regressions.

Prompts: the Key to Successful Vibe Coding in Antigravity

While building my platform, I learned that prompts for Google Antigravity are completely different from regular AI chats or code completers.

Antigravity is agentic. It means that AI agents can run commands, create files, launch apps, and test everything autonomously. This power means prompts must be structured like detailed instructions to a very capable junior developer, not short requests.

That's why every prompt in this tutorial follows the same pattern:

High-level goal + vibe: I describe the feature and the desired feel (for example, glassmorphism with soft blues, premium and calming).
Detailed requirements in bullets: Functionality, UX, design, performance, accessibility – everything the agent needs to deliver quality on the first try.
Plan-first safety: Always include something like, "Before any commands/code: generate a detailed plan artifact (folder tree, dependencies, steps) and ask for approval." This forces the agent to think first and lets me review/correct before anything changes.
Verification request: Ask for screenshots and video walkthrough artifacts so I can visually check the result.
No roles or fluff: Use direct, natural language. Agents don't need "You are an expert..." to work well.

This style helps prevent mistakes (so agents can't run wild), ensures consistent premium quality (glassmorphism done right), and creates the relaxed "vibe coding" flow: you can focus on vision, approve plans, and get polished features fast.

Without this structure, agents might skip steps or produce basic results. With it, you get the beautiful, functional app we built together. In this tutorial I’ll share the prompts which I’m using.

Step 1: Open Antigravity and Create a Workspace

To get started, you’ll need to download and install the Antigravity IDE. It’s important to note that Antigravity is a standalone application, not a plugin or extension for your existing editor.

It’s built as a fork of Visual Studio Code, which means the setup is incredibly straightforward. If you have ever used VS Code, the interface will be instantly familiar, and you can even bring over your favorite shortcuts and themes. It functions as a standalone development environment that integrates the editor, terminal, and AI agents into a single window.

Next, open the Agent manager by clicking “Open Agent Manager” (either the button at the top or in the center of the screen, as you can see below):

The panel on the left has an “+ Open Workspace” – just click that to create a new workspace:

Then go ahead and click “Open New Workspace”:

Then just name it water_tracker and create it:

Now you have a clean workspace ready for prompts:

This creates a sandboxed environment where the AI agent can safely manage your files without affecting your other projects. And now your AI agents have the permission to build and test your Flutter code!

Step 2: Mastering the Art of Agentic Prompting

In Antigravity, your success depends on how you communicate with your agents. Good prompts are detailed and always require a plan first. To create an effective prompt, you should think like a Project Manager: define the scope, set technical constraints, and establish a "checkpoint" before the agent executes any code.

The Anatomy of a Perfect Prompt

As we briefly discussed above, a strong prompt follows a clear structure: Context + Goal + Constraints + Verification. By explicitly asking for a plan, you prevent the agent from making assumptions about your architecture or UI style that might be difficult to undo later.

Copy and paste the following prompt into the Agent Manager:

Create a new Flutter project named `water_tracker`.

Design requirements:
- Glassmorphism style throughout: frosted glass cards, blurred backgrounds, subtle borders, translucency
- Soft color palette: light blues, whites, gentle gradients
- Modern, premium feel with depth and elegance

Before any commands:
1. Generate a detailed project plan artifact including:
   - Full folder structure tree
   - Recommended dependencies (e.g., shared_preferences, glassmorphism package if available)
   - High-level architecture (simple state management to start)
2. Ask for my explicit approval.

After approval:
- Run `flutter create water_tracker`
- Add dependencies
- Launch the blank app
- Provide screenshots and video walkthrough artifact.

Analyzing the Prompt Strategy

I crafted this prompt with specific "hooks" to ensure high-quality output:

First, the Design requirements block uses sensory language ("frosted," "soft," "depth") to guide the agent's aesthetic choice.
Second, the "Before any commands" section is the most important element as it creates a safety gate. This forces the agent into a "Plan-First" mode, where it must present its logic as a readable document (an Artifact) before touching your file system.
Finally, the Verification requests (screenshots/video) ensure the agent is responsible for proving the setup was successful.

Reviewing the Implementation Plan

After running this prompt, agent will give you plan to review. Scroll down and read everything carefully, making sure the plan looks solid. If it does, reply by clicking on the "Proceed" button:

Authorizing Commands in the Agent Manager

After you proceed with the plan, the agent will begin the Initializing Project phase. In Antigravity, agents do not run terminal commands in the background without your knowledge. Instead, they present the specific command for your authorization.

As shown in the above screenshot, the agent will ask to run: flutter pub add provider shared_preferences intl flutter_animate google_fonts.

Clicking "Accept" here is the specific action that gives the agent permission to actually execute the command in your workspace. This is the moment the project actually starts to exist, dependencies are added, and the initial folder structure is generated.

Managing Commands and Folders

The "Step Requires Input" gate ensures you maintain full control over what’s being installed on your machine.

Before any directories are actually made, the agent displays the exact mkdir command it plans to run. You’ll need to review this proposed folder structure and click the blue "Accept" button to authorize the agent to physically create those paths in your workspace.

Verifying the Emulator Launch

Before launching on the emulator, the agent will ask for permission to launch it:

The agent will then initialize the project and show you the running app in the integrated emulator:

Also, the agent tests the app and records a few seconds of video to demonstrate that all buttons are working:

Switching to the Editor for Verification

Once the agent has finished initializing the project and building the directory structure, you’ll want to see the results of its work.

Because Antigravity is an agentic IDE, it often keeps the focus on the Agent Manager while it runs terminal commands and generates code in the background. To switch from the agent's log to the actual source code, click the “Open editor” button (the < > icon) located at the top right of the interface.

Clicking this button reveals the Explorer view on the left, where you can now see the newly created water_tracker project. You should explore the lib/ directory to verify that the agent successfully created main.dart and organized your files into the core, data, and ui folders as proposed in its earlier plan.

This is your chance to perform a sanity check on the code itself. Open main.dart to ensure the agent correctly set up the WaterTrackerApp and initialized your theme before you proceed to the next stage of development.

Understanding Orchestration vs. Verification

Just to clarify, in Antigravity, the transition between the Agent Manager and the Open editor button (the < > icon) represents a shift from orchestration to verification:

The Agent Manager View (Orchestration): When you click Open Agent Manager, you’re looking at the "command center" for the AI agents. In this view, you see a terminal-like interface where the agent proposes actions.
For example, as seen in your screenshot, the agent shows a "Step Requires Input" and waits for you to click Accept on a terminal command like flutter pub add. You can’t edit code here – you can only approve or reject the agent's planned terminal operations.
The Editor View (Verification): When you click the 'Open editor' button (the < > icon) in the top right, the IDE reveals the standard VS Code-style workspace. This is where the physical files (like main.dart and the folder structure you just authorized) actually appear.
While the Agent Manager shows you the log of what the agent did, the Editor View allows you to open those files to verify that the code follows your standards and is ready for production.

Summary of Workflow

In short: you use the Agent Manager to authorize the agent to run terminal commands and create folders, and you click the 'Open editor' button to actually see, explore, and edit the resulting files.

Step 3: Implement the Glassmorphic Main Screen

Now it’s time to create the beautiful UI. Glassmorphism relies on the BackdropFilter widget and ClipRRect to create that "frosted glass" effect. We want a central progress ring that shows how much water we’ve had and that feels physical and tactile.

Paste in the following prompt:

Implement the main water tracking screen with glassmorphism design.

Detailed requirements:
- Large central circular progress ring (frosted glass style, blurred background visible through it)
- Big floating "+" button with glass effect and subtle glow on tap
- Current intake text in large, elegant font
- Glassmorphic card below showing "X glasses · Y ml of 2000 ml"
- Scrollable history list in frosted cards
- Empty state with calming illustration/text
- Smooth fill animation on progress ring when adding water

Before coding:
1. Plan artifact with:
   - Glassmorphism implementation approach (BackdropFilter, ClipRRect, etc.)
   - Widget hierarchy
   - Animation details
2. Ask approval.

After approval:
- Generate code
- Hot reload
- Provide video walkthrough showing:
   - Adding water multiple times
   - Progress ring filling with glass effect
   - History cards appearing

If all looks good, approve the plan. The agent should build a stunning glassmorphic interface. Tap “+” and watch the ring fill with a silky animation through the frosted glass.

Step 4: Add Persistence and Daily Logic

An app is only useful if it remembers your data. We’ll use shared_preferences for simple local storage. We also need logic that checks the current date and resets the counter to zero at midnight.

We’ll now ask the agent to add persistence and daily reset logic using shared_preferences.

The app should save the intake and the last reset date. Before implementing, explain how the midnight reset check will be triggered.

Use this prompt:

Add persistence and daily reset.

Requirements:
- Use shared_preferences to save intake and last reset date
- Auto-reset to 0 ml at midnight
- Preserve today's history until reset
- Simple settings dialog to change daily goal

Before changes:
1. Plan with storage and reset logic
Ask approval.

After:
- Implement
- Test app close/reopen
- Video: add water → close → reopen → data persists

Review the agent’s logic for the reset. A common pitfall is only checking the date when the app first opens – so make sure that the agent accounts for the app staying open in the background overnight.

Your progress now survives:

Step 5: Add On-Device Smart Reminders with Gemma

The most advanced feature of our Water Tracker is the smart reminder system powered by Gemma 3n. Unlike traditional reminders that use static, repetitive text, these reminders are generated dynamically to keep the user engaged and motivated. The primary goal of these reminders is to track the user's progress against their daily hydration goal and provide personalized nudges that ensure they stay on schedule throughout the day.

To achieve this, we’ll use Gemma 3n, which is a specialized variant of Google’s open-weight model family designed specifically for on-device performance. Gemma 3n acts as our AI Hydration Coach by analyzing the user's current intake status. For example, it notices if a user has only consumed 500ml out of their 2000ml goal by mid-afternoon. It then uses this context to generate a friendly, unique message.

We’re using Gemma 3n here for several critical reasons:

Privacy and data sovereignty: Because Gemma 3n runs fully locally on the user's phone, no personal health data or daily habits ever leave the device, providing a "privacy-first" experience where no data leaks to the cloud.
Next-generation architecture: Gemma 3n uses the same architecture as the latest Gemini Nano, which allows it to offer incredible speed and efficiency while maintaining a minimal footprint on the device's battery and memory.
Native multimodal support: This model is unique because it features native audio support for the first time, meaning that while we are currently using it for text notifications, the app is future-proofed for voice-based logging and interaction.

Copy and paste in this prompt:

Add on-device hydration reminders using Gemma.

Requirements:
- Use flutter_gemma or similar 2025 package for Gemma 3n
- Every 2 hours, check progress
- If behind schedule, show local notification: friendly, motivational message like "Time for a refreshing glass! You've had X of Y ml today."
- Use simple on-device prompt for variety
- Toggle in settings
- Privacy badge: "Reminders powered locally"

Before implementation:
1. Plan with package, notification setup, and timing logic
Ask approval.

After:
- Implement
- Test (simulate time or wait)
- Video showing notification appearing.

You should verify that the agent is not making frequent, battery-draining calls to the model. The reminders should be scheduled efficiently using background tasks.

To test the AI Hydration Coach:

Go to Settings (gear icon).
Enable the "AI Hydration Coach" toggle.
You should receive a simulated notification immediately with a motivational message like: "Hydration Buddy 💧: Stay hydrated! You're at X% of your daily goal."

Step 6: Final Polish

To finish the app, we will add micro-interactions – the small details that make an app feel premium. This includes a confetti celebration when the daily goal is met and a wave animation for the empty state.

Use this prompt:

Add final polish:
- Confetti explosion when reaching 100% goal
- Glassmorphic settings screen
- Better empty state with subtle wave animation
- Optimize performance

Implement one at a time with quick video updates.

Run the app on your phone. Add water throughout the day and enjoy the glassmorphic beauty, gentle reminders, and celebration when you hit your goal.

Then go back to your app and click the ‘+’ button to get the results. After you get a score of 100%, the confetti will be visible:

Reviewing the Final Changes

As the agent works, use the 'Open editor' button (the < > icon) to inspect the new animations. When checking the performance optimization, look for the agent's use of RepaintBoundary around the glassmorphic layers. This is a key indicator that the agent is following high-performance Flutter standards rather than just writing simple code.

Once every micro-interaction is verified, your Water Tracker is ready for primetime. Run it on your device, log your water throughout the day, and enjoy the combination of glassmorphic beauty, privacy-first reminders, and the celebration of your health goals.

Antigravity Quota Limit

If your favorite model notifies you that it's reached its quota limit, you can switch to another model before the limit resets. As you can see in my screenshot, my favorite Gemini 3 Pro won’t be available until 8:26 PM, so I'll select another model from the drop-down menu to use before then.

Conclusion

In this tutorial, you built a helpful habit-tracking app using agentic development.

You learned about:

Managing workspaces in Antigravity
Writing detailed, plan-first prompts
Creating glassmorphism designs
Integrating on-device AI with Gemma
Rapid, high-quality prototyping

This is how modern Flutter development feels: focused on creativity, not boilerplate.

Happy vibe coding!

Google Antigravity - freeCodeCamp.org

Learn How AI Agents Are Changing Software Development by Building a Flutter App Using Antigravity and Stitch

Table of Contents:

Prerequisites

The New Role of Developers in an AI-Driven World

What is Antigravity?

Understanding MCP Servers

What is Stitch?

Flutter and Dart

The Application We Will Build

Step 1: Generating the UI with Stitch

Why this prompt works

Step 2: Connecting Stitch to Antigravity

Getting Your Stitch API Key

Step 3: Generating the Flutter Application

How to Build an AI-Powered Flutter App with Google Antigravity: A Hands-On Tutorial

Here's what we'll cover:

Prerequisites

Understanding the Antigravity Engine

Prompts: the Key to Successful Vibe Coding in Antigravity

Step 1: Open Antigravity and Create a Workspace

Step 2: Mastering the Art of Agentic Prompting

The Anatomy of a Perfect Prompt

Analyzing the Prompt Strategy

Reviewing the Implementation Plan

Authorizing Commands in the Agent Manager

Managing Commands and Folders

Verifying the Emulator Launch

Switching to the Editor for Verification

Understanding Orchestration vs. Verification

Summary of Workflow

Step 3: Implement the Glassmorphic Main Screen

Step 4: Add Persistence and Daily Logic

Step 5: Add On-Device Smart Reminders with Gemma

Step 6: Final Polish

Reviewing the Final Changes

Antigravity Quota Limit

Conclusion