Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

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 modeExit 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 modeExit fullscreen mode

Top comments(2)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
sumit profile image
Sumit Singh
A code is like love ❤, it is created with clear intentions at the beginning 😍, but it can get complicated 😵

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.

CollapseExpand
 
codeitout_ profile image
Codeitout
I am a Tech enthusiast, artist and love experimenting with codes. Always eager to learn more.
  • Location
    India
  • Work
    Software Engineer
  • Joined

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

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

I am a Tech enthusiast, artist and love experimenting with codes. Always eager to learn more.
  • Location
    India
  • Work
    Software Engineer
  • Joined

More fromCodeitout

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp