type 'Null' is not a subtype of type 'String'

前提

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

実現したいこと

type 'Null' is not a subtype of type 'String'を解決させて正常な挙動にする。

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

The following _TypeError was thrown building CastCard(dirty):
type 'Null' is not a subtype of type 'String'

The relevant error-causing widget was:
  CastCard
  CastCard:file:///Users/User/Flutter/movie_app/movie_app/lib/screens/details/components/cast_and_crew.dart:28:48

該当のソースコード

cast_and_crew.dart
1import 'package:flutter/material.dart';
2import 'package:movie_app/constants.dart';
3
4import 'cast_card.dart';
5
6class CastAndCrew extends StatelessWidget {
7  final List casts;
8
9  const CastAndCrew({super.key, required this.casts});
10  @override
11  Widget build(BuildContext context) {
12    return Padding(
13      padding: const EdgeInsets.all(kDefaultPadding),
14      child: Column(
15        children: <Widget>[
16          Text(
17            "Cast & Crew",
18            style: Theme.of(context).textTheme.headline5,
19          ),
20          SizedBox(
21            height: kDefaultPadding,
22          ),
23          SizedBox(
24            height: 160,
25            child: ListView.builder(
26              scrollDirection: Axis.horizontal,
27              itemCount: casts.length,
28              itemBuilder: (context, index) => CastCard(cast: casts[index]),
29            ),
30          ),
31        ],
32      ),
33    );
34  }
35}
36

constants.dart
1import 'package:flutter/material.dart';
2
3const kSecondaryColor = Color(0xFFFE6DBE);
4const kTextColor = Color(0xFF12153D);
5const kTextLightColor = Color(0xFF9A9BB2);
6const kFillStarColor = Color(0xFFFCC419);
7
8const kDefaultPadding = 20.0;
9
10const kDefaultShadow = BoxShadow(
11  offset: Offset(0, 4),
12  blurRadius: 4,
13  color: Colors.black26,
14);

cast_card.dart
1import 'package:flutter/material.dart';
2import 'package:movie_app/constants.dart';
3
4class CastCard extends StatelessWidget {
5  final Map cast;
6
7  const CastCard({super.key, required this.cast});
8  @override
9  Widget build(BuildContext context) {
10    return Container(
11      margin: EdgeInsets.only(right: kDefaultPadding),
12      width: 80,
13      child: Column(
14        children: <Widget>[
15          Container(
16            height: 80,
17            decoration: BoxDecoration(
18              shape: BoxShape.circle,
19              image: DecorationImage(
20                image: AssetImage(
21                  cast['image'],
22                ),
23              ),
24            ),
25          ),
26          SizedBox(
27            height: kDefaultPadding / 2,
28          ),
29          Text(
30            cast['originalName'],
31            textAlign: TextAlign.center,
32            style: Theme.of(context).textTheme.bodyText2,
33            maxLines: 2,
34          ),
35          SizedBox(
36            height: kDefaultPadding / 4,
37          ),
38          Text(
39            cast['movieName'],
40            maxLines: 1,
41            textAlign: TextAlign.center,
42            style: TextStyle(color: kTextLightColor),
43          ),
44        ],
45      ),
46    );
47  }
48}
49

movie.dart
1// Our movie model
2class Movie {
3  final int id, year, numOfRatings, criticsReview, metascoreRating;
4  final double rating;
5  final List<String> genra;
6  final String plot, title, poster, backdrop;
7  final List<Map> cast;
8
9  Movie({
10    required this.poster,
11    required this.backdrop,
12    required this.title,
13    required this.id,
14    required this.year,
15    required this.numOfRatings,
16    required this.criticsReview,
17    required this.metascoreRating,
18    required this.rating,
19    required this.genra,
20    required this.plot,
21    required this.cast,
22  });
23}
24
25// our demo data movie data
26List<Movie> movies = [
27  Movie(
28    id: 1,
29    title: "Bloodshot",
30    year: 2020,
31    poster: "assets/images/poster_1.jpg",
32    backdrop: "assets/images/backdrop_1.jpg",
33    numOfRatings: 150212,
34    rating: 7.3,
35    criticsReview: 50,
36    metascoreRating: 76,
37    genra: ["Action", "Drama"],
38    plot: plotText,
39    cast: [
40      {
41        "orginalName": "James Mangold",
42        "movieName": "Director",
43        "image": "assets/images/actor_1.png",
44      },
45      {
46        "orginalName": "Matt Damon",
47        "movieName": "Carroll",
48        "image": "assets/images/actor_2.png",
49      },
50      {
51        "orginalName": "Christian Bale",
52        "movieName": "Ken Miles",
53        "image": "assets/images/actor_3.png",
54      },
55      {
56        "orginalName": "Caitriona Balfe",
57        "movieName": "Mollie",
58        "image": "assets/images/actor_4.png",
59      },
60    ],
61  ),
62  Movie(
63    id: 2,
64    title: "Ford v Ferrari ",
65    year: 2019,
66    poster: "assets/images/poster_2.jpg",
67    backdrop: "assets/images/backdrop_2.jpg",
68    numOfRatings: 150212,
69    rating: 8.2,
70    criticsReview: 50,
71    metascoreRating: 76,
72    genra: ["Action", "Biography", "Drama"],
73    plot: plotText,
74    cast: [
75      {
76        "orginalName": "James Mangold",
77        "movieName": "Director",
78        "image": "assets/images/actor_1.png",
79      },
80      {
81        "orginalName": "Matt Damon",
82        "movieName": "Carroll",
83        "image": "assets/images/actor_2.png",
84      },
85      {
86        "orginalName": "Christian Bale",
87        "movieName": "Ken Miles",
88        "image": "assets/images/actor_3.png",
89      },
90      {
91        "orginalName": "Caitriona Balfe",
92        "movieName": "Mollie",
93        "image": "assets/images/actor_4.png",
94      },
95    ],
96  ),
97  Movie(
98    id: 1,
99    title: "Onward",
100    year: 2020,
101    poster: "assets/images/poster_3.jpg",
102    backdrop: "assets/images/backdrop_3.jpg",
103    numOfRatings: 150212,
104    rating: 7.6,
105    criticsReview: 50,
106    metascoreRating: 79,
107    genra: ["Action", "Drama"],
108    plot: plotText,
109    cast: [
110      {
111        "orginalName": "James Mangold",
112        "movieName": "Director",
113        "image": "assets/images/actor_1.png",
114      },
115      {
116        "orginalName": "Matt Damon",
117        "movieName": "Carroll",
118        "image": "assets/images/actor_2.png",
119      },
120      {
121        "orginalName": "Christian Bale",
122        "movieName": "Ken Miles",
123        "image": "assets/images/actor_3.png",
124      },
125      {
126        "orginalName": "Caitriona Balfe",
127        "movieName": "Mollie",
128        "image": "assets/images/actor_4.png",
129      },
130    ],
131  ),
132];
133
134String plotText =
135    "American car designer Carroll Shelby and driver Kn Miles battle corporate interference and the laws of physics to build a revolutionary race car for Ford in order.";
136

試したこと

type 'Null' is not a subtype of type 'String'を和訳したところ、
タイプ 'Null' はタイプ 'String' のサブタイプではありません。という意味だと判明。
type 'Null' is not a subtype of type 'String'でググったところ、以下のページに行き着く。
https://yakiimosan.com/flutter-setup-error-nullsafety-to-string/
今回のエラーは、Dart2.12以降で見られるNull Safetyにあるのかな？という推測で、メッセージにCastCard:file:///Users/User/Flutter/movie_app/movie_app/lib/screens/details/components/cast_and_crew.dart:28:48とあるので、cast_and_crew.dart:28にto Stringを追加してみましたが、The argument type 'String' can't be assigned to the parameter type 'Map<dynamic, dynamic>'.とエラーが吐かれるので解決に至らずといった状況です。
現在FlutterのUIの構築のやり方を勉強するという段階なので何をどうすれば良いかがわからない状況です。

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

[✓] Flutter (Channel stable, 3.3.10, on macOS 13.0.1
22A400 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

constants.dartはコンスタントに使うpaddingだったりColorをまとめているファイルで、movie.dartはモデルファイルとなっております。

行動規範の内容に同意します

回答6件

ベストアンサー

movie.dart内で
"orginalName"
となっているので、
cast_card.dart内でも

Text(
  cast['orginalName'],
  ...

としないとkeyが一致しないので値を取得できないですね。
その場合nullが返ってくるのでそのエラーが出ていると思われます。

投稿2023/01/16 15:45

moriman

総合スコア615

Jedda

2023/01/16 21:32

回答ありがとうございます。アドバイス頂いた通りに、cast_card.dartのcast['originalName']をcast['orginalName']に変更して、ホットリロードしたところエラーも何も表示されずに正常挙動になりました。ちなみになのですが、どういったアプローチで今回のエラーの解決に繋げることができたのか教えていただきたいです。デバッガなどを使ったのでしょうか？

行動規範の内容に同意します

Hey, great blog, but I don’t understand how to add your site in my rss reader. Can you Help me please? IE Tbilisi

投稿2023/08/15 07:48

sotera8477

総合スコア26

I’ve read some good stuff here. Definitely worth bookmarking for revisiting. I surprise how much effort you put to create such a great informative website. Pozycjonowanie stron internetowych

投稿2023/08/13 16:28

sotera8477

総合スコア26

Nice knowledge gaining article. This post is really the best on this valuable topic. ร้านกาแฟอุบล

投稿2023/08/09 13:15

sotera8477

総合スコア26

If I had to pick a favourite platform, I'd go with. Then, without a doubt, I'll pay a visit to www.signnow.com/features/add-wet-ink-signature-online. Because I know this is the one person who can save me from a horrific disaster!

投稿2023/08/01 13:12

sotera8477

総合スコア26

今回の質問の論点、エラーメッセージはよくあるものですので、エラーや失敗の都度、原因と発生防止の対策を考えて整理することを続けていくと良いと思います。
今回の話でいくと、Mapのかわりにモデルクラスを定義してそれでデータを扱うと、keyのtypoが実行時エラーに繋がる可能性が無くなる、みたいなことですよね。

投稿2023/01/17 10:37

moriman

総合スコア615