DEV Community

Cover image for StatelessWidget and StatefulWidget in Flutter.

StatelessWidget and StatefulWidget in Flutter.

cosmogir1 profile image Namita Shetty ・1 min read

A Flutter Widget extends the standard classes. The class extended determines the type of widget we are dealing with.
There are 2 classes which you will be extending 99% of the times. They are


The Widgets which extend StatelessWidget never change.
For eg: Text Widget(which displays text),Icon Widget(which shows the icons),their state never changes. They are also called as stateless Widgets because they don't have any state.
Example of such class:

class Codeitout extends StatelessWidget {
       Widget build(BuildContext context) {
            return new Text("Codeitout!");
Enter fullscreen mode Exit fullscreen mode


The Widgets which extend StatefulWidget change their state(some changes occur) whenever a user interacts with it.
For eg: TextField widget,CheckBox,etc.
When we extend StatefulWidget,we actually need to create 2 classes:
a)the stateful widget class
b)a state class

Example of it is:

class NavBar extends StatefulWidget {
  _NavBarState createState() => _NavBarState();

class _NavBarState extends State<NavBar> {
  int _index=0;
  final List<Widget> _page=[
  void onTabTapped(int index) {
   setState(() {
     _index = index;

  Widget build(BuildContext context) {
   return Scaffold(
     body: Center(
        child: _page.elementAt(_index),
      ), // new
     bottomNavigationBar: BottomNavigationBar(
       elevation: 20,
       onTap: onTabTapped, // new
       currentIndex: _index, // new
       items: [
         new BottomNavigationBarItem(
           icon: Icon(Icons.home),
         new BottomNavigationBarItem(
           icon: Icon(Icons.mail),

Enter fullscreen mode Exit fullscreen mode


Editor guide
sumit profile image
Sumit Singh many confussion are pretty much clear.
Just a little suggestion, when you are giving examples of code snippets..just write down the name of the language you are using just after the the tripple backticks (`). It will make code looks much better.

cosmogir1 profile image
Namita Shetty Author

thank you:)
Sure ,I will take care of that from next time.