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

Question

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

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

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

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

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

【ソースコード】

class _TimeTableViewState extends State<TimeTableView> {

  final List<String> _days = [
    '月', '火', '水', '木', '金',
  ];

  List<Widget> _registedClasses = [];
  List<String> tableSetClassNames = [];
  List<String> tableSetTeacherNames = [];

  @override
  void initState() {
    super.initState();
    for (var i = 0; i < 25; i++) {
      tableSetClassNames.add('');
      tableSetTeacherNames.add('');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(

      appBar: AppBar(
        title: Text('時間割アプリ'),
      ),

      body: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.black),
        ),
        margin: EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              constraints: BoxConstraints(maxWidth: 29.0 + 57.8 * 5),
              color: Colors.black12,
              padding: EdgeInsets.only(left: 29.0),
              child: GridView.count(
                crossAxisCount: 5,
                shrinkWrap: true,
                childAspectRatio: 60 / 36,
                children: daySet(),
              ),
            ),
            Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    constraints: BoxConstraints.expand(width: 29.0),
                    child: GridView.count(
                      crossAxisCount: 1,
                      shrinkWrap: true,
                      childAspectRatio: 30.0 / 99.2,
                      children: periodSet(),
                    ),
                  ),
                  Container(
                    constraints: BoxConstraints.expand(width: 57.8 * 5),
                    child: GridView.count(
                      crossAxisCount: 5,
                      shrinkWrap: true,
                      childAspectRatio: 60 / 99.6,
                      children: classSet(context),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),

      bottomNavigationBar: BottomNavigationBar(
        currentIndex: 0,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              title: Text('My時間割'),
              icon: Icon(Icons.calendar_today)
          ),
          BottomNavigationBarItem(
              title: Text('授業を登録'),
              icon: Icon(Icons.add)
          ),
          BottomNavigationBarItem(
              title: Text('登録した授業を確認'),
              icon: Icon(Icons.list)
          ),
        ],
        onTap: (int value) => tapBottomIcon(value, context),
      ),
    );
  }

  List<Widget> daySet() {
    List<Widget> days = [];

    for (var i = 0; i < 5; i++) {
      days.add(
        Container(
          child: Center(
            child: Text(
              _days[i] + '曜日',
              style: TextStyle(
                fontSize: 18.0,
                fontWeight: FontWeight.w200,
                fontFamily: "Roboto",
              ),
            ),
          ),
          decoration: BoxDecoration(
            border: Border(
                left: BorderSide(color: Color.fromARGB(100, 0, 0, 0)),
            ),
          ),
        ),
      );
    }

    return days;
  }

  List<Widget> classSet(BuildContext context) {
    List<Widget> classes = [];

    for (var i = 0; i < 5 * 5; i++) {
      classes.add(
        Container(
          child: FlatButton(
            padding: EdgeInsets.all(0.0),
            onPressed: () => tapTable(context, i),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text(
                    tableSetClassNames[i],
                    style: TextStyle(
                      fontSize: 12.0,
                      fontWeight: FontWeight.w400,
                      fontFamily: "Roboto",
                    ),
                  ),
                  Text(
                    tableSetTeacherNames[i],
                    style: TextStyle(
                      fontSize: 9.0,
                      fontWeight: FontWeight.w400,
                      fontFamily: "Roboto",
                    ),
                  ),
                ],
              ),
            ),
          ),
          decoration: BoxDecoration(
            border: Border(
              top: BorderSide(color: Color.fromARGB(100, 0, 0, 0)),
              left: BorderSide(color: Color.fromARGB(100, 0, 0, 0)),
            ),
          ),
        ),
      );
    }

    return classes;
  }

  List<Widget> periodSet() {
    List<Widget> periods = [];

    for (var i = 0; i < 5; i++) {
      var j = i + 1;
      periods.add(
        Container(
          padding: EdgeInsets.only(left: 5.0),
          child: Center(
            child: Text(
              "$j限",
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.w200,
                fontFamily: "Roboto",
              ),
            ),
          ),
          decoration: BoxDecoration(
            border: Border(
              top: BorderSide(color: Color.fromARGB(100, 0, 0, 0)),
            ),
            color: Colors.black12,
          ),
        ),
      );
    }

    return periods;
  }

  void tapBottomIcon(int value, BuildContext context) {
    if (value == 1) {
      Navigator.pushNamed(context, '/regist');
    }
    else if(value == 2) {
      Navigator.pushNamed(context, '/confirm');
    }
  }

  void tapTable(BuildContext context, int i) {
    showRegistedClasses(context);
    showDialog(
      context: context,
      builder: (BuildContext context) => SimpleDialog(
        title: Text('授業を選んでください。'),
        children: _registedClasses,
      ),
    ).then<void>((item) {
      setTable(item, i, context);
      showDialog(
        context: context,
        builder: (BuildContext context) => AlertDialog(
          title: Text('【登録完了】'),
          content: Text(item['className'] + '（' + item['teacherName'] + '）' + 'を登録しました。'),
          actions: <Widget>[
            FlatButton(
              child: Text('閉じる'),
              onPressed: () => Navigator.pop(context),
            ),
          ],
        ),
      );
    });
  }

  void showRegistedClasses(BuildContext context) async {
    List<Widget> list = <Widget>[];
    String dbPath = await getDatabasesPath();
    String path = join(dbPath, "timetable_for_students.db");

    Database database = await openDatabase(path, version: 1,onCreate: (Database db, int version) async {
      await db.execute(
          'CREATE TABLE IF NOT EXISTS classData (id INTEGER PRIMARY KEY, className TEXT, teacherName TEXT)'
      );
    });

    List<Map> result = await database.rawQuery('SELECT * FROM classData');

    for (Map item in result) {
      list.add(
        SimpleDialogOption(
          onPressed: () => Navigator.pop<Map>(context, item),
          child: Row(
            children: <Widget>[
              Text(
                item['className'],
                style: TextStyle(
                  fontSize: 20.0,
                ),
              ),
              Text(
                '（' + item['teacherName'] + '）',
                style: TextStyle(
                  fontSize: 16.0,
                ),
              ),
            ],
          ),
        ),
      );
    }

    setState(() {
      _registedClasses = list;
    });
  }

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

Answer 1

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

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

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

Comments

[_Tomo_]

登録直後に表示されるようになりました！
setStateには状態が変わったことを通知する役割があるんですね。

ひとりで考えても全然分からなかったので、回答していただいて本当に助かりました。
ありがとうございます！