Transcripts
1. What you will learn and build: Hey, guys, welcome.
Alfredocenc. And in this class, you're going to learn
the fundamentals of state management by building
a Counter Pro plus app. The best part,
we're going to use agentic AI as our
personal coding assistant to help us write better, cleaner code from
the very start. You learn how to set
up a new project, understand the
difference between stateless and state
fold widgets, and design a beautiful, modern UI using material
three design system. You will learn how to add dynamic text and create
elevated buttons, and with the help of
state management, we will add increment, decrement and reset
functionality. Then we will use AI to refine our code and find pugs
and fix them one by one. Before we dive in,
make sure you have flutter installed and VS
code setup on your machine. We'll also be using
Chat PD Codex extension to help us with our
EI pug hunting. This class is perfect for beginners who are just
getting started with Flutter. We're going to keep things fun, simple, and beginner friendly. Once our app is built, we'll put our AI to work to scan for bugs and
performance issues. No complicated jargon, just
clean, efficient code. For your class project, you'll be building your own version of the Contra Pro Plus app using the main dot file
we developed together. You will need to build the
logic, set up increment, decrement and reset functions, then use AI to find bugs
and performance issues. Once done, post a screenshot or a screen recording of your
app in the project gallery. I can't wait to see
what you've built. And if you're excited to see how AI is changing the
way we build apps, make sure to hit that follow
button on my profile, so you don't miss
the next app in our series. Let's get started.
2. Creating the project, Main Function, RunApp: All right. The
first thing we are going to do is create
a new project. Let's open up our terminal and navigate to your
project's folder. So for me, that's a CD, desk type, CD, flutter projects. And then type, flutter, create, counter P plus. Then hit Enter. Once the project is created, let's move inside it. CD, Counter Pro plus. Now we will open the project
in VS code by typing code, D and hit end. I'm going to close
this command pront here and let's maximize this. Now that we are
inside the project, let's open the lip folder and then open the main dot dart. This is where we will be writing all the code
for our countAp. To get started, let's
remove all the default code inside this file so we can
build everything from scratch. Let's select everything
and hit the backspace. Next, let's import the flutter material
library at the very top. So we'll say import package,
flutter material dot. Now that we have the
library imported, let's set up our main
entry point for our app. That's going to be void main. Then we'll say Runapp
Cast, counter P plus. Save that. Here we're
calling the run app function and passing in our main
widget, counterpro plus. We haven't created this
widget yet, but don't worry. We'll build it together
in the next lesson.
3. Creating the CounterProPlus Stateless Widget: All right, it's time to bring our app to life a little bit. We're going to create
our counter Pro plus widget and this one is going
to be a stateless widget. Now, before we get
started, a quick recap. Remember what
stateless widget is? A stateless widget is like
a calm still painting. It doesn't move or react
to anything because, well, it doesn't have any
activity going inside. It's just there,
beautifully still. Let's go ahead and
build this together. In our main dot file, let's type in class, counter pro plus
extends stateless git. Inside this, we're
going to say const, counter Pro plus, and then we're going to say
super dot key. Then we're going to or
write this build method and then get rid of everything
that we have here and we're going to
return a material app. Okay. Now inside
that material app, we're going to say title, and the title is going
to be counter P plus. And then we can remove
that debug banner. I'm set that to falls. And here we can
set the theme now. I'm going to set the theme data to use material three True. Then I'm going to set the color scheme seed
to colors dot blue. I'll save that. And after this, we're going to set
the home region. And this is going to be const. And here we'll say
counter home screen. Let's save that. So what
did we just do here? We created a Counter Pro plus class that extends
the stateless widget. Inside the build method, we returned a material amp. This adds like the
root of our app. We set a title, disabled the annoying
little debug banner, and then we gave it a
simple theme and pointed the home to a widget called
Counter home screen. Don't panic if you see red squiggly line under
counter home screen. That's totally expected. We haven't created
that widget yet, and that's exactly what we
will do in the next lesson.
4. Building the CounterHomeScreen & Creating Private State: All right. Now it's time to make things a
little more alive. We're going to build our counter home screen,
and this time, it's going to be a
state full widget, because this is where all
the activity happens. This is where we
will be updating and reacting to
changes in the app. Let's start creating
that widget. So here we're going to say
class counter home screen extends stat full widget. Let me scroll back up. And here, we're going to say
const, Counter home screen. Let's say super dat key. And here, we're going
to say, All right. And this time,
we're going to say, create state and let me get rid of all the
stuff that we have here. And inside this stateful widget, I'm going to add in our
home screen widget. And let me get rid of
these two curly braces. And here, I'm going to
assign that to underscore counter state. And
let's save that. What just happened
here? We declared a counter home screen
class that extends state full widget and
then inside create state, we returned a
underscore counterste. That's the private state
this widget will use. Now let's actually build that private state and add
some functionality to it. After this, here we're
going to say class, underscore, counter
state extends state. And inside this state, we're going to say
counter home screen. And inside this,
I'm going to set A INT that is an integer. I'm going to call a private
variable called count. I'm going to set that to zero. Then we need to create
three states here, one for increment,
one for decrement, and one for reset. Let's
go ahead and create that. Here, we're going to say
void, underscore, increment. And here, we'll say
set date set that too. Since this is an
increment, we can just say count plus plus. This is going to increment. Now, we need to
create the decrement. Void, underscore decrement. And here we'll say set state, and I set that to
count minus minus. That is going to decrement. Then we need to
reset everything. To reset that we can say
void, underscore, reset. Then we'll say set state, going to set the
underscore count to zero. That's going to set
that back to zero. Let's break it down. We created a private class called
underscore counter state. Notice the underscore
before the name. That makes it private
to this file. We added a simple
integer underscore count to hold our counter value. Then we wrote three methods, underscore increment
to increase the count, underscore degreement
to decrease the count, underscore reset to
bring it back to zero. Every time we call
these methods, we wrap the logic
inside the set state. That's what tells Flutter, Hey, something's changed,
rebuild the UI. Yep, I know you see those
red and yellow lines too. Don't worry. The code is
perfect. No issues here at all. Now that we have got
our state ready, it's time to build the
UI for our counter app, and we'll take care of
that in the next lesson.
5. Building the UI AppBar and ColorScheme: Okay. Now that we have
got the logic in place, it's time to make it come alive. This is where we
take all the behind the scenes work and actually
put it on the screen. We're going to build
the UI step by step, nice and easy and
then make it dynamic. Let's start by overriding
the build method inside our underscore counter strate,
which we already created. So here we're going to
say at override build, and let me scroll back up. And here, I'm just going
to remove these things. And here, I'm going
to return scaffold. And now inside the scaffold, I can add an APA. Here we'll say APA inside this, I can add a title that title is going
to have a text widget and that text widget right
now says counterproplus. Let's save that. What we're doing here is
returning a scaffold. Think of a scaffold like the
basic structure of a house. It gives us the foundation. An appr on the top, a body section to fill it with widget and the flexibility
to add more elements later. Now let's run the app. I'm running it as the Windows
app, as you can see here. But you can choose whatever or whichever platform you want, Windows, IOS,
Android, or even web. Let's go and run this. There it is a simple bar sitting
right on top of our screen. Let's go and align
this property. So I'm just going to
put it over here and my code over here and just
compress this a little bit. This is good. Then let
me see the full code. All right, we got our app, but we can make it
look a bit more polished with a touch
of material design. Let's update our app bar. So I'm just going to put
this down a little bit. I'm going to break these things so that I can read better. Let's put it comma here. Now, what we can do is
after the title here, I want to put it comma and you
will say background color, I'm going to say theme dot, off, dot color scream. I'm going to say primary. I'm going to do the
same thing here. Let's save that first.
Let's see how that looks. Again, see if we got
that blue color. And then we can say
foreground color, and I'm going to
do the same thing. Theme dot off dot color
scheme dot on primary. Let's save that, and that will give us the white text here. So what changed here? We added a background color using the current
themes primary color, and then we set the text color that is a foreground color, so it looks clean and readable. Nice and simple. It already feels like in real
app, doesn't it? In the next lesson,
we start building the body of our
counter Pro Plus app, and that's where the
real fun will begin.
6. Building the UI The Body: All right. Now that we have
got our app bar in place, it's time to give
our app the body. This is where we will show
the counter value and later add buttons to make
it come alive dynamically. Let's add the body
inside our scaffold. You can see this is our
scaffold and inside this, we can say body, and then I can set it to center. Here, center takes in a child, and that child will
add in a column. Now inside that column, we need to align
things in center. So we'll say main
acess alignment, say main axis
alignment, dot center. Then we need to make sure that everything takes only the
size that is required. So we'll say main exercise, say main exercise dot min. Okay. Now inside this,
we can add children. So this is where all the
items of our app come in. So here, we can add
in a text widget. And here we can
say your counter. And let's save that. You can see that your counter
showed up here. And now we can
actually style this. So here we can say style. Then we can say them dot off. Then we can use the text theme. And here we can use the
title small and save it. You can see it became bolder. Now, instead of title small, we can use title medium. That's going to make
it a little bigger. Now, after this,
there's a text widget. You're going to add
another text widgets. Now this tech widget is going to hold the variable of our count, which is right now zero. So here we can say
dollar underscore count. And if I head on, save, you can see right
now it says zero, but it's a very tiny zero, so you need to make it big. So here, what we can do
is we can say style. In here, I can use textiles. The textile first,
we're going to increase the size
of that variable. For that, we can say font size and I can set the
font size to 80. Save that. You can see
that became bigger. Now that's a very black
thick black color. We need to use the blue color, the themes blue color. For that, we can say color. Then you can say Team dot, dot ColorScheme dot primary. And you can see it is now taking the theme's primary
color for that variable. Scroll down, and let's see
what actually happened here. Let's break that
down nice and easy. We wrapped everything
inside the center widget, which you can see over here. That brings all our content right in the middle
of the screen. Inside that, we added a column. We can stack multiple
widgets vertically. We then used main axis alignment
and we set it to center. To align it perfectly
in the center. Then we added two widgets, text and another one text. The first one, we're using it for the title, your counter. The next one, we are actually using it for the
counter variable. Since our underscore count
starts at zero by default, that's what you will
see on the screen. But don't worry, we're
just warming up. The next lesson, we will add the buttons that will
actually change this number, increment, decrement,
and the reset. You can finally see
your app in action.
7. Building the UI Adding Buttons & Functionality: All right, this is
where things get fun. We've got the counter
sitting on the screen. Now let's give it
some superpowers. We're going to add
three buttons, increment to increase
the counter, decrement to decrease it, reset to bring it back to zero. The best part, we
have already written the logic for these
functions earlier. Now it's time to bring them
to life using some UI. Instead of plain buttons, we're going to use
elevated button icon. We can have both text and icons. This is what
we're going to do. We're going to use
plus for increment, minus for decrement
and refresh for reset. And since we want
them side by side, we will use row widget. Okay, so let's get started. So right after this text
widget which you see here, I'm going to add in
some breathing space. So I'm going to say sized box. I'm going to call a
height of 15 pixels. And then here we're
going to add in our row. Save that, you can see the
counter moved up a little bit. Now inside that row, we want everything to
be aligned to center. So we'll say main
Access alignment, say main axis alignment
dot center. Okay. Now, this row takes
in a lot of children. So inside that children, the first thing that
we're going to do is add a elevated button with an icon. So here, the elevated button with icon takes in a
function and a label. Let's go ahead and give this. The first one that we are
going to do is decrement. So on pressed, we want to load the underscore
decrement function. Okay. And for label, I'm going to use a text
widget which says decrement. Save that. See, we
got that button here, but it doesn't have any icons. So let's go in and
add that icon. So we'll say icon,
and here we're going to say icon, icons. Now, for decrement, we were
supposed to use minus, so that is remove icon. Let's save that. See, we
got that minus thing. And if I click on that, you can see it goes to
the minus version. From zero, it is going to minus. Now, let's add some
breathing space here. That is sized box. I'm going to set the
width this time to five. And then what we can do
is for another button, I'm just going to copy
this, paste it here. Okay, so we got two decrements. All we have to do is
change this to reset, and this is going to be reset. And here, we reduce refresh
icon. Let's save that. Now you can see,
we have the reset, and if a gl canon reset, it goes back to zero. And now, again, let's add
some breathing space. And then another elevated
button with an icon. So this is going to
be increment and the text is going
to be increment. And here, this is
going to be add. Save that. I can see we
got that increment button. Now, if I click on decrement, it goes to minus. If I click on reset,
it goes to zero. Now if I click on the
increment button, it goes up. Okay, so what's happening here? You see that we used
something called sized box. This gives a little breathing
space in height and width. So if we give width, it's going to move the sideways. If we give it height, it's going to move in
the height basis. And then you can see we
use something called row. Row lines up the
widgets horizontally. Or you can also see we used main axis alignment and we
have set this to center. This keeps things in center. Then we created three buttons, elevated button,
elevated button, and another elevated button. These buttons call
in functions like decrement, reset, and increment. Now, when you run this app, you can see here,
we got decrement, we got reset, and we
got increment too. Now here's the best part.
Since the entire app is built with material UI, you can just change the color
scheme seed in the theme, and the entire app color palette will change with it.
Let's go and test that. If we scroll all the way up,
you will see this color. I'm going to change
that to maybe teal. And if I hit on save, you can see that
everything changed, and I can actually change that
to green and I don't save. You can see it changed to green. And if I set it to purple and it don't save, it
changes to purple. Now you have a fully functional, dynamic and theme
friendly counterAp.
8. Fixing bugs and performance issues with Ai: Alright, everyone. Now that our counter Pro plus
is taking shape, it's time for a little
spring cleaning. We're going to use
hangebty Codex extension to help us find and fix bugs. We touched on this
in our last class, but keeping your code
clean and efficient is a habit that will save you much more time
in the long run. First, let's make sure that
the extension is enabled. Let's go to extensions here. Again see we have codex, and I'm going to enable that. And once that is enabled,
let's close this. And now let's get back
to our main dot file. Once that is ready, we'll head over to the chat and just click on that and we will give
a very specific mission. Let's type this. I want you to check for bugs and
performance issues in my app inside the lip folder. Please write a block command
right about each bug with a solution and
label them as bug one, bug two, and so on. Now once you have the prom, let's go ahead and kick Hena. Perfect. The comments are in. Let's take a look
at what it found. Let's go ahead and
close the chat here. And if I scroll down, and you can see we
have the first bug. The static widgets
in this screen are rebuilt every time State runs. The solution is add
a const to widgets. Those values never change, such as the text
counterpro plus, the sized box, button
labels and icons. So we have this one. So
let's go ahead and fix that. I'm going to say const. And you can see, we
use the theme dot A, but it did not give us that bug. But since we already know
this from our previous class, you can go ahead and
fix this one too. So now what we can do is here, we can create a variable I'm going to call
this has Team data. It's equals to Team dt
of context. That's it. I'm not going to add
color scheme this time. That's because if I scroll down, you can see we have
the text theme, the color scheme, and well, a lot of other stuff, too. So what we'll do
is we'll directly use this theme data
to apply this. So here we're just
going to remove this and we'll say them data. And we'll do the
same thing here. Let's get rid of this one. Let's call this as them
data. I'll save that. And now if I scroll down, you can see we
have your counter. You can actually set
this one to coast two, and there we go. We have another one, I'm going
to call this as them data. If you use them
data, we can't use const, let's go ahead
and remove that. And let's scroll down.
What else do we have? We have another one here so
we can just say theme data. Let's say that we
have a sized box. I'm going to say const here
and there's a second bug. Now before we continue and start adding cons to everything else, let's look at the second bug. This row can overflow
on small screen because all three buttons keep their full text
tables side by side. Okay, so solution is used to wrap those buttons
with the rap richard. Okay, so let's see what
is it talking about. So if I try to compress
this, look at that. We get those yellow
and black parts. Those are the things that we need to get rid
of. That is the bug. So here, the solution is
to use a rap Richard. So we did use row, right? So what we'll do is we'll take this entire children
here. Going to cut that. And instead of row, I'm going to use rap
and just page this. Okay, so nothing changes. Everything still remains same, but you can see now they are
quite close to each other. And now if I try
to compress this, see, the spacing
is not that good. It is responsive, though, but the spacing is not good. So we need to add some spacing. Let's go ahead and add that. Now, in the wrap,
we have spacing. So I can set the
spacing to fine. If I set that, you can
see, we got that spacing. But now if I compress this, I can see that
comes one below the other to fix that one too. For that, we will call
this as run spacing. I'm going to set that to 15. Now you have better
spacing there. Now, I want this button
to align in center. To align that to center, I will say alignment. Rap alignment dot center. Save that and that's
going to come in center. Then we have the children here. Now your counter
app is responsive. Now the best thing is,
since we're using wrap, we don't need to
use the sized box. So here we can get
rid of this one, so we can get rid of this one,
too, and let's save that. Okay, so now the
spacing is much closer. And if I compress this, I can see how that looks. So we set this to 15. I'm going to set
that to five back. Okay, so now they're
close to each other, and they are responsive too. Now, now that we have done this, you can see that
it's using decrement and all those things and we don't have to use
cost on that one. So now let's go ahead
and now let's go ahead and ask our AI
for another checkup. Okay, check the code
again and remove the comments if everything is fixed. Let's go ahead hit end. Alright, so we got the answer. And if you check this out, we actually did not add we were supposed to add
the cost for the text, but AI kind of
took care of that. So we did not have to add for the buttons because we're
using a function here, but for the labels and icons
we're supposed to add. But the Codex did
add that for us. And well, awesome. Codex just gave us
the green light and our code is clean and
the s are responsive, and we're ready for the next
challenge. Great job today.
9. Recap and Class Project: And that's it. We
have successfully built the Counter Pro
plus app together. We started by setting
up our project and building the custom
material three theme. We moved on to mastering state management,
creating increment, decrement and reset functions that make our app
truly interactive. But we didn't just stop there. We bought the power
of agentic AI to act as our personal
coding auditor. We used our AI assistant
to scan the If folder, finding performance tweaks and layout bugs that even experienced developers
sometimes miss. Like having a senior
developer right there in your code editor
ensuring every line of code is professional
and clean. Now it's your turn. Your
class project is to build your own version of
the Counter Pro Plus app. I want to see your
personal touch. Try adding new icons, changing color schemes, and
even adding a new feature. Most importantly, use your AI assistant to
double check your work. Once you are done,
upload a screenshot or a screen according
to the project gallery. I'll be there to check that
out and give you a feedback. Remember, this is
a huge milestone. By combining your floater logic with AI Power troubleshooting, you are already building
apps like a Pro. If you can master
these fundamentals, you can build anything in the world of mobile development. If you're enjoying this class, make sure to hit the follow
button on my profile. That way, you'll be the
first to know when we release the next app in
the AI powered series. Thank you for coding
with me today. I'm your Floater sense, and I'll see you
in the next class. Until then, keep experimenting, keep building, and stay curious.
See you in the next one.
Flutter Sensei, Teaching Flutter from Scratch
