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

Question

前提

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

該当のソースコード

import 'package:flutter/material.dart';
import 'package:movie_app/constants.dart';

import 'cast_card.dart';

class CastAndCrew extends StatelessWidget {
  final List casts;

  const CastAndCrew({super.key, required this.casts});
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(kDefaultPadding),
      child: Column(
        children: <Widget>[
          Text(
            "Cast & Crew",
            style: Theme.of(context).textTheme.headline5,
          ),
          SizedBox(
            height: kDefaultPadding,
          ),
          SizedBox(
            height: 160,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: casts.length,
              itemBuilder: (context, index) => CastCard(cast: casts[index]),
            ),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

const kSecondaryColor = Color(0xFFFE6DBE);
const kTextColor = Color(0xFF12153D);
const kTextLightColor = Color(0xFF9A9BB2);
const kFillStarColor = Color(0xFFFCC419);

const kDefaultPadding = 20.0;

const kDefaultShadow = BoxShadow(
  offset: Offset(0, 4),
  blurRadius: 4,
  color: Colors.black26,
);

import 'package:flutter/material.dart';
import 'package:movie_app/constants.dart';

class CastCard extends StatelessWidget {
  final Map cast;

  const CastCard({super.key, required this.cast});
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(right: kDefaultPadding),
      width: 80,
      child: Column(
        children: <Widget>[
          Container(
            height: 80,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              image: DecorationImage(
                image: AssetImage(
                  cast['image'],
                ),
              ),
            ),
          ),
          SizedBox(
            height: kDefaultPadding / 2,
          ),
          Text(
            cast['originalName'],
            textAlign: TextAlign.center,
            style: Theme.of(context).textTheme.bodyText2,
            maxLines: 2,
          ),
          SizedBox(
            height: kDefaultPadding / 4,
          ),
          Text(
            cast['movieName'],
            maxLines: 1,
            textAlign: TextAlign.center,
            style: TextStyle(color: kTextLightColor),
          ),
        ],
      ),
    );
  }
}

// Our movie model
class Movie {
  final int id, year, numOfRatings, criticsReview, metascoreRating;
  final double rating;
  final List<String> genra;
  final String plot, title, poster, backdrop;
  final List<Map> cast;

  Movie({
    required this.poster,
    required this.backdrop,
    required this.title,
    required this.id,
    required this.year,
    required this.numOfRatings,
    required this.criticsReview,
    required this.metascoreRating,
    required this.rating,
    required this.genra,
    required this.plot,
    required this.cast,
  });
}

// our demo data movie data
List<Movie> movies = [
  Movie(
    id: 1,
    title: "Bloodshot",
    year: 2020,
    poster: "assets/images/poster_1.jpg",
    backdrop: "assets/images/backdrop_1.jpg",
    numOfRatings: 150212,
    rating: 7.3,
    criticsReview: 50,
    metascoreRating: 76,
    genra: ["Action", "Drama"],
    plot: plotText,
    cast: [
      {
        "orginalName": "James Mangold",
        "movieName": "Director",
        "image": "assets/images/actor_1.png",
      },
      {
        "orginalName": "Matt Damon",
        "movieName": "Carroll",
        "image": "assets/images/actor_2.png",
      },
      {
        "orginalName": "Christian Bale",
        "movieName": "Ken Miles",
        "image": "assets/images/actor_3.png",
      },
      {
        "orginalName": "Caitriona Balfe",
        "movieName": "Mollie",
        "image": "assets/images/actor_4.png",
      },
    ],
  ),
  Movie(
    id: 2,
    title: "Ford v Ferrari ",
    year: 2019,
    poster: "assets/images/poster_2.jpg",
    backdrop: "assets/images/backdrop_2.jpg",
    numOfRatings: 150212,
    rating: 8.2,
    criticsReview: 50,
    metascoreRating: 76,
    genra: ["Action", "Biography", "Drama"],
    plot: plotText,
    cast: [
      {
        "orginalName": "James Mangold",
        "movieName": "Director",
        "image": "assets/images/actor_1.png",
      },
      {
        "orginalName": "Matt Damon",
        "movieName": "Carroll",
        "image": "assets/images/actor_2.png",
      },
      {
        "orginalName": "Christian Bale",
        "movieName": "Ken Miles",
        "image": "assets/images/actor_3.png",
      },
      {
        "orginalName": "Caitriona Balfe",
        "movieName": "Mollie",
        "image": "assets/images/actor_4.png",
      },
    ],
  ),
  Movie(
    id: 1,
    title: "Onward",
    year: 2020,
    poster: "assets/images/poster_3.jpg",
    backdrop: "assets/images/backdrop_3.jpg",
    numOfRatings: 150212,
    rating: 7.6,
    criticsReview: 50,
    metascoreRating: 79,
    genra: ["Action", "Drama"],
    plot: plotText,
    cast: [
      {
        "orginalName": "James Mangold",
        "movieName": "Director",
        "image": "assets/images/actor_1.png",
      },
      {
        "orginalName": "Matt Damon",
        "movieName": "Carroll",
        "image": "assets/images/actor_2.png",
      },
      {
        "orginalName": "Christian Bale",
        "movieName": "Ken Miles",
        "image": "assets/images/actor_3.png",
      },
      {
        "orginalName": "Caitriona Balfe",
        "movieName": "Mollie",
        "image": "assets/images/actor_4.png",
      },
    ],
  ),
];

String plotText =
    "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.";

試したこと

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はモデルファイルとなっております。

Answer 1

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

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

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

Comments

[Jedda]

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

Answer 2

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

Comments

[Jedda]

貴重なアドバイスありがとうございます。
失敗してなんぼでその度にナレッジ貯めてこういうエラーが吐かれたらこうすれば良いよねという知見貯められるようになりたいです！