null check operator used on a null value

Question

実現したいこと

• null check operator used on a null valueを解決させて、正常な挙動にする。

前提

FlutterのUI構築の仕方を勉強するにあたり、Youtubeの動画を真似して勉強しています。

発生している問題・エラーメッセージ

null check operator used on a null value

該当のソースコード

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

import '../models/models.dart';

class Stories extends StatelessWidget {
  final User currentUser;
  final List<Story> stories;
  const Stories({super.key, required this.currentUser, required this.stories});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200.0,
      color: Colors.purple,
      child: ListView.builder(
        padding: EdgeInsets.symmetric(
          vertical: 10.0,
          horizontal: 8.0,
        ),
        scrollDirection: Axis.horizontal,
        itemCount: 1 + stories.length,
        itemBuilder: (BuildContext context, int index) {
          if (index == 0) {
            return Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 4.0,
              ),
              child: _StoryCard(
                isAddStory: true,
                currentUser: currentUser,
                story: null,
              ),
            );
          }
          return Padding(
            padding: EdgeInsets.symmetric(horizontal: 4.0),
            child: _StoryCard(
              // story: story,
              story: null,
              currentUser: null,
            ),
          );
        },
      ),
    );
  }
}

class _StoryCard extends StatelessWidget {
  final bool isAddStory;
  final User? currentUser;
  final Story? story;
  // final isAddStory = currentUser!.imageUrl.toString() ?? false;
  // final isNotAddStory = story!.imageUrl.toString() ?? false;
  const _StoryCard({
    super.key,
    this.isAddStory = false,
    required this.currentUser,
    required this.story,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        CachedNetworkImage(
          imageUrl: isAddStory
              ? currentUser!.imageUrl.toString()
              : story!.imageUrl.toString(),
          height: double.infinity,
          width: 110.0,
          fit: BoxFit.cover,
        ),
      ],
    );
  }
}

export 'user_model.dart';
export 'story_model.dart';
export 'post_model.dart';

import 'package:meta/meta.dart';

class User {
  final String name;
  final String? imageUrl;

  const User({
    required this.name,
    required this.imageUrl,
  });
}

import 'package:meta/meta.dart';
import 'models.dart';

class Story {
  final User user;
  final String? imageUrl;
  final bool isViewed;

  const Story({
    required this.user,
    required this.imageUrl,
    this.isViewed = false,
  });
}

import 'package:meta/meta.dart';
import 'models.dart';

class Post {
  final User user;
  final String caption;
  final String timeAgo;
  final String? imageUrl;
  final int likes;
  final int comments;
  final int shares;

  const Post({
    required this.user,
    required this.caption,
    required this.timeAgo,
    required this.imageUrl,
    required this.likes,
    required this.comments,
    required this.shares,
  });
}

試したこと

null check operator used on a null valueを和訳したところ、
ヌルチェック演算子という意味だと判明。
null check operator used on a null valueでググったところ、以下のページに行き着く。
https://off.tokyo/blog/null-check-operator-used-on-a-null-value/
上記のページでは、最初に変数を初期化してそれを比較すればnullに対応できるということがわかりました。そこでstories.dart内で変数を初期化して67行目のCachedNetworkImageの引数内で使用したいと考えています。自分なりに変数を定義してそれっぽくnull値に対応したものを定義(54,55行目)してみましたが、現在FlutterのUIの構築のやり方を勉強するという段階なので今回の場合だとどううまく対応させれば良いかがわからない状況です。

補足情報（FW/ツールのバージョンなど）

[✓] Flutter (Channel stable, 3.7.0, on macOS 13.1 22C65
darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices
(Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.74.3)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

参考にしている動画
https://www.youtube.com/watch?v=HvLb5gdUfDE&t=62s

Answer 1

_StoryCardクラスの定義内でcurrentUserやstoryに対してnull check operatorを使用しているので、currentUserやstoryは必須である(必ず引数として渡される)前提のロジックですよね。

ですから52行目、53行目はUser?型やStory?型ではなく、User型、Story型で問題無いと思いますがいかがでしょう。

32行目、40行目で

story: null,

それと41行目で

currentUser: null,

としているので、nullが渡されて、それに対してnull check operatorが使用されてお示しのエラーが発生している、ということですよね。
ですからnullを渡さなければそのエラーは出なくなるはずですよね。

Comments

[Jedda]

回答ありがとうございます。
お手本にしている動画がNull Safety以前の環境で開発されている動画でしたので、
動画ではエラーになっていなくてもこちらではエラーになっってしまうので、とりあえずUser?、Story?にしておけば良いという認識でした。
アドバイスをいただいて?をつけないで変数を宣言し、
story: null, currentUser: null,ではなくnullを渡さなければ良いというところまではわかりましたが、
nullを許容しない場合どのように回避すべき（具体的にはcurrentUserにはcurrentUserを渡し、storyには何を渡せば良いのだろうということ)というのが20分ほど考えてみてもわからなかったので質問させてください。

[moriman]

```
story: stories[index],
```
とすればstoriesの全要素を一つずつListViewで表示できる、というロジックになると思うのですがいかがでしょう。

[Jedda]

回答ありがとうございます。
story: stories[index], currentUser: currentUserにしたところエラーメッセージは表示されず、
理想通りの挙動が実現しました。今回の件でむやみやたらにnullを許容してしまうとこういうことが起きるのでしっかり考えてその都度対応することが必要ですね。