Hi, welcome To My channel and in this video we are going to learn what is the difference
between stateless and stateful widget so the name of these periods are indicating that
stateless widget is something that is not attached to a state and stateful widget is something
that is attached to a state so what does that mean let's understand it in detail so let
me tell you the difference between stateless and stateful widget inside presentation and
after that we are going to take an example inside the code as well let's talk about statelesswidget
first and after that we are going to talk about the statefulwidget stateful widget is
something that never changes it is basically you can say is static thing and it is not
need to be redrawn so for example if you have something to be shown on the In the screen
and you just know don't want to change it over time to time then you can use this Atlas
visit stateless widget is a subclass of stateless period class and it overrides one method that
is the bill method by the way we're going to take a deeper look into this when we will
move to the coding part select look at some of the examples of the stateless widget for
example if you want to just show and Icon then that can be a stateless widget and
icon button is an example of a stateless widget then text is also an example of stateless
widget there are many stateless widgets available in inside the flutter SDK but these are some
of the examples we can create our on stateless widget as well and that will be coming into
this video later so now you might be thinking when to use statelesswidget so let's look
at this example into the slide we can use statelesswidget where we don't need to redraw
the UI on user interaction or when an action or event occurs now let's talk about the statefulwidget
so stateful widget is something that is dynamic stateful widget can change at any time and
can be redrawn so we usually use the setstate method inside the stateful visits and that
will redraw the UI and it is the subclass of statefulwidget status with a subclass of
stateless widget class but stateful widget is a subclass of statefulwidget class and
we need to overwrite the create state method in order to provide the State class so that
we can handle the state of a state with a stateful widget now let's look at some of
the examples of the stateful widget so first of all we have the checkbox if you know the
check box can be checked or unchecked so that is the best example of a stateful widget because
it has two States one is the checked and other is the unchecked and numbers to we have the
radio button can also be the best example of the stateful widget because
it has two states and other than that the text field because we want to maintain the
text input inside the text field and other things as well then text field is also an
example of the stateful widget and there are many more default stateful widget that are available
for use so from these examples and the points above you must be able to understand that
stateful widgets are used when we need to keep track of the state so for example if a checkbox
is checked or not so this is the simple example but don't worry if you don't understand this
right now later in this video you will be able to understand it further Let's get into
the coding part and implements and stateless and stateful widget so after the simple presentation
I have a very simple question for you so I have simple screen where I need to make a
login screen and clicking on this button will will take user to another screen and can you
tell me if the screen should be stateless widget or stateful widget assuming that the
picture and all the resources are available inside the project so let me know about the
answer inside the comments section so let's go inside the Visual Studio code and create
the stateful and stateless widget right now I am inside the Visual Studio code and I have
this project open for me the email login signup example and I will click here and I will go
to the leaf folder and I will create a new file here so I will right click here and choose
new file I can name state less widget example just for example purpose and put the extension dot dart
create a new file so let me create this stateless widget for you and explain the coding components
that are involved inside the statelesswidget so I have created a stateless widget for you
first of all in at the line number one you can see that I have imported the material dot
dart file and in at line number 3 I have inserted the class keyword and after that, I have named
my class a stateless example and after that, I have inserted the extends keyword and after
that extends keyword I have this stateless widget so as I said in the theoretical part that
each stateless widget extend the stateless widget class and after that I have overridden
the build method and build method is taking one argument that is the context and it is
returning Everett so here I am returning a an Empty container this is the most simplest
example of the stateless widget let's take a look at how the stateful will it go looks
like so I will create a new file again I will click I will rightly care new file and after
that I will write the name as a stateful widget example dot dart I have inserted a new file
here and after that I will insert the stateful widget code here this is how the example code
of state for weight looks like at the line number one I have imported material dot dart file
that is coming from flutter and other than that at lineup was created a new class that
is stateful widget example and it is extending the statefulwidget so as at each state will
it need to extend the stateful widget it class and after that we need to override the create
state method and it must return the State class and that class is created below as you
can see and this is extending the State class and that state is taking stateful widget example
that is the original stateful widget and it is overriding the build method don't worry
it looks like very complex in the start but later on when once we do the examples this
will be very simple by the way you don't have to write the whole code you can use the something
called shortcuts inside the Visual Studio code and also inside the Android studio so
let me delete this code and try to insert it again so I will select it and press the
delete button now my file is empty and to insert a straightforward but I will do is
that I will write St full and one Sarai testi full you will see the suggestions in the beginning
so this is something called template once I will click on it it will insert the stateful
widget code for me so as you can see it it is automatically inserted now I just need
to name my class and this will create a stateful widget for me so I can eat anything like state
full visit example and you can see that it is automatically inserted the class name everywhere
where it was required and after that I need to make sure that I import the material package
as well so I can write material and that's it you can see that the whole stateful widget
code is inserted now we can do the same for the state statelesswidget first let me is
left the whole code and pressure delete button and after that I can write St less here and
Visual Studio code is suggesting this option for flutter stateless period I will click
this option and this will automatically insert the required for code for me now I can name
it something like my stateless widget or anything you want and after that I can import the material
class 2 this will resolve all the error so I think I have tried my best to explain the
stateless and stateful widget to you if this video help you then make sure to hit the like
button and also share with us with your friend and also make sure to answer my question in
the comments below in the next video we will be starting with the login screen and see
how we can use stateless and stateful widget to create a complete login screen in the next
video