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]