Flutter：アプリで入力した値で計算させた後、結果を画面上に出力させたい

プログラミング初心者です。
アプリ上で入力した値を足し算して、結果を表示したいのですが表示してくれません。

恥ずかしながら、どこに不備があるかわからないため、指摘いただけると幸いです。
よろしくお願いします。

Dart
1import 'package:flutter/material.dart';
2
3void main() {
4  runApp(const MyApp());
5}
6
7class MyApp extends StatelessWidget {
8  const MyApp({Key? key}) : super(key: key);
9
10  // This widget is the root of your application.
11  @override
12  Widget build(BuildContext context) {
13    return MaterialApp(
14      title: 'Flutter Demo',
15      theme: ThemeData(
16
17        primarySwatch: Colors.blue,
18      ),
19      home: const MyHomePage(title: 'Flutter Demo Home Page'),
20    );
21  }
22}
23
24class MyHomePage extends StatefulWidget {
25  const MyHomePage({Key? key, required this.title}) : super(key: key);
26
27
28  final String title;
29
30  @override
31  State<MyHomePage> createState() => _MyHomePageState();
32}
33
34class _MyHomePageState extends State<MyHomePage> {
35  int _counter = 0;
36
37  void _incrementCounter() {
38    setState(() {
39
40      _counter++;
41    });
42  }
43
44  var _ControllerA = TextEditingController();
45  var _ControllerB = TextEditingController();
46  var _ControllerC = TextEditingController();
47
48  int A = 0;
49  int B = 0;
50  int C = 0;
51
52  @override
53  void initState() {
54    super.initState();
55    setState(() {
56      _ControllerA = new TextEditingController();
57      _ControllerB = new TextEditingController();
58      _ControllerC = new TextEditingController();
59    });
60  }
61
62  @override
63  void dispose() {
64    super.dispose();
65    print("dispose");
66  }
67
68
69  @override
70  Widget build(BuildContext context) {
71
72    return Scaffold(
73      appBar: AppBar(
74
75        title: Text(widget.title),
76      ),
77      body: Center(
78
79        child: Column(
80
81            children: <Widget>[
82
83              Padding(
84              padding: EdgeInsets.all(10),
85                child: TextField(
86                  controller: _ControllerA,
87                  decoration: InputDecoration(
88                    border: OutlineInputBorder(),
89                    labelText: 'A',
90                  ),
91                ),
92              ),
93
94              Padding(
95                padding: EdgeInsets.all(10),
96                child: TextField(
97                  controller: _ControllerB,
98                  decoration: InputDecoration(
99                    border: OutlineInputBorder(),
100                    labelText: 'B',
101                  ),
102                ),
103              ),
104              Container(
105                padding: EdgeInsets.all(16.0),
106                child: RaisedButton(
107                  child: Text('計算'),
108                  onPressed: () {
109                  setState(() {
110                    C = A + B;
111                    print('$C');
112                  });
113                },
114              ),
115              ),
116              Text(
117                "A+B='$C'",
118                style: TextStyle(
119                  fontSize:30,
120                ),
121              ),
122            ],
123        ),
124      ),
125    );
126  }
127}
128

行動規範の内容に同意します

回答1件

以下でどうでしょうか。大事な変更点には // ★ をつけてあります。
動かない原因としては、TextFieldで入力した値を受け取るための処理が書かれていないため、いつまで立っても変数A,Bに値が代入されず、計算ボタンを押しても常にCには0が入ってしまうためです。

TextFieldで入力した値を変数に代入するためには、onChanged:を追加して、入力した値を受け取り、setStateでa,bの値に代入します。
onChangedで受け取る値はString型のため、int型に代入するためには、int.tryParseを使います。'10'のような値であればそのまま10が代入され、aaaのような値が入ってしまう場合には0が代入されるようにしてあります。
一部constキーワードを付けたり、変数名をA,B,Cからa,b,c,_textControllerAに変えています。

dart
1import 'package:flutter/material.dart';
2
3void main() {
4  runApp(const MyApp());
5}
6
7class MyApp extends StatelessWidget {
8  const MyApp({Key? key}) : super(key: key);
9
10  // This widget is the root of your application.
11  @override
12  Widget build(BuildContext context) {
13    return MaterialApp(
14      title: 'Flutter Demo',
15      theme: ThemeData(
16
17        primarySwatch: Colors.blue,
18      ),
19      home: const MyHomePage(title: 'Flutter Demo Home Page'),
20    );
21  }
22}
23
24class MyHomePage extends StatefulWidget {
25  const MyHomePage({Key? key, required this.title}) : super(key: key);
26
27
28  final String title;
29
30  @override
31  State<MyHomePage> createState() => _MyHomePageState();
32}
33
34class _MyHomePageState extends State<MyHomePage> {
35  final _textControllerA = TextEditingController();
36  final _textControllerB = TextEditingController();
37
38  int a = 0;
39  int b = 0;
40  int c = 0;
41
42  @override
43  void initState() {
44    super.initState();
45  }
46
47  @override
48  void dispose() {
49    super.dispose();
50  }
51
52
53  @override
54  Widget build(BuildContext context) {
55
56    return Scaffold(
57      appBar: AppBar(
58        title: Text(widget.title),
59      ),
60      body: Center(
61
62        child: Column(
63
64            children: <Widget>[
65
66              Padding(
67              padding: const EdgeInsets.all(10),
68                child: TextField(
69                  controller: _textControllerA,
70                  decoration: const InputDecoration(
71                    border: OutlineInputBorder(),
72                    labelText: 'A',
73                  ),
74                  onChanged: (text) { // ★
75                    setState(() {
76                      a = int.tryParse(text) ?? 0;
77                    });
78                  },
79                ),
80              ),
81
82              Padding(
83                padding: const EdgeInsets.all(10),
84                child: TextField(
85                  controller: _textControllerB,
86                  decoration: const InputDecoration(
87                    border: OutlineInputBorder(),
88                    labelText: 'B',
89                  ),
90                  onChanged: (text) { // ★
91                    setState(() {
92                      b = int.tryParse(text) ?? 0;
93                    });
94                  },
95                ),
96              ),
97              Container(
98                padding: const EdgeInsets.all(16.0),
99                child: ElevatedButton(
100                  child: const Text('計算'),
101                  onPressed: () {
102                  setState(() {
103                    c = a + b;
104                    print('$c');
105                  });
106                },
107              ),
108              ),
109              Text(
110                "A + B = $c",
111                style: const TextStyle(
112                  fontSize:30,
113                ),
114              ),
115            ],
116        ),
117      ),
118    );
119  }
120}