【Flutter】ボタンを押した後に画面を更新したい

ボタンを押した後に画面を更新する方法をお伝えします。flutterの状態管理にはStatefulWidgetを使用します。

本記事の想定読者

• Flutterでアプリを開発している人
• 状態管理をStatefulWidgetで実装している人

開発環境

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.5, on Microsoft Windows [Version 10.0.19045.3208], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.1.4)
[√] Android Studio (version 2021.1)
[!] Android Studio (version 4.1)
    X Unable to determine bundled Java version.
[!] Android Studio (version 4.2)
    X Unable to determine bundled Java version.
[√] VS Code (version 1.81.0)
[√] Connected device (4 available)
[√] HTTP Host Availability

! Doctor found issues in 2 categories.

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  sticky_grouped_list: ^3.1.0
  intl: ^0.18.1
  google_fonts: ^4.0.4
  sqflite: ^2.0.3+1
  numberpicker: ^2.1.2

手順

実装方法はとてもシンプルで、setState(() {});を追加するだけです。

dbProvider.addLibraryをデータベースに入力情報を追加するメソッドで、その後にsetState(() {})します。

             onTap: () async {
                  await dbProvider.addLibrary(Library(
                      exercise: _currentValue!,
                      ));
                  setState(() {});
                }