title: Flutter - Generate in app interactivity
body: <p>I'm kind of lost in generating interactivity on Flutter.</p>
  
  <p>I'm trying to make tapping the FlatButtons the value shown above, and in the order it was tapped.</p>
  
  <p>For example, tap number 1, then 2, 1, 1, 1 and last 2 should appear <code>$ 12111</code>, remembering quite a list.</p>
  
  <p>Taping on the backspace icon removes the last number that has entered the list.</p>
  
  <p>I am not aware of generating this communication between classes.</p>
  
  <p>Can you help me?  I'm trying to use the StatefulWidget but I'm not succeeding.</p>
  
  <p>Below I left the code that generates the screen described above.</p>
  
  <p><strong>main.dart</strong></p>
  
  <pre><code>import "package:flutter/material.dart";
  
  void main() {
    runApp(new KeyboardApp());
  }
  
  class KeyboardApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return new MaterialApp(
        home: new HomePage(),
      );
    }
  }
  
  class HomePage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return new Scaffold(
        body: new ListView  (
          children: &lt;Widget&gt;[
            new Number(),
            new Keyboard(),
          ],
        ),
      );
    }  
  }
  
  class NumberState extends StatefulWidget {
    NumberList createState() =&gt; new NumberList();
  }
  
  class NumberList extends State&lt;NumberState&gt; {
    List&lt;String&gt; numbers = &lt;String&gt;[];
    String number;
  
    @override
    Widget build(BuildContext context) {
      number = this.numbers.join('');
      return new Text(
        this.number,
        style: new TextStyle(
          fontFamily: 'Roboto',
          color: new Color(0xFFFFFFFF),
          fontSize: 45.0
        )
      ); 
    }
  }
  
  class Number extends StatelessWidget {
    final Color color = new Color(0xFFE57373);
  
    @override
    Widget build(BuildContext context) {
      return new Container(
        height: 145.0,
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: &lt;Widget&gt;[
            new Container(
              padding: new EdgeInsets.only(right: 16.0, top: 35.0),
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: &lt;Widget&gt;[
                  new Text(
                    '\$  ',
                    style: new TextStyle(
                      fontFamily: 'Roboto',
                      color: new Color(0xFFFFFFFF),
                      fontSize: 20.0
                    )
                  ),
                  new NumberState(),
                ],
              )
            )
          ],
        ),
        color: color,
      );
    }
  }
  
  class Keyboard extends StatelessWidget {
    final Color color = new Color(0xFFE57373);
  
    var list = new NumberList().numbers;
    @override
    Widget build(BuildContext context) {
      return new Container(
        padding: new EdgeInsets.only(right: 15.0, left: 15.0, top: 47.0, bottom: 20.0),
        child: new Column(
          children: &lt;Widget&gt;[
            new Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: &lt;Widget&gt;[
                new FlatButton(
                  textColor: color,
                  child: new Text(
                    '1',
                    style: new TextStyle(
                      fontSize: 35.0
                    ),
                  ),
                  onPressed: () {
                    this.list.add('1');
                  },
                ),
                new FlatButton(
                  textColor: color,
                  child: new Text(
                    '2',
                    style: new TextStyle(
                      fontSize: 35.0
                    ),
                  ),
                  onPressed: () {
                    this.list.add('2');
                  },
                ),
                new FlatButton(
                  textColor: color,
                  child: new Icon(
                    Icons.backspace,
                    size: 35.0
                  ),
                  onPressed: () {
                    this.list.removeLast();
                  },
                ),
              ],
            ),
          ],
        ),
      );
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/kSrBD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kSrBD.png" alt="enter image description here"></a></p>