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

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

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

本記事のゴール

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

環境情報

dotenvをインストール

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

flutter pub add flutter_dotenv

.envファイルを作成

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

.env

VAR_NAME ="dummyValue"

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

.gitignore

〜〜〜
.env

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

Flutterアプリからファイルを読み込めるようにするために、pubspec.yamlのassetsへ.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),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

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

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

注意事項

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

参考資料

• flutter_dotenv | Flutter Package