DEV Community

Cover image for StatelessWidget and StatefulWidget in Flutter.
Codeitout
Codeitout

Posted on

StatelessWidget and StatefulWidget in Flutter.

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

Top comments (2)

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
 
codeitout_ profile image
Codeitout

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