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

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

新規登録して質問してみよう
ただいま回答率
85.45%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

1回答

618閲覧

null check operator used on a null value

ituking

総合スコア80

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2023/02/04 12:20

編集2023/02/05 00:08

実現したいこと

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

前提

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

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

null check operator used on a null value

該当のソースコード

stories.dart

1import 'package:cached_network_image/cached_network_image.dart'; 2import 'package:flutter/material.dart'; 3 4import '../models/models.dart'; 5 6class Stories extends StatelessWidget { 7 final User currentUser; 8 final List<Story> stories; 9 const Stories({super.key, required this.currentUser, required this.stories}); 10 11 @override 12 Widget build(BuildContext context) { 13 return Container( 14 height: 200.0, 15 color: Colors.purple, 16 child: ListView.builder( 17 padding: EdgeInsets.symmetric( 18 vertical: 10.0, 19 horizontal: 8.0, 20 ), 21 scrollDirection: Axis.horizontal, 22 itemCount: 1 + stories.length, 23 itemBuilder: (BuildContext context, int index) { 24 if (index == 0) { 25 return Padding( 26 padding: EdgeInsets.symmetric( 27 horizontal: 4.0, 28 ), 29 child: _StoryCard( 30 isAddStory: true, 31 currentUser: currentUser, 32 story: null, 33 ), 34 ); 35 } 36 return Padding( 37 padding: EdgeInsets.symmetric(horizontal: 4.0), 38 child: _StoryCard( 39 // story: story, 40 story: null, 41 currentUser: null, 42 ), 43 ); 44 }, 45 ), 46 ); 47 } 48} 49 50class _StoryCard extends StatelessWidget { 51 final bool isAddStory; 52 final User? currentUser; 53 final Story? story; 54 // final isAddStory = currentUser!.imageUrl.toString() ?? false; 55 // final isNotAddStory = story!.imageUrl.toString() ?? false; 56 const _StoryCard({ 57 super.key, 58 this.isAddStory = false, 59 required this.currentUser, 60 required this.story, 61 }); 62 63 @override 64 Widget build(BuildContext context) { 65 return Stack( 66 children: [ 67 CachedNetworkImage( 68 imageUrl: isAddStory 69 ? currentUser!.imageUrl.toString() 70 : story!.imageUrl.toString(), 71 height: double.infinity, 72 width: 110.0, 73 fit: BoxFit.cover, 74 ), 75 ], 76 ); 77 } 78} 79

models.dart

1export 'user_model.dart'; 2export 'story_model.dart'; 3export 'post_model.dart';

user_model.dart

1import 'package:meta/meta.dart'; 2 3class User { 4 final String name; 5 final String? imageUrl; 6 7 const User({ 8 required this.name, 9 required this.imageUrl, 10 }); 11} 12

story_model.dart

1import 'package:meta/meta.dart'; 2import 'models.dart'; 3 4class Story { 5 final User user; 6 final String? imageUrl; 7 final bool isViewed; 8 9 const Story({ 10 required this.user, 11 required this.imageUrl, 12 this.isViewed = false, 13 }); 14} 15

post_model.dart

1import 'package:meta/meta.dart'; 2import 'models.dart'; 3 4class Post { 5 final User user; 6 final String caption; 7 final String timeAgo; 8 final String? imageUrl; 9 final int likes; 10 final int comments; 11 final int shares; 12 13 const Post({ 14 required this.user, 15 required this.caption, 16 required this.timeAgo, 17 required this.imageUrl, 18 required this.likes, 19 required this.comments, 20 required this.shares, 21 }); 22} 23

試したこと

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

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

_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を渡さなければそのエラーは出なくなるはずですよね。

投稿2023/02/04 20:44

moriman

総合スコア615

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ituking

2023/02/05 06:27

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

2023/02/05 06:42

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

2023/02/06 21:32

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問