はじめに
Flutterで開発をしていると、UIのビルドで躓いて真っ赤な画面になったりしますよね？？(Swiftとかでもあるのかな？)
初めてあの真っ赤な画面を見た時はめちゃくちゃびっくりしますよね笑
最近、後輩が入ってきて、自分の1年前のようにエラーから抜け出せずに悩んでいるところを見かけます。そんな時、自分がどんなふうにエラー解決の耐性がついていったかを考えた時、先輩の手捌きをめちゃくちゃ見ながら身につけていったなと思い出しました！
なので、今回は自分が真っ赤な画面との戦う時気にしているポイントを記載します！
初学者の方は、ぜひ見て行ってください！
概要
今回は、Null check operator used on a null valueのエラーと立ち会った時の解決方法を記載します！
その他、よく出会うエラーの原因についてまとめている記事を添付するので、同じように戦ってみてください！
利用ツール
- Flutter：Ver2.10.5 ←ちょっと古いです。。。
- VSCode
- AndroidStudio(エミュレータ使用)
大前提
エラー文は読むこと！！
未経験からエンジニアになった人が経験することだと思いますが、
先輩エンジニアから
「エラー文は読みなさい。」
と、言われた経験があると思います。
ただ、これは先輩エンジニアが意地悪をしたいわけではなくて、本当に大切なこと。
なんで自分の書いたソースがうまく動いていないのか？？
その原因を知ることで、成長にもつながるし、エラーで悩む時間が圧倒的に短くなります！
なので、エラーと戦う時は、何でエラーが出ているかを教えてくれているエラーコードと会話しながら進めましょう！
ポイントその１：どこでビルドが失敗しているか確認すること！
まずは、どこでエラー文が吐かれているかを見つけることが大切！！
ソースが成長してくると、どこでエラーを吐いているか、経験値が浅い初心者には難しいですよね。。。
でも、VSCodeは教えてくれます！
以下の例を見てみましょう。
サンプルコード
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: const Sample(),
);
}
}
class Sample extends StatefulWidget {
const Sample({Key? key}) : super(key: key);
@override
State<Sample> createState() => _SampleState();
}
class _SampleState extends State<Sample> {
String? name;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('エラー解決！'),
),
body: Text(name!),
);
}
}
このコードの実行結果は以下。
出ました真っ赤な画面！
この画面に立ち会ったら、まずはエラー文を読みます。
このエラー文は、簡単にいうと、Nullが許容されていないところにNulのデータが渡ってるよ〜って教えてくれています！
では、まず初めに、どこでこのエラーが発生しているのか？？を確認しましょう。
見るところは、デバッグコンソール！
画面が真っ赤になると、デバッグコンソールには怖いくらい長文のエラー文が表示されます。
ただし、みるところは限られています。
以下動画のようにエラー文の右側に並んでいるURLの中から、見覚えのあるファイル名をクリックしてみてください！
わかりましたか？？
URLを押すと、カーソルがエラーが出ているところに合わせてくれます！！
これで、nameの変数のNullチェック演算子でエラーが出ていることがわかりましたね！
その２：ログを出力すること！
ここまでわかったら、次です。
Nullチェック演算子でエラーが出ているとしたら、どの値がNullで渡ってきているのかを確認しなくてはいけません！
今回はnameをNullにしたので、原因はわかっていますが、エンジニアは細かいことまで確認すべし！
しっかりとどの値がNullであるかを確認しましょう！
サンプルコード
class _SampleState extends State<Sample> {
String? name;
@override
Widget build(BuildContext context) {
print("=name===="); //ここを追加！
print(name); // ここを追加！
return Scaffold(
appBar: AppBar(
title: const Text('エラー解決'),
),
body: Text(name!),
);
}
}
出力結果は以下です。
I/flutter ( 5473): =name====
I/flutter ( 5473): null
これで、nameのデータにNullが返されていることがちゃんと確認できました◎
なので、これに対応していけばいいということですね◎
その３：適切な対応策を見つけること！
この解決方法については、いくつか対応策があります。
initStateで必ず初期値を代入したり、それを使わずしも必ず値が代入されるロジックを組むのも一つだと思います。
今回はNulllチェック演算子で対応するのではなく、Null結合演算子(??)を使って解決していきます！
Null結合演算子を使うことで、データがNullで渡ってきた場合に、演算子の後に指定した値で代わりにビルドされます。
サンプルコード
class _SampleState extends State<Sample> {
String? name;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('エラー解決'),
),
body: Text(name ?? 'データがNullでした'),
);
}
}
出力結果はこちら。
よくあるエラー
以下の記事によくぶつかるエラーをまとめているので、ぜひ参考にしてください！