Maksim Ryzhikov
1 min readJan 10, 2019

--

It’s still a stateless function. It’s impure and produces a side effect but without an internal state )

P.S.

To make it clear you can separate presentation and update. For example, let's move text with a counter to separate widget:

class CounterText extends StatelessWidget {
@override
Widget build(BuildContext context) {
var _counter = Provider.of(context).value;
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text('You have pushed the button this many times:'),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
);
}
}

In this case, MyHomePage will look like

class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new Center(
child: CounterText(),
),
floatingActionButton: new FloatingActionButton(
onPressed: () => _incrementCounter(context),
tooltip: 'Increment',
child: new Icon(Icons.add),
),
);
}

_incrementCounter(context) {
var appState = Provider.of(context);
appState.value += 1;
}
}

and let’s rewrite _incrementCounter as

_incrementCounter(context) {
Provider.of(context).value += 1;
}

so we have separated presentation and update but we can go future and imagine that +=1 is just a funny way to write message “INCREMENT”

_incrementCounter(context) {
Provider.of(context).value INCREMENT;
}

Now it looks more familiar to redux dispatch message :)

So I believe now it’s a little bit clear that we have state neither in MyHomePage, not CounterText widgets.

--

--

Responses (1)