Flutterでdotenvを利用して環境変数を管理する方法

2022.10.03

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部の高橋雄大です。

Node.jsやTypeScriptなどで多く使われてきたdotenvをFlutterでも活用してみたいと思います。

本記事のゴール

.envファイルで環境変数を定義して、Flutterアプリで環境変数を出力します。

FlutterとVS Codeとdotenv

環境情報

項目 内容
OS macOS Monterey 12.6 (21G115)
Visual Studio Code 1.71.2
Xcode 14.0.1 (14A400)
Flutter 3.3.3
Dart 2.18.2

dotenvをインストール

flutter_dotenvのパッケージをインストールします。

flutter pub add flutter_dotenv

.envファイルを作成

環境変数を管理するためのファイルを作成します。

.env

VAR_NAME ="dummyValue"

ファイルをgitで管理しない場合は.gitignoreに追加しておきます。

.gitignore

〜〜〜
.env

.envファイルをアセットに追加

Flutterアプリからファイルを読み込めるようにするために、pubspec.yamlassetsへ.envファイルを追加します。

pubspec.yaml

  assets:
     - .env

環境変数を読み込み

.envファイルをFlutterアプリで読み込みます。

lib/main.dart

import 'package:flutter_dotenv/flutter_dotenv.dart';

Future main() async {
  await dotenv.load(fileName: '.env');
  //...runapp
}

環境変数を呼び出し

.envファイルで定義した環境変数を呼び出します。

lib/main.dart

import 'package:flutter_dotenv/flutter_dotenv.dart';
〜〜〜
print(dotenv.get('VAR_NAME'));

実用編

実際に.envファイルで定義した環境変数をアプリで出力する例を書いてみます。

lib/main.dart

import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:flutter/material.dart';

Future main() async {
  await dotenv.load(fileName: '.env');

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                'VAR_NAME: ',
                style: TextStyle(fontSize: 16),
              ),
              Text(
                dotenv.get('VAR_NAME'),
                style: const TextStyle(fontSize: 16),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

アプリを起動すると環境変数が出力されていることを確認できます。

Flutterでdotenv

ロード時に既存の変数等をマージする場合はmergeWithを追加します。

await dotenv.load(fileName: '.env', mergeWith: {
  'CLIENT_ID': 'dummyClientId',
});

注意事項

アプリケーションを公開する場合.envで定義した環境変数は誰でも参照することができます。そのため機密情報を含めることはできません。

参考資料