Zenn
🔐

dartdefineで接続先のAPIを変更する

2024/11/27に公開
Flutter
Dart
http
env
tech

本番とテスト環境を分ける

.envのファイルを本番用とテスト用で接続するAPIのURLを変更する方法が知りたくて調べていたところ参考になりそうな記事があり試してみました。

https://qiita.com/tai_miya/items/c110ab56e1b398250a9e

https://pub.dev/packages/flutter_dotenv

環境変数を設定する

スクリプトによって接続先を変更するURLを設定します。.envに設定する。

# dev(開発)環境
DEFINE_DEV_BASE_URL='https://jsonplaceholder.typicode.com/users/1'

# production（本番）環境
DEFINE_PROD_BASE_URL='https://jsonplaceholder.typicode.com/users/2'

切り替える設定ファイルを作る

実行するコマンドで接続先を変更する設定ファイルを作成する。これだけで切り替えることができる。

import 'package:flutter_dotenv/flutter_dotenv.dart';

const String flavor = String.fromEnvironment('FLAVOR');

final variablesDev = {
  'baseUrl': dotenv.env['DEFINE_DEV_BASE_URL'],
};

final variablesProd = {
  'baseUrl': dotenv.env['DEFINE_PROD_BASE_URL'],
};

Map<String, dynamic> get environment {
  if (flavor == 'dev') {
    return variablesDev;
  }
  if (flavor == 'prod') {
    return variablesProd;
  }
  throw UnimplementedError('baseUrl: $flavor is unknown value');
}

実行するファイル

別のファイルに定義したゲッターを呼び出すと本番用かテスト用の環境変数を実行することができます。

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

void 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(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final String path = environment['baseUrl'].toString();
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(path, 
              style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 30),)
          ],
        ),
      ),
    );
  }
}

launch.jsonを作成する

毎回コマンドを実行するの大変なのでボタン押して切り替えることができるようにしておく。

こちらのファイルをコピー＆ペーストして保存すると設定が自動でされる。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flutter Dev",
            "request": "launch",
            "type": "dart",
            "flutterMode": "debug",
            "args": [
                "--dart-define=FLAVOR=dev"
            ],
            "program": "lib/main.dart"
        },
        {
            "name": "Flutter Prod",
            "request": "launch",
            "type": "dart",
            "flutterMode": "debug",
            "args": [
                "--dart-define=FLAVOR=prod"
            ],
            "program": "lib/main.dart"
        }
    ],
    "compounds": []
}

Dev

Prod

まとめ

本番とテスト環境でURLを変更したいことがあります。その場合はDartdefineを使用して環境変数に保存したURLを本番とテストに切り替えて参照すると実現できます。

URLを切り替えてAPIから取得するデータを変更するデモアプリのソースコードも用意しました。気になる方は試してみてください。

https://github.com/sakurakotubaki/dartdefine_demo

Discussion