JOE FERNANDEZ: In
this video, we'll explore how you can
build an AI-powered tool to help you write Flutter code. Let's go. [MUSIC PLAYING] 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 3rd 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 Engine 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 and 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 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 ColorScheme 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
cleanup, 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 OK. 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, Khanh Nguyen. Thanks for being here. KHANH NGUYEN: Hi, Joe. Thanks for having me. JOE FERNANDEZ: OK,
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? KHANH NGUYEN: Yeah,
I mean, I think so. As developers, we're
always in a position where we're learning new things,
new technologies, new APIs. And everything is always
new, and it's always coming. And so I think AI
has the potential to accelerate that learning
process for developers. For example, say there's
a new API that comes out and you're like, well, we
want to 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 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
an hour in a color picker trying to find just the
perfect shade of yellow just so I can have a theme
that has some yellow in it. And in that case, 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. It gives me back a code, and
then I can take it from there and just keep tweaking
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 non programmers
how to code 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. JOE FERNANDEZ:
All right, so next question-- how does the Flutter
Theme Agent actually work? KHANH NGUYEN: Yeah, so it
takes the user's text input, so the developer can leave
a comment 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. And so the instruction
includes things like a little bit of context
on what a theme data is, along with a summarized
API explaining what a theme data is, along with what
property values exist for a theme data. A couple of examples--
like, here's what a color scheme
looks like or here's what a text theme looks like. And so it 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. JOE FERNANDEZ: So
next question-- if I want to extend the
Flutter Theme Agent, how do I go about doing that? KHANH NGUYEN: 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
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 use or would
use often in your code. So it can generate those
widgets instead of a theme data. JOE FERNANDEZ: 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? KHANH NGUYEN: 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. You reach for it
when you need it, and it 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 do
whatever you need to do. 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. JOE FERNANDEZ: All
right, so thanks so much for being
here and telling me about the Flutter Theme Agent. KHANH NGUYEN: Thank
you for having me, Joe. JOE FERNANDEZ: 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
colorscheme.ts file and called it colorscheme2.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 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 code file, then register the new command. Finally, I need to update
the package.json file to declare that new
command ColorScheme 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 ColorScheme API and a couple of examples. We recommend including
between two and four code examples in your prompts
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,
Khanh 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, Khanh has another video
on the Flutter channel that covers building
Flutter DevTools extensions with Gemini-- 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. [MUSIC PLAYING]
