Flutter　変数にセットした値がすぐに反映されない。

【開発環境】
Flutter: 1.12.13+hotfix.7
AndroidStudio: 3.5.3

【質問内容】
データベースを使って時間割を登録＆閲覧するアプリを作ろうとしています。

時間割のテーブルをタップし、あらかじめ登録しておいた授業一覧から選んで時間割を登録する仕様なのですが、時間割を登録しても表示されなくて困っています。
別のテーブルをタップしてみたり、ページを切り替えて戻ってみたりすると表示されます。

時間割を登録した直後に表示されるようにするにはどのような方法が考えられるでしょうか？

文章だけで説明するのが難しいため、動画を用意しました。
https://drive.google.com/open?id=1ZRMMavI2cBwqHDu6FD3GrBAmaXp0-9DI

【ソースコード】

Dart
1class _TimeTableViewState extends State<TimeTableView> {
2
3  final List<String> _days = [
4    '月', '火', '水', '木', '金',
5  ];
6
7  List<Widget> _registedClasses = [];
8  List<String> tableSetClassNames = [];
9  List<String> tableSetTeacherNames = [];
10
11  @override
12  void initState() {
13    super.initState();
14    for (var i = 0; i < 25; i++) {
15      tableSetClassNames.add('');
16      tableSetTeacherNames.add('');
17    }
18  }
19
20  @override
21  Widget build(BuildContext context) {
22    return Scaffold(
23
24      appBar: AppBar(
25        title: Text('時間割アプリ'),
26      ),
27
28      body: Container(
29        alignment: Alignment.center,
30        decoration: BoxDecoration(
31          border: Border.all(color: Colors.black),
32        ),
33        margin: EdgeInsets.all(20.0),
34        child: Column(
35          mainAxisAlignment: MainAxisAlignment.start,
36          crossAxisAlignment: CrossAxisAlignment.start,
37          children: <Widget>[
38            Container(
39              constraints: BoxConstraints(maxWidth: 29.0 + 57.8 * 5),
40              color: Colors.black12,
41              padding: EdgeInsets.only(left: 29.0),
42              child: GridView.count(
43                crossAxisCount: 5,
44                shrinkWrap: true,
45                childAspectRatio: 60 / 36,
46                children: daySet(),
47              ),
48            ),
49            Expanded(
50              child: Row(
51                mainAxisAlignment: MainAxisAlignment.start,
52                crossAxisAlignment: CrossAxisAlignment.start,
53                children: <Widget>[
54                  Container(
55                    constraints: BoxConstraints.expand(width: 29.0),
56                    child: GridView.count(
57                      crossAxisCount: 1,
58                      shrinkWrap: true,
59                      childAspectRatio: 30.0 / 99.2,
60                      children: periodSet(),
61                    ),
62                  ),
63                  Container(
64                    constraints: BoxConstraints.expand(width: 57.8 * 5),
65                    child: GridView.count(
66                      crossAxisCount: 5,
67                      shrinkWrap: true,
68                      childAspectRatio: 60 / 99.6,
69                      children: classSet(context),
70                    ),
71                  ),
72                ],
73              ),
74            ),
75          ],
76        ),
77      ),
78
79      bottomNavigationBar: BottomNavigationBar(
80        currentIndex: 0,
81        items: <BottomNavigationBarItem>[
82          BottomNavigationBarItem(
83              title: Text('My時間割'),
84              icon: Icon(Icons.calendar_today)
85          ),
86          BottomNavigationBarItem(
87              title: Text('授業を登録'),
88              icon: Icon(Icons.add)
89          ),
90          BottomNavigationBarItem(
91              title: Text('登録した授業を確認'),
92              icon: Icon(Icons.list)
93          ),
94        ],
95        onTap: (int value) => tapBottomIcon(value, context),
96      ),
97    );
98  }
99
100  List<Widget> daySet() {
101    List<Widget> days = [];
102
103    for (var i = 0; i < 5; i++) {
104      days.add(
105        Container(
106          child: Center(
107            child: Text(
108              _days[i] + '曜日',
109              style: TextStyle(
110                fontSize: 18.0,
111                fontWeight: FontWeight.w200,
112                fontFamily: "Roboto",
113              ),
114            ),
115          ),
116          decoration: BoxDecoration(
117            border: Border(
118                left: BorderSide(color: Color.fromARGB(100, 0, 0, 0)),
119            ),
120          ),
121        ),
122      );
123    }
124
125    return days;
126  }
127
128  List<Widget> classSet(BuildContext context) {
129    List<Widget> classes = [];
130
131    for (var i = 0; i < 5 * 5; i++) {
132      classes.add(
133        Container(
134          child: FlatButton(
135            padding: EdgeInsets.all(0.0),
136            onPressed: () => tapTable(context, i),
137            child: Center(
138              child: Column(
139                mainAxisAlignment: MainAxisAlignment.center,
140                crossAxisAlignment: CrossAxisAlignment.center,
141                children: <Widget>[
142                  Text(
143                    tableSetClassNames[i],
144                    style: TextStyle(
145                      fontSize: 12.0,
146                      fontWeight: FontWeight.w400,
147                      fontFamily: "Roboto",
148                    ),
149                  ),
150                  Text(
151                    tableSetTeacherNames[i],
152                    style: TextStyle(
153                      fontSize: 9.0,
154                      fontWeight: FontWeight.w400,
155                      fontFamily: "Roboto",
156                    ),
157                  ),
158                ],
159              ),
160            ),
161          ),
162          decoration: BoxDecoration(
163            border: Border(
164              top: BorderSide(color: Color.fromARGB(100, 0, 0, 0)),
165              left: BorderSide(color: Color.fromARGB(100, 0, 0, 0)),
166            ),
167          ),
168        ),
169      );
170    }
171
172    return classes;
173  }
174
175  List<Widget> periodSet() {
176    List<Widget> periods = [];
177
178    for (var i = 0; i < 5; i++) {
179      var j = i + 1;
180      periods.add(
181        Container(
182          padding: EdgeInsets.only(left: 5.0),
183          child: Center(
184            child: Text(
185              "$j限",
186              style: TextStyle(
187                fontSize: 20.0,
188                fontWeight: FontWeight.w200,
189                fontFamily: "Roboto",
190              ),
191            ),
192          ),
193          decoration: BoxDecoration(
194            border: Border(
195              top: BorderSide(color: Color.fromARGB(100, 0, 0, 0)),
196            ),
197            color: Colors.black12,
198          ),
199        ),
200      );
201    }
202
203    return periods;
204  }
205
206  void tapBottomIcon(int value, BuildContext context) {
207    if (value == 1) {
208      Navigator.pushNamed(context, '/regist');
209    }
210    else if(value == 2) {
211      Navigator.pushNamed(context, '/confirm');
212    }
213  }
214
215  void tapTable(BuildContext context, int i) {
216    showRegistedClasses(context);
217    showDialog(
218      context: context,
219      builder: (BuildContext context) => SimpleDialog(
220        title: Text('授業を選んでください。'),
221        children: _registedClasses,
222      ),
223    ).then<void>((item) {
224      setTable(item, i, context);
225      showDialog(
226        context: context,
227        builder: (BuildContext context) => AlertDialog(
228          title: Text('【登録完了】'),
229          content: Text(item['className'] + '（' + item['teacherName'] + '）' + 'を登録しました。'),
230          actions: <Widget>[
231            FlatButton(
232              child: Text('閉じる'),
233              onPressed: () => Navigator.pop(context),
234            ),
235          ],
236        ),
237      );
238    });
239  }
240
241  void showRegistedClasses(BuildContext context) async {
242    List<Widget> list = <Widget>[];
243    String dbPath = await getDatabasesPath();
244    String path = join(dbPath, "timetable_for_students.db");
245
246    Database database = await openDatabase(path, version: 1,onCreate: (Database db, int version) async {
247      await db.execute(
248          'CREATE TABLE IF NOT EXISTS classData (id INTEGER PRIMARY KEY, className TEXT, teacherName TEXT)'
249      );
250    });
251
252    List<Map> result = await database.rawQuery('SELECT * FROM classData');
253
254    for (Map item in result) {
255      list.add(
256        SimpleDialogOption(
257          onPressed: () => Navigator.pop<Map>(context, item),
258          child: Row(
259            children: <Widget>[
260              Text(
261                item['className'],
262                style: TextStyle(
263                  fontSize: 20.0,
264                ),
265              ),
266              Text(
267                '（' + item['teacherName'] + '）',
268                style: TextStyle(
269                  fontSize: 16.0,
270                ),
271              ),
272            ],
273          ),
274        ),
275      );
276    }
277
278    setState(() {
279      _registedClasses = list;
280    });
281  }
282
283  void setTable(Map item, int i, BuildContext context) {
284    tableSetClassNames[i] = item['className'];
285    tableSetTeacherNames[i] = item['teacherName'];
286  }
287}

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

回答1件

ベストアンサー

時間割にクラスを登録した際に、状態が変わったことを通知する必要があると思います。以下のようにsetTableでtableSetClassNamesを変更している処理をsetStateで囲ったらどうでしょうか。

  void setTable(Map item, int i, BuildContext context) {
    setState(() {
      tableSetClassNames[i] = item['className'];
      tableSetTeacherNames[i] = item['teacherName'];
    });
  }

現状だと、授業一覧を表示する時のみsetState()が実行されるので、その時に再描画されているようにみえました。

投稿2020/02/13 21:55