Transcripts
1. What you will learn & build: Hey, everyone. Welcome
to this class. I'm Flutter Sensei,
and in this class, we are going to learn how to build a complete
noesaM in Flutter. Throughout this
class, you will learn how to create a new
fluttered project, set up the provider package
for them switching, build the home screen
with a grid layout, create the add node screen with a fully
expanding text field, edit any existing note, pass data between
screens with navigator, add delete functionality, and
polish the UI with padding, pacing, and rounded tiles. By the end of this class, you'll be able to build a fully functional
nodes application with light and
dark mode support. For your class project, you'll be customizing the app, everything we have covered. You can play with colors, change the tile design, adjust fonts, and create
your own visual styles. This class is perfect for beginners who are just
getting started with Flutter. All you need is Flutter
installed and VS code. So what are you waiting for? Let's get started.
2. Project Setup & Theme Provider: Alright, let's get started. The first thing we will
need to do is create a new project inside
our project folder. So let's go to our
command prompt. And from here, I'm going
to navigate to desktop. Then we'll get inside
the Flutter projects, and we'll say Flutter, create Nodes Light and hit no. Now let's get inside
the project folder, that is Nodes Light. And now let's launch VS Code. That's code dot. Now let's close the command
prompt. Let's maximize this. Now let's go to our
Pub spec dot YAML, and we need to add a package. Let's scroll down
to dependencies, and here we will add
the Pror package. That's Provider and save. We're going to use the
Provider package for switching between light
theme and dark theme. Now let's go to
our main dot dot. And let's get rid of
everything that we have here. Now, let's go ahead and
import the packages. That's import package, flutter, Material dot dot, and Import
package provider dot dot. Next, let's write
the main function. It's void main Inside this, we will have Runapp Inside this we'll add the change
notifier provider. And it's going to
be team provider. Then we need to
add a child const. I'm going to call this
as notes, Light I save. Okay. Next, we need to
create the theme provider. I'm just going to take this. Let's create a class here. Theme provider extends,
change notifier. You will say Ball is dark. Set that to false. I'll say ball and now
we need to create a getter that's get is dark. I'm going to set that
to the score is dark. We need to create
the toggle effect that's void, toggle theme. Then inside this, we'll say Es dark is not equal to Es dark. Then we'll notify the
listeners. I'll save that. Now we need to create
our Node slight widget. Let's go ahead and take this
one and space it over here. Let's say class,
node slight extends, stateless widgets say const, Node slight that
is super dart key. Then we'll say,
all right, build, and here we will create the variable called
them Provider. And that is Provider dot the theme provider. Save that. Right below that, we're going to return Material App save that. And now let's update
the Material app with all the required items. The first one that we
will need is title, which says notes Light. We're going to remove
the DBC banner. Then we're going to
set the theme for this theme data,
use Material three, true, and then
we're going to set the color scheme to
color scheme from seed. That is colors blue. Brightness is brightness,
dot light. Save that. Now we're to create
the dog theme. So I'm just going to copy this and I would say dog
theme and just paste it. Now this is going to be doc. Next, we need the theme mode. That is them provider dot Esdg. If it is dark, we're going
to say themode dot dog. Else, we're going to say
the mode, dot Light. Now we need to create
the HomeScreen. We'll say home, that's CAst'm
to call this as HomeScreen. Let's save that. In the next class, we will
build our home screen, and that is where our Notepp
will start to look alive.
3. Building The HomeScreen Layout: Okay, now that our
main file is ready, let's go ahead and
build our home screen. Inside your lip folder, we're going to
create a new folder, I'm going to call
this as screens. And inside that, I'm going
to create a new file called home underscore screen dot dot. And here, we'll say import, package, Flutter,
Material dot dot. Now, hold the Control
and space war and we'll see if we
get this home screen, which is going to extend
State fold widget. And here, we'll say const,
HomeScreen, superdt key. And here we're going
to create a state. We're going to take
this home screen and replace it with this one, and let's get rid of
these items here, and we'll call this as
underscore HomeScreen state. Now we need to create this one, such a take that say class, HomeScreen state extends, state, and the state is HomeScreen. And here, we'll say
at all right built. And we need to get the
theme provider here. We'll say final theme provider. Provider dot of and we're going to get provider. Save that. And here, we're going to return
the scaffold. Save that. Now we need to go to
the main Dot dart file and import this file. Let's go to main dot dot, scroll all the way up here, I'll say impart package, note slide, screens
HomeScreen. Let's save that. I can see that error is gone. I can go back to
your HomeScreen, and as you can see here, now
that we have the scaffold, we can run the app. Let's go to our main dot dot and let's go
ahead and run this. I'm running this as Windows app, but you can choose
your own platform. Let's go ahead and run this. Okay, so let's go ahead and
align this side by side and just this much and let's collapse this
one. Let's close this. Now, let's get back to
our homescreen dot dot, and let's add the appr here. So I'll say appr appr here
we'll say title is Cast, text. The text here is
going to say Noa. And we will add a
background color. I'm going to call this as
team dot dot color scheme, dot primary container. And I'm just going to copy
this then paste it here, this is going to be
full ground color. And instead of this, we'll
say on primary container. Let's save that and it
should see the app. Now we need to add the
toggle button here. So right after this one, we're going to say actions
is the icon button, and on pressed, we want to take the theme provider
and toggle the theme. And for icons, you can say icon and here we'll check
the theme provider is dark. If it is dark, we'll say
icons dot Light Mode. If not, we'll say
icons, dot, dark mode. Save that and now you can see we got
the toggle button. So let's go ahead and test this. So if I click this, it shifts to light
mode and dark mode. Okay, now that our
toggle button works, let's add the body for our app. First, we will need
a list generator. This is to test and see how our nodes will look
once we build them. So right after this
home screen state here, we'll say final, I'll
say underscore nodes. Set that to list to generate, I'm going to generate
six of them. And the generator is going
to be a simple hello world. Let's save that.
Now let's scroll down and let's create the
body here. It's a body. Here I'm going to add
the Grid Wave Builder. So the grid wave Builder first needs a list of item count. Here I'm going to
say item count is underscore notes dot length. Save that, and now we can
add the Grid delegate. That is the fixed cross axis. I set that to two. And here we need to
add some spacing. So that's going to be 25, and other one is going to be 25. We will need some
padding for the body. We can add that padding
inside the builder. So here we can just
say padding is at all. I'm going to set that
to 25. I'll save that. Now, inside the item builder, we're going to get
rid of this one. And here we will add our list style because list tile already has an on tap option. Let's go ahead and
return list tile. Now, let's update our list
style with some data. Here, the first thing that
I'm going to add is a title. This is going to
be a text w chair, and it's going to
come from notes, index, and let's say on save. Now we can see the text
showing up in the preview. But these text look
a little bit bigger, we need to make it a
little bit smaller. For that, what we can do
is right beside this, we can see style is textile. I can say font
size should be 13. Save that. That looks
smaller. That is much better. After the title, I want
to add a trailing. This trailing is going
to be a delete button. For this, we can
say icon button. On pressed, we don't
have anything yet, we're just going to
leave it blank and the icon is going to be icon, icons dot delete. Save that. Now you can see the title
and the delete button. But we need to add some
background color for our note to show the
sizing of each note. For that, we can
use the tile color. Right above the title, we're going to say tile color. Here, instead of specifying
a specific color, we're going to use
the thin color. That is them dot,
dot Color Scheme. We'll call this as surface
container, and that's a save. Now you can see that
our tiles look good. If I take my cursor here, you can see that literally
nothing happens. It would be nice to
have a ho effect too. We get that automatically
with the on tap function. Let's go ahead and add that. Right after the trailing here, you can see on tap, and here I'm just going
to add a plank function. Now, if I take my cursor, you can see, we get
a hover effect. Now when I switch to dog theme, you can see how that looks. And now we have got
the hover effect and the on top effect too. In the next class, we
will learn how to add a new node button and
build a new node screen.
4. Adding the Add Note Screen & Input Field: All right. Now we need to
add a floating action button that will take us to the add new node screen.
Let's create that. In our home screen right after the body that is
the Grid wave Builder, we're going to add a
floating action button. On pressed, we're going
to keep it empty for now. And we're going to
add a icon here. So we'll call this as icon. Icon stat icon start
at and save that. I'm going to set this
to Cs save that again. And I can see if you
have that button. I'm going to change the shape to circular bot so it
looks like this. All right, this button
doesn't do anything yet. For this button to take us
to the new node screen, we need to create
the screen first. So inside the lip folder, we have screens and
inside screens, let's create a new screen, and we'll call this
as add node dot dart. Let's get back here
and we'll say import, package, flutter,
material dot dart, and we'll say class. Add note, extends
state four Widget. And I will say const, add note supertat key, at all right, create state. I'm going to take the add
note and replace it here. I get rid of these items. I'll say, add note, state. And I'm going to create
this one, copy this class, add note state, extends state, which is add note. And here, we're going
to add a scaffold. All right. Now that we
have this scaffold, we can add this
screen to our button. Let's get back to
the home screen and inside the floating
action button. What we can do
here is we can say navigator dot perch then can take this route and
add a material page route, and the builder is going
to be ad note. Save that. Now, when I tap on
this plus button, it will take us to
the add node screen. Now, let's update our add node. Let's get back over here. Here, we will add the appr
text view and a save button. For that, let's get started
with the appr first. Here, what we can
do is you can go to the home screen and you can see we already
have this appr. I'm just going to copy this
then pass it over here, and we don't need the actions. So I'm going to get rid
of this. I just save. You can see we got this, and here we're just going to say, add note and save that. Now I can navigate between
the add note screen. Alright, so we got the app bar. Now we need to add
the text wheel. So here, right
after the app bar, we're going to say body. I'm going to set
the padding here. I'm going to set
the padding to 25. I'm going to set the
child here to column, and inside this column,
we will have children. And inside the children, we're
going to add a text field. Save that. And inside the text field, we can add a decoration
called input decoration. I'm going to set the label text as add your note
here as save this. So now you can see we
have the text field. But this text field
looks pretty small. What we want is an expanded text field where we can write as much
as text we need. For that, first,
we need to place our text field inside
an expanded Wichet. So let's go ahead and
select our text field. Right click refactor. I set that to wrap with
expanded and save that. Now we need to add some
details to our text field. The first thing that I'm going
to do here is I'm going to add max lines and I'm
going to set that to null. Then I'm going to set
the expanse to a true. Let's save that. Now you can see the border at the bottom. We don't want the border
at the bottom, right? Actually, we don't want
the border at all. For that, inside the
input decoration here, we can say border, let's say input border dot nun. And that is going to remove
that border from the bottom. And now we want this text
to show up on the top. So for this, we'll say
align label with hint. I'm going to set that
too. True. Click on save, that's going to go on top. Now if I click
here, you can see, we can write as much as we
want and the label stays up. Let's go ahead and test this. Let's go to our browser. And here, I'm going to
look for Lorem Epsom. Let's click on Show more. I'm just going to copy this. And let's page it over
here. I'll space it again. So now you can see we got the scroll bar inside
the text field, and we can easily
scroll up and down. Now, what we need next
is a save button, which will for now take us
back to the home screen. So let's scroll down. And here inside the scaffold, we're going to say
floating action button, floating action
button on pressed, we'll leave it blank for now
and we'll say child icon. Icon start. Save. Save that. And for this icon, I'm
going to set that to cost. And now we have the save button. Let's change the shape of
that to circular border. Okay. So now when I save this, it is supposed to go
back to the home screen. For that, here, we can say navigator dot pop and save that. So now if I had on saves going to go back to
the home screen. In the next lesson, we'll learn how to make
the edit screen.
5. Creating The Edit Note Screen: Okay, let's go ahead and
create the edit screen. Inside the lip folder
inside screens, we will call this as edit, underscore note dot dot. And's close this. Here we'll say import package, Flutter, material dot dot, say class, Edit note, extends State four widget. We will say const, Edit note, super dt key. The add or write, create state. I'm just going to
replace this over here. And there's going to
be dit, note state. And let's go ahead and
build this. Class. Edit node, State extends State, which is edit node. And here, I'll say A built, and we're going to
return scaffold. Let's save that. Now, let's go to the
home screen over here, and inside the tile
that we have here, we can see we have
the on tap function. So on tap, we want to
go to Edit screen. So here what we can
do is we can say Navigator Dat perch and the
route is Material page route. The builder is edit note. And let's close this. So now fi tap on this is going
to take me to Edit node. And this is where we
need to add our items. What we're going to do for
now is we're going to take everything inside the add node scaffold and
paste it over here. So now let's go to add note and take everything that we have over here inside
this scaffold, copy that, come to edit note, then paste it here. See? What we're going to do here is we're just going
to update some stuff. So here, I'm going to
call this as Edit note. And here we say
update, you're not. And the save button will take
back to the home screen. So everything is set up. Also, if you see
our home screen, the tile edges looks very sharp. Let's add some rounded
corners to them. For that, what we
can do is we can get inside the home screen, and this is the tile here, we can say shape and call this as rounded
rectangle border. If you take your cursor here, you can see it
takes in something called border radius.
Let's go and add that. I'll say portal radius, and what we want
is porter radius. Circular. Here I'm going
to set the radius to 15. Save that there now we
have the rounded corners. Now we have the UI, it's
time to make the UI dynamic. In the next lesson, we will make our ad node screen functional. Everything we type will be
saved on the home screen.
6. Making the Add Note Screen Functional: All right. Now it's time to add some functionality
to our app. First, let's go to add note. And here, we need to capture the data
from the text field. For that, let's go all
the way up and here we're going to
create a variable, I'm going to call this as
text editing controller, and the name of the variable
is going to be content. I'm going to set that to
text editing controller. Okay, now we need to assign this controller to
our text field. For that, let's scroll down. Again see we have a text field. We can say controller. Underscore content. Save that. Okay, let's say that we add
the data inside the ad node, and when we hit on Save button, we will be taken back
to the home screen. But that ad node screen
will still hold that data. We need to dispose that data. For that, what we can
do here is we can say at all right, disperse. And here, we can
take that content, and then we can disperse that. Now when we add a note and
come back to a new one, the previous data
won't still be there. Next, we are getting the data, but we need to send it
to our home screen. For that, let's scroll down to the floating action
button over here. First, we need to check if the user is not
sending an empty data. For that, we're
going to cut this. We'll say I underscore
content that text is empty, we're going to add a scaffold messenger
F dot show snack bar. I say snack bar, and the content is going
to be a text fill. It says, Note cannot be
empty. And let's save that. Now, once this is done, we're going to say return. And here, we're going to
add our Navigator dot pop. Now, when we add the
navigated dot Pop, we want to also carry
the content here. So here we can say,
underscore content. Dot text, save that. Okay. Now the content is
passed through navigator.com. Next, we need to receive it asynchronously in
the home screen. For that, let's go back
to our home screen. Now, at the bottom, we have this floating action
button, and let's update. So here on press, I'm going to call
this as a sync. I'm going to cut everything
that I have here and we're going to say final new note, it's going to await
and then paste. All right, we have
added the Sing. So now the data is passing from the ad node to
your home screen. But first, we need to check if the data coming from the
ad node is not empty. So for that, here, we'll say if new
note is not null. And Nne is a string. If this is true, we're
going to set a state. That's going to be nodes that add and what
we're going to add, we're going to add the
new note. Save that. Now, what we have
here is a generator. We can go ahead and
get rid of that. Let's scroll all the way up and I'm going to get
rid of this one. I'll add an empty list. Now this here is going to be a list of string.
I'll save that. So now if I reload the app, I can see if we
get a blank note. Okay. Now let's try
adding a new note. Let's click on this plus button here and we can call this as. This is a new note and
click on Save and i. We have a new note
in our home screen. Now, when I tap on this, it does take me to
the edit screen, but I can't see the
created note there. For that, we will need to carry the contents of the note
to the edit screen, and that's exactly what we are going to learn in
the next lesson.
7. Making the Edit Screen Functional: Okay. Now we need to make
the edit screen functional. For that, here's
what we need to do. We need to create a variable
in the edit screen, which will carry the data from the HomeScreen
and send it back. The HomeScreen will take that edited data and
save it as updated data. Now for this to work, we need to create a variable
in the edit screen. Let's go to Edit screen and
go to Edit node state here. Actually, before that here, we need to create a variable. We'll call this as final string, and this is going
to be edited node. And we're going
to add that here. I'll say require this
dot edited node. Now our edit screen also has a text field. Let's
update that too. So inside this one, you're going to say final, let's say text
editing controller, and we'll call this
one as content, it's going to be text
editing controller. Now let's update the text field. Let's say controller. Unscri content. Now we need to get the data that is coming from
the home screen. For that, let's scroll all
the way up and here we can say at all right and we have
something called int state. Inside this, what we're going to do is
we're going to take the content that we have
and the text inside it, and we're going to assign
that to Wig that edited note. Save that. Once the data
is edited and saved, we need to dispose that
data from the screen. For that, here we
can say at all, dispose and we can underscore content that
disperse save that. Now the edit screen is ready to receive the data
from the home screen, but we still need
to check and send the updated data back
to the home screen. For that, at the bottom, in the floating action button, let's do the validation first. So I'm just going to cut this. And here, we'll say F underscore content dot text is empty. We're going to add a
scaffold messenger, dot F, dot show snack bar. This is going to be a snack bar. This is going to be a
text field, which says, updated note cannot be empty. I save. And once that is done, we're going to return. Then here, we can add
the navigator dot palm. Now this is going to
carry the updated data. For that, we'll say underscore
content, text, save that. Now our edit screen can
receive and update the data. In the next class, we will
configure our home screen to receive that updated data and replace the existing one.
8. Updating Notes & Fixing Overflow Issues: All right. Now we need to update the home screen to
receive the updated data. But first, you can see we have a tiny error in the home screen. If you scroll down, you
can see in the edit node, we need a parameter. Let's go ahead and
quick fix this. That is edited node. I'm going to set that
to underscore nodes, that will be index. Let's save that. If we get this error, don't
worry about it. I can just close this and
you can get back here. Actually, we can re run our app. I add the new node here. I'm going to say this
is a new note, save. You can see if we
get this and if I tap on this, the
data comes here, and when I say updated, and click on save that
data doesn't come here. That's what we need to fix now. In our home screen, update
the list tile like this. Here, you can see we
have this on tab, right? So here, what are we going to do is we're going
to add in a sink. And we're going to take all
of this and just cut this. And here, I'm going to
create a final variable. I'm going to call
this as updated note. I'm going to set that to
await and page that back. Now we need to check if
the updated node that is coming from the edit node
screen is not empty. For that, here, you can
say F updated note is not null and updated note is string. And if that's true, we're
going to set state, and we're going
to take the notes and the index inside that, and we're going to update
that with the updated note. Let's say that. And
just like that, we now can create
and update notes. Let's go and test it.
So when I get back. I'm going to just
restart the app. Change the dark mode, and we'll say, this
is a new note. I click on save,
and it comes here. Let's tap over here. I'm going
to call this as updated. Let's click on save, and you
can see, we get the updated. But what happens if
I add a long test? Let's test that. Let's
add a big Lamepsm. Let's get to our browser, and I'm just going to copy
this and get back to my code. And let's get inside this. I'm just going to
replace this with a big text and let's
click on Save. Now you can see
here that the text is overflowing in the title. We can fix that by adding a line limit to
the text widgets. For example, here you can see, we have the title that
is a text widget. And here, what we can do
is we can give a comma and we can say max lines
should be eight. And if I save that, you can see the overflowing
text is now gone. And now you can see things
look a little bit misaligned. Let's fix that. So
right after this, we can say title alignment. I'm going to say list
title alignment. And from here, I can set that
to top as click on Save. This will align the title and the Dilt button side
by side at the top. Now, the only thing
left for us to do is add the dilit functionality.
Let's do that. So here you can see we have the trailing function,
and inside this, we can say set state underscore notes that remove at the index
and save that. Just like that, now you can
delete that note. That's it. We now have built
a Notes app that can toggle between
light and dark theme, and this note can
create long text. For example, I can take this one and I can paste it inside here. Angle can't save,
we can edit them. So here we can say
updated, Angle can't save. And if not required, we
can also delete them.
9. Recap & Class Project: You made it to the
end of the class. You didn't just
follow the steps, you built a complete
Notes app from scratch. Theme switching, adding
notes, editing notes, deleting notes, you created the whole thing with
your own hands. Great work, staying consistent
through every lesson. Throughout this class, we set up the project from scratch. Added a provider
for them switching, built a home screen
with grit layout, added the add notes screen
with expanding text field. Saved notes to the home
screen dynamically, build the edit node screen, pass the data between screens, updated existing nodes,
added dilit functionality, polished UI with padding, spacing, and rounded tiles. These are essential
floater skills, and you have used them
all in a real project. Now it's your turn
to take this notes app and give it your
own creative touch. You already learned
everything you need. All you're doing now is tiling, customizing, and improving
the look and feel. Change the tile color
to something fresh. Experiment with rounded corners, more or less radius. Try different font sizes
or bold notes style. Add extra padding or
spacing in the grid. Adjust cross access spacing
and main axis spacing. Change the app bar
background or title style. Try a different fab
icon, size or shape. Test different seed color
in your color scheme. Give your notes
screens a custom feel. Make your notes look
like sticky notes. Cards, blocks, whatever
fits your style. Just small tweaks, but they
make the app le yours. Have fun experimenting,
make it colorful, minimal, cute, bold,
anything you want. Once you're done,
I want you to take a screenshot of your
customized home screen, screenshot of your
ad node screen, screenshot of your
edit node screen, screenshot in dark mode, and at least three
notes you created using your design and upload
it in the project section. Show me how you customize it, show me your creativity.
Don't worry. The design doesn't
have to be perfect. It just has to be yours. Thank you for joining this class and building
the Notes app with me. You now have a complete
working flor project, and more importantly, you understand the
foundation behind it. I hope you are proud of
what you have created. In our next class, we'll
build something new, something exciting,
and something that takes your flutter
skills even further. See you in the next class.
Flutter Sensei, Teaching Flutter from Scratch
