毎日Flutter生活 Advent Calendar 2025 の14日目です![]()
こんにちは!tatata-keshiです![]()
Flutterアプリを開発していると、APIキーやエンドポイントURLなど、
コードに直接書きたくない値を扱う場面がよくあります。
この記事では、Flutterで flutter_dotenv パッケージを使って
環境変数を管理する方法を、導入から実装例まで分かりやすく解説します。
なぜ環境変数を使うのか?
以下のような値をソースコードに直書きするのは避けたいですよね。
- APIキー
- Firebase / Supabase の設定値
- 本番・開発で切り替えたいURL
// ❌ 非推奨
const apiKey = "AIzaSyXXXXXX";
理由としては:
- GitHubなどに公開すると漏洩リスクがある
- 環境ごとの切り替えが大変
- 保守性が下がる
→ これを解決するのが flutter_dotenv です。
flutter_dotenv とは?
flutter_dotenv は、
.env ファイルに定義した環境変数をFlutterアプリ内で読み込める パッケージです。
-
.envにキーと値を書く - アプリ起動時に読み込む
-
dotenv.env['KEY']で参照する
というシンプルな仕組みになっています。
1. パッケージのインストール
まずは pubspec.yaml に依存関係を追加します。
dependencies:
flutter:
sdk: flutter
flutter_dotenv: ^5.1.0
その後、パッケージを取得します。
flutter pub get
2. .env ファイルを作成する
プロジェクトのルートに .env ファイルを作成します。
API_BASE_URL=https://api.example.com
API_KEY=your_api_key_here
⚠️ 注意点
- クォート(")は不要
- = の前後にスペースを入れない
- UTF-8で保存する
3. .env を pubspec.yaml に登録する
Flutterでは、アセットとして明示的に指定する必要があります。
flutter:
assets:
- .env
4. アプリ起動時に環境変数を読み込む
main.dart で dotenv.load() を runApp より前 に実行します。
import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await dotenv.load(fileName: ".env");
runApp(const MyApp());
}
5. 環境変数を使う
環境変数は以下のように取得できます。
final apiUrl = dotenv.env['API_BASE_URL'];
final apiKey = dotenv.env['API_KEY'];
null安全に扱う例
final apiUrl = dotenv.env['API_BASE_URL'] ?? '';
もしくは必須の場合:
final apiUrl = dotenv.env['API_BASE_URL']!;
6. 実践例:API通信で使う
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:http/http.dart' as http;
Future<void> fetchData() async {
final baseUrl = dotenv.env['API_BASE_URL']!;
final apiKey = dotenv.env['API_KEY']!;
final response = await http.get(
Uri.parse('$baseUrl/data'),
headers: {
'Authorization': 'Bearer $apiKey',
},
);
if (response.statusCode == 200) {
// 成功時の処理
}
}
7. .env をGit管理から除外する
超重要です。
.env は必ず .gitignore に追加しましょう。
.env
また、共有用に .env.example を用意すると親切です。
API_BASE_URL=
API_KEY=
8. 環境別(開発 / 本番)で分けたい場合
.env.dev
.env.prod
await dotenv.load(
fileName: kReleaseMode ? ".env.prod" : ".env.dev",
);
注意事項(重要)
- Flutter Webでは完全な秘匿はできません
- ビルド後のJSから参照可能
- あくまで「直書き回避」レベルの対策
- 本当に秘匿したい情報は バックエンド側で管理 しましょう
まとめ
-
flutter_dotenvを使うと環境変数管理が簡単になる - APIキーやURLの直書きを避けられる
-
.envのGit管理除外は必須 - Flutter Webでは使い方に注意
Flutterアプリのセキュリティ・保守性を高めるためにも、
ぜひ flutter_dotenv を活用してみてください 🚀