Flutter - Generate in app interactivity - dart

Question

I'm kind of lost in generating interactivity on Flutter.
I'm trying to make tapping the FlatButtons the value shown above, and in the order it was tapped.
For example, tap number 1, then 2, 1, 1, 1 and last 2 should appear $ 12111, remembering quite a list.
Taping on the backspace icon removes the last number that has entered the list.
I am not aware of generating this communication between classes.
Can you help me? I'm trying to use the StatefulWidget but I'm not succeeding.
Below I left the code that generates the screen described above.
main.dart
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: <Widget>[
new Number(),
new Keyboard(),
],
),
);
}
}
class NumberState extends StatefulWidget {
NumberList createState() => new NumberList();
}
class NumberList extends State<NumberState> {
List<String> numbers = <String>[];
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: <Widget>[
new Container(
padding: new EdgeInsets.only(right: 16.0, top: 35.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
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: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
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();
},
),
],
),
],
),
);
}
}

Answer 1

Check out the Flutter interactivity tutorial. At a high level (heh), your problem is that you are trying to store state in the leaves of your widget tree. You should store your state higher up in your tree and then pass it down to the children.
The example below uses ValueNotifier but you can also pass state around using streams, callbacks, or even Firebase Database.
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 StatefulWidget {
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> {
ValueNotifier<List<int>> numbers = new ValueNotifier<List<int>>(<int>[]);
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new ListView (
children: <Widget>[
new NumberDisplay(numbers: numbers),
new Keyboard(numbers: numbers),
],
),
);
}
}
class NumberDisplay extends AnimatedWidget {
NumberDisplay({ this.numbers }) : super(listenable: numbers);
final ValueNotifier<List<int>> numbers;
final Color _color = new Color(0xFFE57373);
#override
Widget build(BuildContext context) {
return new Container(
height: 145.0,
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Container(
padding: new EdgeInsets.only(right: 16.0, top: 35.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new Text(
'\$ ',
style: new TextStyle(
fontFamily: 'Roboto',
color: new Color(0xFFFFFFFF),
fontSize: 20.0
)
),
new Text(
this.numbers.value.join(''),
style: new TextStyle(
fontFamily: 'Roboto',
color: new Color(0xFFFFFFFF),
fontSize: 45.0
),
),
],
),
),
],
),
color: _color,
);
}
}
class Keyboard extends StatelessWidget {
Keyboard({ this.numbers });
final ValueNotifier<List<int>> numbers;
final Color _color = new Color(0xFFE57373);
#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: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new FlatButton(
textColor: _color,
child: new Text(
'1',
style: new TextStyle(
fontSize: 35.0
),
),
onPressed: () {
numbers.value = new List.from(numbers.value)..add(1);
},
),
new FlatButton(
textColor: _color,
child: new Text(
'2',
style: new TextStyle(
fontSize: 35.0
),
),
onPressed: () {
numbers.value = new List.from(numbers.value)..add(2);
},
),
new FlatButton(
textColor: _color,
child: new Icon(
Icons.backspace,
size: 35.0
),
onPressed: () {
numbers.value = new List.from(numbers.value)..removeLast();
},
),
],
),
],
),
);
}
}