Flutter を学習していたらNull Safetyに苦しめられた話

Last updated on 2022年3月28日

Flutter を最近勉強し始めたのですが、まだまだ良質な参考書がなく、ネット上で良いチュートリアルを探していました。

現在ネット上で利用できるFlutterの公式のチュートリアルは以下のとおりです。

公式チュートリアル（英語): https://docs.flutter.dev/reference/tutorials

Flutter Guide JP: https://flutter.ctrnost.com/tutorial/

ただ、チュートリアルにありがちですが、説明が簡素であったり短すぎたりで必ずしも初学者向けではないです。

なので、僕はこちらのお世話になっています。

Flutter実践入門 ～環境構築からAndroid/iOS/Webに広告を付けて同時にリリース!!～：

https://zenn.dev/kazutxt/books/flutter_practice_introduction

こちらは@kazutxtさんが公開してくださっている入門書でネットで無料で読めます。

現在こちらを勉強しています。

ところが、いくつか躓いたところがあったので対応法を共有したいと思います。

躓いた部分

上掲のFlurtter実践入門をすすめていたところ、初級編1:画面の構築(Widget)のコードを実行したところ、エラーが出ました。

ちなみに、コードはこんな感じ。

class MyHomePage extends StatefulWidget{
  MyHomePage({ Key  key, this.title}) : super(key: key);
  final String  title;

こちらの、({ Key key, this.title})の部分が怒られてしまいました。

エラー文を読んでみると、

The parameter ‘key’ can’t have a value of ‘null’ because of its type, but the implicit default value is ‘null’. Try adding either an explicit non-‘null’ default value or the ‘required’ modifier.

とのこと。

なんのこっちゃ

Flutterのバージョンアップ

しらべたところ、原因は2021年にFlutterとDartがそれぞれメジャーバージョンアップしたために起きたエラーでした。

Flutter2以降ではNull Safetuyという概念が導入されたそうです。

Null Safetyとは

ざっくりいうと、変数がnullを許容するかしないかを明示的に書かなければならないというルールです。

たとえば、int hogeと書くと、hogeにnullが入ることは許容されません。

Null Safetyに関しても上記Flutter実践入門が一番わかりやすかったので一部引用します。

@kazutxtさんのチュートリアルをそのまま実行すると、NUll Safetyのルールに引っかかってエラーが起きてしまいます。エラー対策の記述も用意してくれているのですが、自分はうまく行きませんでした。

そこで、自分で試してみた対応を残そうと思います。

対応策

まずはFlutter実践入門に沿って進めます。

（参考:https://zenn.dev/kazutxt/books/flutter_practice_introduction/viewer/intermediate_nullsafety）

まずはパッケージを更新。

$ dart pub upgrade --null-safety 
$ dart pub get.

そしてmigrateします。

$ dart migrate --skip-import-check

が、ここでエラーが出てしまいました。

エラー文をコピペするのを忘れていたのですが、コードにエラーがあるからmigrateできなかったよと言われてしまいました。

Flutter実践入門によれば、migrateが成功すれば半自動で移行できるようなのですが、これでは移行できません。

そこで、自力で直していきます。

（こちらの記事を参考にさせていただきました。https://zenn.dev/kboy/articles/ae607839cd4573）

まず、ソースコードの問題のある部分

class MyHomePage extends StatefulWidget{
  MyHomePage({ Key  key, this.title}) : super(key: key);
  final String  title;

これを変えていきます。

nullを許容する場合は

String? name;

このように書きます。

これでnameにnullが入っていてもいいよという意味になります。

その代わり、例えばクラスなどでこの書き方をする場合、使う側（クラスを呼び出すとき）で特別な対応をする必要があります。

たとえば、下記のようなクラスを考えます。

class hoge{
    String? name;
}

このクラスを呼び出すときにはnullじゃないことを確定させるために下のように書かなければいけません。

Text(hoge.name!)

したがって、今回のコードの場合は下記のようにします。

class MyHomePage extends StatefulWidget{
  MyHomePage({ Key? key, this.title}) : super(key: key);
  final String? title;

呼び出す側がnullにならないように気をつけてください。

このエラーを解決するために小一時間かかってしまいましたが、null safetyについてよくわかったので良かったです。

過去の記事でも書きましたがFlutterには導入のときから詰まってばかりで先行きが不安です。