Explore Flutter Extensions with Gemini CLI: An In-Depth Guide for Developers
Bringing Gemini CLI into Your Flutter app
As a Flutter developer, I’m always looking for tools that genuinely speed up my workflow, not just add another layer of complexity. So, when the Flutter team announced the new Gemini CLI extension, I was immediately intrigued. It’s one thing to have a separate AI chatbot, but it’s another thing entirely to have that power integrated directly into the command line you already use every day.
The new tool is an extension for the Gemini CLI, which combines the Dart and Flutter MCP Server. The premise is straightforward: you describe a UI component or a feature you need in plain text, and it generates the Dart code for a working Flutter app.
# A quick preview of what we're talking about
$ /create-app "An app to read and write text notes from Firestore data"
So, can this actually help build a production-ready app? My answer is a firm yes, but it's not about a single, magical command that spits out a complete application. The real power here comes from using the tool iteratively. Through a series of carefully crafted prompts, you can build your application one step at a time, component by component. Think of it as directing a highly-efficient junior dev: first, you ask for a customized button widget, then a styled text field, and then you instruct it to combine them into a complete login form. This methodical approach allows you to construct complex, production-quality features piece by piece.
This lets us, the developers, focus our energy on the more complex business logic, state management, and architectural decisions that actually require our expertise.
In this article, I'll walk you through how to get the Gemini CLI set up with the Flutter extension. Then, we’ll put it to the test and see what kind of code it produces for a common use case. Let's get started.
Getting Set Up: Your Step-by-Step Guide
Alright, before we can start generating code, we need to get our tools in order. The setup process is pretty quick. I'll walk you through installing the Gemini CLI, configuring your API key, and finally, adding the Flutter extension.
Before You Begin: The Checklist
Make sure you have the following installed on your machine. Most of you probably have these already, but it’s always good to double-check.
Node.js: You'll need version
20.xor higher.Flutter SDK: A recent stable version is required. The extension is built for modern Flutter features.
Git: The CLI uses Git to install extensions from repositories.
Your favorite IDE: I use Android Studio, but you'll want any code editor handy to open up and inspect the code Gemini generates for us.
The Installation Process
Let's get everything installed and configured.
Step 1: Install the Gemini CLI
The Gemini CLI is an open-source tool that gives you direct access to Google's Gemini Pro models from your terminal. It's the foundation for everything else we'll be doing.
If you have Node.js set up, the easiest way to install it is via npm:
npm install -g @google/gemini-cli
Alternatively, if you're on macOS or Linux and prefer using Homebrew, you can run:
brew install gemini-cli
Step 2: Configure Your API Key
To use the CLI, you need a Gemini API key. You can get one for free from the Google AI Studio. The free tier is quite generous, offering plenty of requests for daily development work.
Once you have your key, you need to add it as an environment variable named GEMINI_API_KEY.
For macOS/Linux:
Add the following line to your shell's configuration file. This is typically .zshrc (for Zsh) or .bash_profile (for Bash).
export GEMINI_API_KEY="YOUR_API_KEY_HERE"
Remember to replace "YOUR_API_KEY_HERE" with your actual key. Then, reload your shell for the change to take effect:
# For zsh
source ~/.zshrc
# For bash
source ~/.bash_profile
For Windows:
You can set the environment variable permanently using this command in Command Prompt or PowerShell:
setx GEMINI_API_KEY "YOUR_API_KEY_HERE"
Again, use your real key. You'll need to restart your terminal for this to apply.
Step 3: Verify the Installation
Now, let's make sure it's working. Open a new terminal window and run:
gemini
If everything is set up correctly, you should see an interactive prompt appear, ready for your input just like below screenshot. You can type /help to see all available commands or just press /quit to exit.
Step 4: Install the Flutter Extension
Extensions are what give the Gemini CLI its real power, allowing it to interact with other tools and services. We need to install the specific extension for Flutter.
Run the following command in your terminal. It uses Git to clone the extension right from its repository.
gemini extensions install https://github.com/gemini-cli-extensions/flutter.git
And that's it! Our command-line environment is now fully equipped with Flutter extension and Dart MCP server. We're ready to start generating some Flutter code.
From Prompt to Project: Bringing the App to Life
Alright, with our tools ready and a detailed prompt in hand, it's time for the exciting part. We're going to feed our instructions to the Gemini CLI and watch it scaffold the foundation of our notes app.
First, open your terminal, navigate to the directory where you store your Flutter projects, and start the interactive CLI:
gemini
Once you see the CLI prompt, paste the prompt we crafted earlier.
/create-app An app to read and write text notes from Firestore data
Once you hit enter, the process becomes interactive. The CLI will ask a few clarifying questions to finalize the project details, such as the project's folder name, a brief description for the app, and the git branch. This is a great sanity check to ensure everything is set up exactly how you want it.
The Blueprint: DESIGN.md
Before writing a single line of Dart, Gemini generates a DESIGN.md file. Think it as a Technical Design Document. This file is crucial. It outlines the proposed architecture, the folder structure, the classes and widgets it plans to create, and how they will all interact.
This is your first and most important review gate. It gives you a chance to see the AI's plan before it commits to code. If you don't like the proposed structure or think a class is missing, you can tell it to make changes. Once you're satisfied with the blueprint, you approve it. This step alone ensuring the final output aligns with your vision.
The Game Plan: IMPLEMENTATION.md
After you approve the design, the CLI generates a second file: IMPLEMENTATION.md. If the DESIGN.md was the blueprint, this is the step-by-step construction plan.
It breaks down the entire coding process into logical, sequential phases like:
Initialize Flutter project and add dependencies.
Set up Firebase configuration.
Implement the
FirestoreService.Build the Authentication UI.
...and so on.
For each phase, it even includes pre-work and post-work checklists. You review this implementation plan, and once you give the final green light, it starts executing phase by phase, writing the actual code. As it completes each step, it updates the file with the actions it took.
This two-step review process is what elevates the tool from a simple code generator to a true development assistant. It's transparent, methodical, and most importantly, it keeps you, the developer, in complete control of the entire process.
Beyond the Initial Build: Running and Refining
Once you've approved the implementation plan, the Gemini CLI gets to work, executing each phase. But it's not just blindly writing code. What I find really impressive is the professional housekeeping it does along the way.
Automated Housekeeping
After completing each phase of the implementation, the extension automatically:
Formats the code using
dart formatApplies any quick fixes with
dart fixAnalyzes the code with
dart analyzeto ensure there are no issuesRuns tests if they are part of the plan
Commits the changes to your Git branch with a descriptive message for that phase.
This automated process ensures that the generated code is clean, consistent, and version-controlled from the very beginning.
Once the final phase is complete, you'll have a fully runnable Flutter project in the directory you specified. Open it up in your IDE and launch the app. The result is a remarkably solid foundation. It's not magic you'll still be the one to step in, but it handles a huge amount of the initial setup and boilerplate for you.
More Than Just Creation: Other Useful Commands
The power of the Flutter extension doesn't stop at creating new apps. It also provides commands to help you work on existing projects. Here are a few that currently supported:
/modify: This is for iterating on existing code. You can ask it to "add a pull-to-refresh feature to the home screen" or "refactor the login form to use a BLoC pattern." It follows a similar process by generating aMODIFICATION_PLAN.mdfor you to review before it touches your code./commit: Think of this as a superchargedgit commit. It automates the pre-commit checklist that every good developer should follow. It runs the formatter and analyzer, executes tests, and then generates a clear, descriptive commit message based on your staged changes for you to approve./create-package: If you're building a new Dart package, this command guides you through the process, setting up the project with recommended best practices and a standard file structure.
A Realistic Look: Knowing the Limitations
While I'm genuinely impressed with this tool, it's important to remember that the Flutter extension is still new and under active development. As with any cutting-edge tool, you might occasionally encounter some rough edges.
For instance, you could run into minor installation issues, or if token limit is reached, it will fallback to 2.5 Flash model, resulting it might generate code that is deprecated. The good news is that the tool's interactive nature often provides the solution. Many of these small issues can be quickly corrected with a simple follow-up prompt using the /modify command, like, "update the code to use the latest firebase_auth package".
The team behind it is actively improving it, and the best place to report bugs, ask questions, or see what's coming next is the official GitHub repository gemini-cli-extensions/flutter.
| Notes in the Home screen | Adding notes in Firestore |
|---|---|
Final Thoughts
The Flutter extension for the Gemini CLI is a powerful new tool in our developer toolkit. It's not here to replace us, but to act as a highly efficient assistant. By handling the initial scaffolding, boilerplate, and repetitive tasks, it frees us up to focus on what truly matters: building robust architecture, solving complex problems, and creating beautiful user experiences.
It represents a significant step forward in how we can integrate AI into our daily workflows. I encourage you to give it a try on a small side project and see how it fits your style. The world of AI-assisted development is moving fast, and I'm excited to see where it takes us. 🚀
Connect with me
Hello there! 👋 I’m Mihir Joshi, I'm a Senior Software Engineer with over five years of experience specializing in the Flutter framework. I'm passionate about building clean, performant, and beautiful mobile applications that provide real value to users.
I enjoy sharing what I learn with the developer community. If you found this article helpful or just want to talk about all things Flutter, feel free to connect with me on LinkedIn.
