AI Flutter Code Generator with Gemini API | Build with Google AI

Key Takeaways

In this video, we'll explore how you can build an AI power tool that help you write Flutter code. Let's go. Hey folks, welcome to Build with Google AI, where we explore how you can build practical solutions with Google AI technology. Building user interfaces with Flutter is pretty great. It's really nice to be able to design and build user experiences for an application and have it work across multiple platforms. Even so, there's a lot to handle with building out a new interface. By the time you've stepped out of your third or 23rd design review meeting, you're probably wondering how you could get some help visualizing different looks for your user interface. With that in mind, one of my colleagues from the Flutter team decided to apply AI to this problem and have it quickly generate Flutter theme code using a couple of keywords from that last design review meeting. The Flutter theme agent is a Visual Studio Code extension that uses Google's Gemini API to generate code for Flutter visual themes. Here's a quick demo of the project. The theme agent works alongside the Flutter developer tools, lets you quickly generate visual settings as part of a Flutter theme data object. Once you've loaded the Flutter a project in the theme agent, you can generate themes and components using the command palette. Flutter theme The theme agent lets you generate a whole theme data object, a button style, a text style, or a color scheme. In this application, I'm setting the color scheme using the default scheme function, and you can see how it looks in the interface on the right. It's definitely a color scheme, and it's easy to build with the seed color, but it's not very interesting. So, let's generate a new one. Here I have a new function for my generated color scheme, and I'll put in a comment to describe the colors I want. Hot pink dark mode. I'll select this text so the generator function uses this information to create a new color scheme. Now, I'll open the command palette and select the Theme Agent color scheme command. The command takes my text input and combines it with some additional instructions for generating a Flutter color scheme and sends that request to the Gemini API. The AI model generates a color scheme code based on the instructions, and the Theme Agent inserts it into my code file. After a little clean up, we can see what our freshly minted color scheme looks like in the app. This color scheme might not be your cup of tea, but that's okay. Being able to generate schemes with minimal input means you can try lots of different options and find something that works for you and your team. Now, most interface designers will tell you that you should not just ship a generated color scheme without thoroughly evaluating it for usability and accessibility, and they're absolutely right about that. However, at the early stages of development, this type of tool can help you quickly explore different approaches before you pick that perfect design direction and start building out the user experience. Later on, I'll show you how to modify this project to generate different Flutter code and work more smoothly with your workflow. Before we get into that, let's talk to the developer of this project and have them explain how it works. All right, I'm joined today by the key contributor to the Flutter Theme Agent project and member of the Flutter developer relations team, Khan Wen. Thanks for being here. Hey, Joe. Thanks for having me. Okay, so first question. Why would you go ahead and build this? I mean, user interface development is hard work, but does AI actually make it any easier? Yeah, I mean, I think so. As developers, we're always in a position where we're learning new things, right? New technologies, new APIs, and everything is always new, and it's always coming. And so, I think AI has a potential to accelerate sort of that learning process for developers. For example, say, you know, there's a new API that comes out, and you're like, well, we want to generate construct this object, and you can essentially ask AI to construct this object, and you don't necessarily have to go and dig up the API docs and go through code samples. You can sort of generate your own code sample using AI. In addition to that, for the ideation phase, for example, myself as a designer, I'm still learning, I'm still figuring things out, but I'm very guilty of spending, you know, an hour in a color picker trying to find this the perfect shade of yellow, just so I can have a theme that has, you know, some yellow in it. And in that case, right, AI can help you accelerate that process. Really, the shade of yellow that I pick does not matter, and I just want something on the screen that I can see and then build from and iterate from. So, AI could generate that code, and then for ideation purposes, if I have that color scheme in mind, I ask AI give me back the code, and then I can take it from there and just keep tweaking and and building on top of it. And of course, from the developer relations perspective, I'm really excited about how AI has the potential to teach even, you know, non-programmers how to code and and make it more accessible in that way. You don't have to know exactly how to write that code to tell the computer to do that thing. So, that's super exciting, I think, in terms of opening the door for non-programmers being able to learn to code. All right. So, next question. How does the Flutter theme agent actually work? Yeah, so it takes the user's text input, so the developer can leave a comment of, you know, what kind of theme they want to generate, and it packages that up with a few things. So, this is what we call the instructions. Um and so, the instructions includes things like a little bit of context on, you know, what a theme data is, um along with a summarized um API, right? Explaining what a theme data is along with what uh property values exist for a theme data, and a couple of examples like, you know, here's what a color scheme looks like, or here's what a text theme looks like. And so, packages that up, ships it off to the Gemini API, and then once it gets a response, it just plops that right into your code. Okay, so next question. If I want to extend the Flutter theme agent, how do I go about doing that? Yeah, so you can clone the repo and jump in and update the examples and the instructions that are there to essentially get results that are closer to what you want. If you have examples of a great Flutter theme that you really like, you could dump that in there. Or say you have other specific themes that you want. So, component themes are a big thing with Flutter themes. You could also add that in there as well. And to take it a step further, you could just completely scrap the whole theme thing and replace it with any widget that you often, you know, use or would use often in your code. So, it can generate those widgets instead of a theme data. All right, so last question. From what you've explained, you're not actually building an AI model from scratch here, you're just using an existing one. So, does this really count as AI development? I mean, it does to me. I think so. At the end of the day, I mean, I think AI is just another tool that's in a developer's toolbox, right? You reach for it when you need it, and helps you get the job done. And I mean, if you think about it, it's like a hammer. To build a house, you don't necessarily need to build your own hammer. You can just go to the store, buy a hammer, and then use that to to do whatever you need to do. Um Um, can build a model. I mean, that's always an option, but if you don't need to, you don't really have to. At the end of the day, I really just hope that developers can feel more empowered to build AI-powered tools and apps like this one. And I mean, it's another tool in the toolbox, like I said. And so, ultimately, it hopefully helps you to build cool stuff and change the world. All right. So, thanks so much for being here and telling me about the Flutter Theme Agent. Thank you for having me, Joe. It's coding time. Let's look at how you can extend the Flutter Theme Agent to create your own AI-powered coding features. Don't worry about taking notes. There's a detailed tutorial linked in the description. The simplest way to extend the Flutter Theme Agent is to modify the prompt instructions and code of the existing commands. Like this button style function. I'm going to show you how to create a new command using the color scheme class. To start, make a copy of one of these code files and give it a new name. I made a copy of the color scheme TS file and called it color scheme 2.ts. I'm changing the instructions for this updated command so I don't have to clean up the extra syntax every time I generate a new scheme. To do that, I'm adding this new instruction to the prompt to not include the color scheme code syntax. I'm also removing the color scheme object syntax from the examples, so it's just a list of colors. That's all I need to create a new command code. Now, let's plug that code into the rest of the extension. I need to update the extension TS file to import the new code file, then register the new command. Finally, I need to update the package.json file to declare that new command color scheme set. That's it. Now, I'll hop over to the debug environment and try it out. Now, I can generate colors and try them immediately without having to do any cleanup. Hot pink with teal. The prompt instructions for generating this code include a summary description of the color scheme API and a couple of examples. We recommend including between two and four code examples in your prompt with a variety of output. All right, you can see that my updated command only generated the list of colors, so I can visualize it right away. Let's see what this new color scheme looks like. Not bad. What I like about this feature is you can use it to quickly iterate and visualize ideas with your team and explore different approaches without having to spend hours or days writing prototype code. All right, let's wrap this up. And that's all the time I have to tell you about this AI-powered code generator project, Flutter Theme Agent. Thanks to my guest Khan Nguyen from the Flutter Developer Relations team for building and sharing this code project. Links to the code and a detailed tutorial on how to extend Flutter Theme Agent are in the description. If you get some new functionality working, let us know in the comments. Also, if you're interested in diving deeper into building developer tools for Flutter, Khan has another video on the Flutter channel that covers building Flutter dev tools extensions with Gemini AI. Link below. Thanks for watching. I hope this video helps you build your own AI agent for code generation and helps you and other developers be more creative, productive, and collaborative with your whole app development team. Keep learning. Keep building. Make something great. We'll see you again soon.