FutureBuilderにてNull check operator used on a null value in Futerbuilderと出るときの対処法。<初心者>

こちらの記事を全面的に参考にさせていただきました。

Futurebuilderでなにかを表示する際

Null check operator used on a null value in Futerbuilderなどの

このエラーが出ることがあります。

私の修正前のコードはこれでした↓

<main.dart>のStatelessWidget


class MyApp extends StatelessWidget {
  Future<bool> isAgreeCheck() async {
    //利用規約にまだ同意してなかったら画面を表示
    final prefs = await SharedPreferences.getInstance();

    final bool1 = prefs.getBool('bool1') ?? false;
    return bool1;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.yellow, //メインカラー
      ),
      debugShowCheckedModeBanner: false, //デバッグのバナーなし
      home: FutureBuilder<bool>(
          future: isAgreeCheck(),
          builder: (context, snapshot) {
            
            return snapshot.data! ? Screen() : WalkThrough();
          }),
    );
  }

}

shared_prefを使用しているのでもし再現したい方は↓をpub getしてください。

shared_preferences | Flutter Package

以上のコードは

利用規約に同意していたらメイン画面していなかったら、ウォークスルー画面に遷移するような実装を意識しました。

shared_prefを使うときも一応async awaitで処理を待つようにしました。

async awaitを使うにはおそらくFutureBuilderでWidgetを構築しないといけないので、

FuteureBuilderを使いました。

しかしこれで走らせたところ、

The following _CastError was thrown building FutureBuilder<bool>(dirty, state: _FutureBuilderState<bool>#6b231):
Null check operator used on a null value

The relevant error-causing widget was:
FutureBuilder<bool>

のようなエラーが出ました。

これを防ぐ方法は、

↓の記事にも載っているように

flutter - Null check operator used on a null value in Futerbuilder - Stack Overflow

FutureBuilderの中に

if (!snapshot.hasData) {
  return Container(
    child: Center(
      child: CircularProgressIndicator(),
    ),
  );
}

というコードを追加するだけです。

修正したコード


class MyApp extends StatelessWidget {
  Future<bool> isAgreeCheck() async {
    //利用規約にまだ同意してなかったら画面を表示
    final prefs = await SharedPreferences.getInstance();

    final bool1 = prefs.getBool('bool1') ?? false;
    return bool1;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.yellow, //メインカラー
      ),
      debugShowCheckedModeBanner: false, //デバッグのバナーなし
      home: FutureBuilder<bool>(
          future: isAgreeCheck(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) {//ここに追加
              return Container(
                child: Center(
                  child: CircularProgressIndicator(),
                ),
              );
            }
            return snapshot.data! ? Screen() : WalkThrough();
          }),
    );
  }

}