Request for a simple "counter" example in Tutorial

[sethladd]

Working through the tutorial, I felt myself really wanting to see the most basic example of some UI changing its state. Perhaps a "counter" with a button, which when pressed, updates the count of some text.

IMHO, the Shopping Cart is a bit too complex as an example to show why we need StatefulComponents.

I'd be happy to help write this section if someone wants to contribute the canonical, simple "counter".

Thanks!

[abarth]

As simple counter might look something like the following (warning: I haven't tried running this example):

class Counter extends StatefulComponent {
  Counter({ Key key }) : super(key: key);
  _CounterState createState() => new _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  void _increment() {
    setState(() { ++_count; });
  }

  Widget build(BuildContext context) {
    return new Row([
      new RaisedButton(
        onPressed: _increment,
        child: new Text('Increment')
      ),
      new Text('Count: $_count')
    ]);
  }
}

[sethladd]

Thanks!

here's another one from @HansMuller

import 'package:flutter/material.dart';

class StatefulDemo extends StatefulComponent {
  StatefulDemoState createState() => new StatefulDemoState();
}

class StatefulDemoState extends State<StatefulDemo> {
  int _counter = 0;

  Widget build(BuildContext context) {
    return new Center(
      child: new RaisedButton(
        child: new Text("Click $_counter"),
        onPressed: () {
          setState(() { _counter += 1; });
        }
      )
    );
  }
}

void main() {
  runApp(new StatefulDemo());
}

For the sake of the tutorial, at this step in the learning process, I'd like to avoid a mention of key. Are we OK with Counter not having that constructor?

[krisgiesing]

I would slightly prefer an example where the object that builds the display of the counter is different from the object that triggers the counter increment. It's not very much more code and it would illustrate separation of concern a little better than having it all be in one place. What do you think?

[abarth]

Are we OK with Counter not having that constructor?

That's fine with me.

[sethladd]

@krisgiesing : great idea. Your example would be a natural "step two", after we show this simple Counter. Did you want to code up a "refactor" of the Counter? It tells a nice story.

[krisgiesing]

Sure.

On Fri, Oct 30, 2015 at 11:16 AM, Seth Ladd notifications@github.com
wrote:

@krisgiesing https://github.com/krisgiesing : great idea. Your example
would be a natural "step two", after we show this simple Counter. Did you
want to code up a "refactor" of the Counter? It tells a nice story.

—
Reply to this email directly or view it on GitHub
https://github.com/flutter/flutter.github.io/issues/35#issuecomment-152607032
.

[sethladd]

Thanks @krisgiesing !