DEV Community

Cover image for StatelessWidget and StatefulWidget in Flutter.
Codeitout
Codeitout

Posted on

8 5

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

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

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.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS Security LIVE!

Hosted by security experts, AWS Security LIVE! showcases AWS Partners tackling real-world security challenges. Join live and get your security questions answered.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❀️