SPEAKER: In the
last year or two, AI has gotten the reputation
for helping you brainstorm ideas and automate tasks. But can AI actually help
you learn something new? That's what we're going
to figure out today. I'm Blondiebytes. I'm a backend engineer. And I feel like I should know a
little more about the front end than I actually do. All I know is I
send them some JSON and they make it
look nice and pretty. But that's about it. There are frameworks and SDKs
that client engineers use. One in particular
is called Flutter, which is used for building
cross-platform applications. So I'm wondering if I can use
AI to learn Flutter and build a simple web app with it. To do this, we're going to be
using Google's AI-powered IDE called IDX. It lives in the browser. And we'll be using
its AI tools to try to make a basic Flutter app. Let's get into it. So Project IDX has
different templates for different tech stacks. And so we are going
to choose Flutter. We'll call it my flutter
app and click Create. IDX will set up our workspace
and our environment. To write our Flutter app, we'll
be using the Dart programming language, so I'll click Yes
for these VS Code settings. But what am I going to do
with this lib main.dart Where do I even start
in learning how to work with a Flutter application? Well, in IDX, there is an AI
that we can start conversations with. And so it's this Code
Actions button at the top. Here we can ask any
question about Flutter, any question about
Dart, and really try to build on this application
that the template gave us. Let's see if this AI can explain
the file structure of the app. So it looks like the main.dart
file is the main entry point of the app. And when this runs,
it will run my app. And it has a build method that
returns a material app widget. So it seems like
widgets are going to be the components in
a Flutter application. And this is different because
this is a stateful widget. And so this is
saying this widget represents the home
page of the application. The state we have is a counter. So this is something we're
probably keeping track of, is some counter. And then the counter
is incremented when this method is called. And this state, it
looks like it has a build method also associated
with that, where it's building an app
bar and components associated with this counter. So in order to preview this
application, when we opened up the template, it
had this web page. And so this will allow
us to preview the app. So let's click this button. And there's that state
changing on the home page. I want to change something
with it, so let's ask it, what can I change easily? So we'll ask for recommendation. If I just want to make
a simple code change, what is something
I could change? We could change
the theme property to change the overall
look and feel of this. So instead of deep purple,
let's do a light blue. We could also change this
to instead of increment, we could do add one,
change the name of that. That's enough change. So let's go back to the web. And now, it's this light blue. You push this button many times. That looks like it maps to
this widget with the text. It looks like this tooltip
didn't really change anything. So let's ask, what
is tooltip used for? So tooltip is a small
popup that displays a short message when
the user hovers over or long presses an element. So if I hover over the button,
it says add one, whereas before, if I hovered over
it, it probably would have said increment. So this is actually really
cool because I'm querying documentation on the fly. I don't have to go look
at some big long document in order to get this to
work because I just ask it, what is the tooltip? What is that? I don't know. And then it tells me. Now, this is basic. Most of the changes we made
dealed with the look of it. So we changed the color. We changed a few text things. But I think the
best way to learn something new is by practicing. And so what else could we
do this application that more changes the logic
of it, that completely changes how it works? Well, we're going to try to
change this into a dice roll app, so still a
basic application, but through this, we
should be able to learn some new things about
Flutter and keep with that. So let's ask it, what code do
I need to change to turn this into a dice roll app? I wonder where this Flutter
demo home page is coming from. Here it is. We'll change that
to dice roller. And then it says create
a stateful widget called MyDicePageState. So that's going to be
our my home page state. And this is the core logic
that we're going to copy. And so instead of
a counter, we're going to have a dice
value that will start off at 1 because the dice,
you can't roll a 0. And we're going to have
a method called rollDice. The state will set
the dice value. And that dice value is
going to be a random number. And we're going to
say nextInt 6 plus 1. So hopefully, this
works similar to Java, where it generates a random
number that's 0 to 5. And so this is exclusive. And then we add 1 to give
it that number 1 to 6. And then it's giving us an
error about this random. We probably have to
import something. So we're going to import
something from dart.math. And this is the logic. So it looks like setState,
typically, whatever logic we want to
happen, whatever values we want to change when we
reset the state for something, that is what we put in here. And then we have
the build, which is how something is going
to be shown on the page. And here it's saying we have the
app bar with our widget.title. So that's going to be the dice
roller that we passed through. And then we have children. Here it thinks I'm going
to have a dice image. But I don't have those. And so we are just going
to display the number. And that number is just
going to be the dice roll. What did we call it? The dice value. And then we'll
change that header. Your dice roll is
dot, dot, dot, dice. I am curious about scaffold. What is the scaffold? What are the
different components? Here the app bar seems to
be this thing at the top. And then the body, here, we're
saying we want it centered. We're going to have
a column within that. And it's going to be a
child of the main body. We're going to give
it this alignment. And within that, we're
going to have this button. And then when we press
that button on the side, I want it to be
rolling the dice. And so we'll do rollDice because
that's the name of our method, roll the dice. And for our icons,
that plus button doesn't really work for us. So let's see what
other icons exist. There are so many icons. And there's not a single
one for a dice roll. So you know what we could do? We'll say dot add. We could ask our AI
what icon we should use. What icon should
I use from icons dot to represent a
button to roll the dice? Let's go casino. There is a casino one. So maybe we'll do casino. And we'll want to
roll the dice-- not rice. So the first dice roll is
we put our thing off at 1. And this casino icon
actually looks really nice. So let's roll it. We get 5. We get 6. We get 4, 3, 6. All of these look pretty good. We just converted a counter
app into a dice roll app with no experience with Flutter. We only used IDX's AI in
order to generate this code and learn more about it. We asked questions
when we got stuck. And we used our just basic
software development knowledge in order to query the
AI and make this app. So that's it for this video. This was one of my
first times using IDX. And I really enjoyed it. This IDX AI was super useful. And the fact we
got that template to start off with to try
to learn something new was also really, really cool. So if you want to try
it out for yourself, use the link down
in the description and start making
your apps with IDX. Thank you for watching. And I'll see you next time. Happy coding. [MUSIC PLAYING]
