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!");
       }
}

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),
         ),

       ],
     ),
   );
  }
}

Blog

StatelessWidget and StatefulWidget in Flutter.

Codeitout

Join Our Newsletter. No Spam, Only the good stuff.

Related