in this video we'll explore how you can build an AI power tool to 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 when 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 [Music] meeting the flutter theme agent is a visual studio code extension that uses Google's Gemini API to generate code for flutter visual theme
s 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 project and the theme agent you can generate themes and components using the command pallet 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 funct
ion 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 pallet and select the theme agent color scheme c
ommand 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 cleanup we can see what our freshly mted 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 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 o
n 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 [Music] 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 conen thanks for being here hi Joe thanks for having me okay so first question why would you go ahead and build this I mean user inte
rface 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 techn 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 um for Developers for example say you know there's a new API that comes out 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 um 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 um just so I can have a theme that has you know some yellow in it um and in that case right AI can h
elp you accelerate that process really the shade of yellow that I picked does not matter and I just want something on the screen that I can see and then build from and iterate from so a I could generate that code and then for ideation purposes if I have that color scheme in mind I ask AI gives me back the code and then I can take it from there and just keep tweaking and and building on top of it um and of course from the developer relations perspective I'm really excited about how AI has the pot
ential to teach even you know non-programmers how to code and and make it more accessible in that way um 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 users's uh text input so the developer can leave a comment of you know what kind of theme they wan
t 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 A
PI 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 liked you could dump that in there or say you have other specific themes that you want so component them
es 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 developme
nt 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 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 you 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 [Music] 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 2ts 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 the color scheme code syntax I'm also removing the color scheme object syntax from the examples so it's just the 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 co
de file and 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 p
rompt 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 gene
rator project flutter theme agent thanks to my guest conu 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 Conan has another video on the flutter channel that covers building flutter Dev tools extensions wit
h 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 [Music] soon
Comments