1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Flutter】 flutter_dotenv を使って環境変数を安全に管理する方法(毎日Flutter生活14日目)

Last updated at Posted at 2025-12-18

こんにちは!tatata-keshiです:smiley:

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 に依存関係を追加します。

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?