flutter_dotenvを使って、環境毎の切り替えをしてみよう

flutter_dotenvとは

flutter_dotenvとは、環境毎の設定を管理するパッケージです。
https://pub.dev/packages/flutter_dotenv

実際に使ってみよう

1. インストール

flutter pub add flutter_dotenvを実行してください。

2. .envファイルを準備

環境毎の.envファイルを準備します。
今回は開発環境とプロダクション環境で分けています。

.env.development

// API_SERVER変数にローカルサーバーのパスを設定する
API_SERVER = http://localhost:4010

.env.production

// API_SERVER変数に実際のAPIサーバーのパスを設定する
API_SERVER = http://localhost:4010

3. .envファイルをpubspec.yamlで指定

上記で準備した.envファイルを読み込むために、pubspec.yamlのassetsにファイル名を記載します。

pubspec.yaml

  assets:
    - .env.development
    - .env.production

4. .envファイルの読み込み

環境毎に.envファイルを読み込むために、コメントの下部２行を書いていきます。

main.dart

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

void main() async {
  // この２行に注目！！！
  const envFile = String.fromEnvironment('env');
  await dotenv.load(fileName: envFile);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text(''),
        ),
        body: const Scaffold(),
      ),
    );
  }
}

5. 環境毎の起動設定

launch.jsonに下記のコードを記載します。
今回は開発環境とプロダクション環境で実行の切り替えができるようになっています。
下記に２つのコメントを記載していますが、この起動設定をしなくても２つのコメントをコマンドラインで実行することで開発環境とプロダクション環境の実行ができます。

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
	    // flutter run --debug --dart-define=env=.env.development
            "name": "app",
            "request": "launch",
            "type": "dart",
            "flutterMode": "debug",
            "args": [
                "--dart-define",
                "env=.env.development"
            ]
        },
        {
	    // flutter run --debug --dart-define=env=.env.production
            "name": "app (release mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "release",
            "args": [
                "--dart-define",
                "env=.env.production"
            ]
        }
    ]
}

6 .envファイルの利用

下記のようにenv['API_SERVER']と/getを結合して、APIのパスを設定している。
その後に、httpクラスのgetメソッドでAPIを実行している。

http_client.dart

import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:http/http.dart' as http;
・
・
・
// APIサーバーのパスとエンドポイントを結合して、実行するAPIのパスを設定する
final url = Uri.parse(env['API_SERVER'] + "/get");
final response = await http.get(url);