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:
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 likeflutter 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 (likemain.dartand 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!