DEV Community

loading...
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

1)StatelessWidget

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

2)StatefulWidget

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 {
  @override
  _NavBarState createState() => _NavBarState();
}

class _NavBarState extends State<NavBar> {
  int _index=0;
  final List<Widget> _page=[
    Dummy(Colors.yellow,0),
    Dummy(Colors.pink,1),
  ];
  void onTabTapped(int index) {
   setState(() {
     _index = index;
   });
 }

  @override
  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

Discussion

pic
Editor guide
Collapse
sumit profile image
Sumit Singh

Thanks..my 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.

Collapse
cosmogir1 profile image
Namita Shetty Author

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