はじめに

前回 Flutter Engage で発表された Null Safety とはどういうものか？また記述方法などについて触れました。
今回は 実際の移行方法について書いていきたいと思います。

Flutter2.0 Sound Null Safety とは？

移行の事前確認

移行を始める前に、前回も書きましたが再度バージョンの確認をしましょう。以下のバージョンで Null Safety が利用可能です。

  • Flutter 2.0 以上
  • Dart 2.12 以上
$ flutter --version
Flutter 2.0.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b1395592de (12 days ago) • 2021-04-01 14:25:01 -0700
Engine • revision 2dce47073a
Tools • Dart 2.12.2

またこれも前回書きましたが、全ての依存パッケージが Null Safety に対応してから移行することが強く推奨されているので、こちらも事前に確認しておきましょう。

$ flutter pub outdated --mode=null-safety


前回記事を書いた時は google_mobile_ads と image_galley_saver はまだ非対応でしたが、対応済みになってますね。
では移行作業すすめていきたいと思います！💪

依存パッケージを Null Safety 対応済みのバージョンに更新

以下のコマンドで、依存パッケージを Null Safety 対応済みのバージョンに上げることができます。pubspec.yaml ファイルが更新されるので、実行後の flutter pub get は必須です。

$ dart pub upgrade --null-safety

…と、参考にさせていただいた多くの記事には書かれてあったのですが、自分の環境だと以下のエラーが出ました（XXXXXXはプロジェクト名）

$ dart pub upgrade --null-safety
Because XXXXXX depends on flutter_test any from sdk which doesn't exist (the Flutter SDK is not available), version solving failed.

Flutter users should run `flutter pub get` instead of `pub get`.

Flutter SDK や flutter_test 周り確認したのですが、原因わからず（ご存知の方ご教示いただけるとありがたいです）

結局この記事内に書かれていた以下のコマンドでいけました。先ほど実行したコマンド flutter pub outdated --mode=null-safety の結果の最後にも、 pubspec.yaml を編集するかこのコマンドを実行してくださいと書かれてるので特に問題はないと思います。

Dart 2.12 release — Null Safety

$ flutter pub upgrade --null-safety
$ flutter pub get

再度、依存パッケージを確認してみたら以下の表示に変わっていました。 Null Safety 対応のものに置き換わっているようですね。

$ flutter pub outdated --mode=null-safety
Showing dependencies that are currently not opted in to null-safety.
[✗] indicates versions without null safety support.
[✓] indicates versions opting in to null safety.

All your dependencies declare support for null-safety.

この方法だと全ての依存パッケージのバージョンが上がりますので、もし問題がある方は pubspec.yaml の上げたい依存パッケージのバージョンを手作業で変える方法が良いかと思います。

移行作業

これで依存パッケージは Null Safety のものに置き換わりました。今度はソースの対応を行なっていきます。
やり方は2種類あります。それぞれ見ていきましょう。

  • 移行ツールを使う
  • 手動

移行ツールで移行を行う

まず pubspec.yaml のDartバージョンが 2.12.0未満 になっていることを確認してください。
2.12.0以上にすると Null Safety が有効になることでビルドエラーが発生してしまい、移行ツールがそのエラーも検知して先に進むことができなくなりました。

enviroment:
    sdk: ">=2.7.0 <3.0.0"

移行ツールを実行するには以下のコマンドを叩きます。

$ dart migrate

何もエラーがない場合の実行ログはこのようになります。（XXXXXXX はプロジェクトのパス）

$ dart migrate
Migrating /Users/XXXXXXX

See https://dart.dev/go/null-safety-migration for a migration guide.

Analyzing project...
[-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------]No analysis issues found.

Generating migration suggestions...
[-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------]

Compiling instrumentation information...
[-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------]

View the migration suggestions by visiting:

  http://127.0.0.1:51256/Users/XXXXXXX?authToken=OV2QNpiLh4o%3D

Use this interactive web view to review, improve, or apply the results.
When finished with the preview, hit ctrl-c to terminate this process.

If you make edits outside of the web view (in your IDE), use the 'Rerun from
sources' action.

URLにアクセスすると Null Safety へどう移行するかの詳細をブラウザで確認することができます。

  • ファイル一覧
    • 移行ツールによって修正される箇所は、ファイル名の横にバッジ表示される
    • チェックを外して移行対象外にすることも可能
  • コードプレビュー
    • 移行ツールを使って Null Safety に移行した場合のプレビュー
  • 修正箇所一覧
    • そのファイル内で修正しようとしている箇所一覧
    • line XXX をクリックすると、対象部分がコードプレビューに表示される
  • 修正提案の詳細
    • 移行ツールがどういう理由でその修正をしようとしたかの内容が表示される
    • 修正提案の変更も可能

移行を実行するには右上の APPLY MIGRATION をタップします。ただ移行ツールは完璧ではなく、間違った修正や意図しない修正になることがあります。
実行後にコードを修正していくのも良いですが、実行前に移行ツールの提案を修正することもできます。

方法は2種類あります。

  • 右側下部「修正提案の詳細」の Add /*?*/ hint や Add /*!*/ hint をタップ
    • 実際のコードにヒントマーカーと言われるコメント /*?*/ や /*!*/ が挿入される
  • IDE上でコメントを挿入する
    • /*?*/ や /*!*/ 以外にも /*late final*/ や /*late*/ なども可

挿入されるのはコメントなので既存コードには影響しませんし、日をまたいだ長期的な作業になっても問題になりません。
再度、移行ツールを実行すると、挿入されたコメントをもとに結果が改善されているはずです。

より詳しい解説やヒントマーカー一覧などは、公式ドキュメントや公式動画（21分17秒あたり）が分かりやすかったです。
Using the migration tool

ちなみに移行ツールを Safari で開いた場合「修正箇所一覧」の line XXX をタップしたときコードプレビュー の文字が崩れることがありました。Chrome だと発生しなかったので、こちらで確認する方が良いかもしれません。（公式ドキュメントにも書かれてますし）

Visit that URL in a Chrome browser to see an interactive UI where you can guide the migration process:
ChromeブラウザでこのURLにアクセスすると、移行プロセスを誘導できるインタラクティブなUIが表示されます。

Migrating by hand

手動で移行を行う

手動の場合はとてもシンプルです。

pubspec.yaml の Dart SDK を2.12以上にします。

environment:
  sdk: '>=2.12.0 <3.0.0'

そして flutter pub get 実行後にビルドして、エラーになっている部分を1つずつ修正していきます。

Migrating by hand

その他

現状、AndroidStudio で Flutter のプロジェクトを作ってもデフォルトでは Null Safety は有効になっていません。Dartの公式ブログによると、今後周辺のエコシステムが Null Safety に移行された後に、変更予定とのことです。

Announcing Dart 2.12（Dart 公式ブログ）

なので簡単に Null Safety の対応手順や流れを確認したいなら、Flutter のデフォルトプロジェクトを作って試すのも良いかもしれませんね。

まとめ

Flutter の Null Safety 移行作業について見てきましたが、いかがでしたでしょうか？
移行ツールも用意されていますし、移行のハードルはそれほど高いようには感じられませんでした。

これは Flutter の好きな点の一つですが、公式ドキュメントがとても丁寧に作られています。今回の Null Safety 以外でも何か迷ったらまずは公式ドキュメントや動画を確認すると解決できることも多い気がします。

完全蛇足ですが、個人的に好きなドキュメントのページはCurves classですね。アニメーションの動きの種類と適用したときの挙動が網羅されてて、すごい分かりやすかったです😊

それでは楽しい Flutter開発を！

参考文献

Migrating to null safety
Flutter – Medium
Dart – Medium





ギャップロを運営しているアップフロンティア株式会社では、一緒に働いてくれる仲間を随時、募集しています。 興味がある！一緒に働いてみたい！という方は下記よりご応募お待ちしております。
採用情報をみる

このエントリーをはてなブックマークに追加