🥞

【Flutter】.envや画像ファイルなど追加したらpubspec.yamlに追記しよう

に公開

こんにちは。
最近flutterでアプリ開発しています。
今回は、かなり地味ですがよく引っかかりがちな静的アセットファイル(.envや画像ファイルなど)追加時のエラーについて、対処法を書いていきます。

事象

.envファイルをプロジェクトに追加したあと、flutter runでアプリを起動させると画面が真っ白になり、先に進まなくなりました。

解決手順(結論: pubspec.yamlに追加する)

以下の手順でエラーを解決しました。

1. エラーの原因特定

以下のコマンドで起動し、ログを出力します

flutter run -v

2. ログを確認

自分はVSCodeを使っており、ターミナルにログが吐かれます。

[+3046 ms] [ERROR:flutter/runtime/dart_vm_initializer.cc(40)] Unhandled Exception: Instance of 'FileNotFoundError'
#0 DotEnv._getEntriesFromFile (package:flutter_dotenv/src/dotenv.dart:172:7)
<asynchronous suspension>
#1 DotEnv.load (package:flutter_dotenv/src/dotenv.dart:124:23)
<asynchronous suspension>
#2 main (package:your_project/main.dart:21:3)
<asynchronous suspension>

指定のファイルが見つからないと言ってますね。
さらに下まで見ると、main.dart:21:3でエラーが起きているそうなのでそこを確認します。

main.dart
await dotenv.load(fileName: ".env");

まさに、.envファイルの読み込み箇所になります。
ファイルは実在しており、パスも確認しましたが特に問題なさそうなのでただ認識されてない感じがします。

3. .envファイルをビルドファイルとして認識させる

pubspec.yamlに以下を追記します。

pubspec.yaml
flutter:
  assets:
    - .env

自分はこの作業結構忘れがちで、エラーが発生して毎回「そういえば何か忘れてる気がする」と気づくことがよくあります...( ᐧࡇᐧ )
静的アセットファイルをプロジェクトに追加した後は、この作業が必須ですね。

4. 変更を反映

以下のコマンドを叩きます。

flutter clean
flutter pub get
flutter run

このコマンドでビルドキャッシュの初期化、pubspec.yamlへの変更の反映、そしてビルドの実行を行います。

5. エラー解消

自分はこれでエラーが解消されました。
手順は以上になります。
参考になると嬉しいです。

Discussion