State Maintenance Widgets

In Flutter, all widgets are either derived from StatelessWidget or StatefulWidget.
Widget derived from StatelessWidget does not have any state information but it is
maintained in the widget derived from StatefulWidget.
The dynamic nature of the application contains state changes during interaction
which is achieved with the help of Statefulwidget.
For example, tapping a counter button will increase / decrease the internal state of the counter by
one and reactive nature of the Flutter widget will auto re-render the widget using new state
information.
 Stateless Widget

The Stateless Widget does not have any state information.

It remains static throughout its lifecycle.
The examples of the StatelessWidget are Text, Row, Column, Container, etc.
class MyStatelessCarWidget extends StatelessWidget {
const MyStatelessCarWidget ({ Key key }) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(color: const Color(0x0xFEEFE));
}
}
 State Management

A Statefulwidget has state information in Flutter.

A state is information that can be read when the widget is built and might change or
modified over a lifetime of the app.
In Flutter application is composed of widgets, the state management is also done by
widgets.
Widget can be inherited from Statefulwidget to maintain its state and its children
state.
 State Management – Example 1

 Managing state in an application is one of the most important and necessary

process in the life cycle of an application.
Let us consider a simple shopping cart application.
User will login using their credentials into the application. Once user is logged in,
the application should persist the logged in user detail in all the screen. Again,
when the user selects a product and saved into a cart, the cart information should
persist between the pages until the user checked out the cart. User and their cart

information at any instance is called the state of the application at that instance.
 State Management – Example 2

 Suppose you have created a list of customers or products in your app. Now,
assume you have added a new customer or product dynamically in that list. Then,
there is a need to refresh the list to view the newly added item into the record.
Thus, whenever you add a new item, you need to refresh the list. This type of
programming requires state management to handle such a situation to improve
performance. It is because every time you make a change or update the same, the
state gets refreshed.
 Categories of State Management

In Flutter, state management can be divided into two categories based on the
duration the particular state lasts in an application.
1. Ephemeral - Last for a few seconds like the current state of an animation or a
single page like current rating of a product. Flutter supports its through
StatefulWidget.
2. app state - Last for entire application like logged in user details, cart
information, etc., Flutter supports its through scoped_model
 State Management ( Ephemeral )
This state is also known as UI State or local state.
It is a type of state which is related to the specific widget, or you can say that it is a
state that contains in a single widget.
If you want to change the state of any widget, you need to update the state object.
setState() function in Stateful widgets updates the state object. It allows us to set the
properties of the state object that triggers a redraw of the UI.
The state change will be done through gestures. For example, the rating of a product
can be changed by tapping a star in the rating widget.
 Structure Of Stateful Widget

It contains mainly two classes: the state object and the widget.
Statefulwidget provides an option for a widget to create a state, State<T> (where T
is the inherited widget) when the widget is created for the first time through
createState method and then a method, setState to change the state whenever
needed.
This widget does not have a build() method. It has createState() method, which
returns a class that extends the Flutters State Class.
The examples of the StatefulWidget are Checkbox, Radio, Form etc.
 Stateful Widget –Code Structure
Let us create a widget, CustomerData with state maintenance.
 Create the widget, CustomerData by inheriting StatefulWidget
class CustomerData extends StatefulWidget {
}
 Create a state for CustomerData, _CustomerDataState by inheriting State<T>
class _CustomerDataState extends State< CustomerData > {
}
 Override the createState of StatefulWidget method to create the state, _CustomerDataState
class CustomerData extends StatefulWidget {
@override
_CustomerDataState createState() => _CustomerDataState ();
}
Create the user interface of the CustomerData widget in build method of _CustomerData
 Example
class MyHomepage extends StatefulWidget {  
  @override  
  MyHomepageState createState() => MyHomepageState();  
}  
class MyHomepageState extends State<MyHomepage> {  
  String _name = "Peter";    
  @override  
  Widget build(BuildContext context) {  
    return RaisedButton(  
        child: Text(_name),  
        onPressed: () {  
           setState(() {  
              _name = _name == "Peter" ? "John" : "Peter";  
           });  
         }, );  
  }  }