Stateless Widget vs Stateful Widget | Flutter

Stateless Widget vs StateFul Widget

child: RaisedButton(
// (){} - anonymous function
onPressed: () {},
child: Text('Add Product'),
)

if we click it, it si not doing anything because our function here is empty. this button should actually add new dummy product for now, which we then render below the button. by adding more and more card (card is a widget) here. how do we add more cards here?




Card(
  child: Column(children: <Widget>[
Image.asset('assets/food.jpg'),
Container(
margin: EdgeInsets.all(10.0), child: Text('Food Paradise')),
  ]),
)

how to do we actually create a new card upon a button press?

Stateless Widget:

onPressed: () {} this function, we want to change some data which actually dynamically turned into a list of such card widgets. what you typically would do is you manage a normal list of data which you might also fetch from a server. this can't be done stateless widget that is a very simple widget that does one important thing. it's able to accept extra data. It can't work with internal data, It can't change such internal data therefore and it will not recall building if some data change d because It doesn't work with internal data. that is a wrong widget for our purpose. We need a stateful Widget.


Stateful Widget:

Stateful can simply be translated as data. you're working with data which you store in the widget and widget you also plan on changing. this is a state.

We need to implement a concrete implementation of the stateful widget. A stateful widget is indeed constructed differently from a stateless widget.


---------------------------------

// StatefulWidget (1st class)
class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState

    // It returns State Object
    return _MyAppState();
  }
}

<StatefulWidget> - This is called a generic type. it allows us to pass extra information to another type and here it tells us that the state object and the state class, by the way, is coming to form the flutter material package, this state object will belong to this StatefulWidget in the end. because the way you work with the state in flutter is that you actually create two classes which will work together.


// State Class (2nd class)

class _MyAppState extends State<MyApp> {

  // State class actually has a build method. this file builds, below here. _MyAppState keeps the build method and MyApp need to return _MyAppState now.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('EasyList'),
        ),
        body: Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.all(10.0),
              // 10.0 is refres 10.0px
              child: RaisedButton(
                // (){} - anonymous function
                onPressed: () {},
                child: Text('Add Product'),
              ),
            ),
            // Container widget takes a child
            Card(
              child: Column(children: <Widget>[
                Image.asset('assets/food.jpg'),
                Container(
                    margin: EdgeInsets.all(10.0), child: Text('Food Paradise')),
              ]),
            ),
          ],
        ),
      ),
    );

} // State Class