質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.83%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 786

_Tomo_

score 8

【開発環境】
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'];
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/02/14 07:30

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.83%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る