なぜ環境変数を使うのか？

以下のような値をソースコードに直書きするのは避けたいですよね。

APIキー
Firebase / Supabase の設定値
本番・開発で切り替えたいURL

// ❌ 非推奨
const apiKey = "AIzaSyXXXXXX";

理由としては：

GitHubなどに公開すると漏洩リスクがある
環境ごとの切り替えが大変
保守性が下がる

→ これを解決するのが flutter_dotenv です。

flutter_dotenv とは？

flutter_dotenv は、
.env ファイルに定義した環境変数をFlutterアプリ内で読み込めるパッケージです。

.env にキーと値を書く
アプリ起動時に読み込む
dotenv.env['KEY'] で参照する

というシンプルな仕組みになっています。

1. パッケージのインストール

まずは pubspec.yaml に依存関係を追加します。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_dotenv: ^5.1.0

その後、パッケージを取得します。

flutter pub get

2. .env ファイルを作成する

プロジェクトのルートに .env ファイルを作成します。

.env

API_BASE_URL=https://api.example.com
API_KEY=your_api_key_here

⚠️ 注意点

クォート（"）は不要
= の前後にスペースを入れない
UTF-8で保存する

3. .env を pubspec.yaml に登録する

Flutterでは、アセットとして明示的に指定する必要があります。

pubspec.yaml

flutter:
  assets:
    - .env

4. アプリ起動時に環境変数を読み込む

main.dart で dotenv.load() を runApp より前 に実行します。

main.dart

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 に追加しましょう。

.gitignore

.env

また、共有用に .env.example を用意すると親切です。

.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 を活用してみてください 🚀