# Flutter dotenv の基本

アプリケーションの設定や機密情報を管理するために.envは非常に便利ですね。
Flutter で開発する際にflutter_dotenv (opens new window)を導入することで.env ファイルが使えるようになります。

パッケージのインストール

flutter pub add flutter_dotenv

pubspec.yaml ファイルを編集

fultter:
  assets:
    - .env

.env ファイルの作成

BASE_URL=http://localhost

main.dart に.env ファイルの読み込みをします。

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:my_app/screens/home_screen.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 const MaterialApp(
      title: 'Flutter Demo',
      home: HomeScreen(),
    );
  }
}

api の baseUrl を設定

import 'dart:convert';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:dio/dio.dart';

class ApiService {
  final _dio = Dio(BaseOptions(
    baseUrl: dotenv.env['BASE_URL'] ?? '',
    connectTimeout: const Duration(seconds: 5), // 5秒
    receiveTimeout: const Duration(seconds: 3), // 3秒
    headers: {'Content-Type': 'application/json'},
  ));

  Future<dynamic> get(String endpoint) async {
    try {
      final response = await _dio.get(endpoint);
      return response.data;
    } on DioException catch (e) {
      throw Exception('Failed to load data: ${e.response?.statusCode}');
    }
  }

  Future<dynamic> post(String endpoint, Map<String, dynamic> data) async {
    try {
      final response = await _dio.post(
        endpoint,
        data: jsonEncode(data),
      );
      return response.data;
    } on DioException catch (e) {
      throw Exception('Failed to post data: ${e.response?.statusCode}');
    }
  }

  Future<dynamic> put(String endpoint, Map<String, dynamic> data) async {
    try {
      final response = await _dio.put(
        endpoint,
        data: jsonEncode(data),
      );
      return response.data;
    } on DioException catch (e) {
      throw Exception('Failed to update data: ${e.response?.statusCode}');
    }
  }

  Future<dynamic> delete(String endpoint) async {
    try {
      final response = await _dio.delete(endpoint);
      return response.data;
    } on DioException catch (e) {
      throw Exception('Failed to delete data: ${e.response?.statusCode}');
    }
  }
}