본문 바로가기
Flutter

[Flutter] 플러터 .env 파일로 API 키 관리하기

by s_hoonee 2023. 11. 21.
반응형

소개

플러터(Flutter) 애플리케이션에서 민감한 정보나 API 키와 같은 중요한 값들은 소스 코드에 직접 하드코딩하는 것은 좋지 않습니다. 이러한 정보들을 외부 환경 변수로 관리하여 보안을 강화하고, 유지보수를 쉽게 할 수 있습니다. 이 블로그에서는 Flutter 프로젝트에서 .env 파일을 활용하여 API 키를 안전하게 관리하는 방법에 대해 알아보겠습니다. 

마지막으로 .env파일은 깃이그노어로 빼주시면 아~주 간편하게 API KEY관리가 가능합니다.

1. dotenv 패키지 설치

dependencies:
  dotenv: ^5.1.0

https://pub.dev/packages/flutter_dotenv

 

flutter_dotenv | Flutter Package

Easily configure any flutter application with global variables using a `.env` file.

pub.dev

2. 패키지 임포트 하기

import 'package:flutter_dotenv/flutter_dotenv.dart';

3. .env 파일 생성하고 API Key 추가하기

 

.env 파일 안에 아래 처럼 API Key를 삽입합니다.

 

 

 

4. 애플리케이션의 진입점(main.dart 등)에서 dotenv를 초기화해야 합니다. 

void main() async {
 // env 파일 초기화
  await dotenv.load();
  runApp(MyApp());
}

 

5. API Key 불러서 사용하기 예시

class _LocationInputState extends State<LocationInput> {

  // Google Maps API Key 가져오기 !
  final String _apiKey = dotenv.env['GOOGLE_MAP_API_KEY']!;

}

 

아래와 같이 "_apiKey"  변수를 api 호출할 때 들어가는 key 부분에 넣어서 사용하시면 됩니다!!! 

  // 좌표로 주소를 가져오는 메서드
  Future<void> _getGooglecoo(double lat, double lon) async {
    final uri = Uri.parse('$_host?key=$_apiKey&latlng=$lat,$lon&language=ko');

    http.Response response = await http.get(uri);
    final responseJson = json.decode(response.body);

    // 결과가 있으면 주소를 가져옵니다.
    if (responseJson['results'] != null && responseJson['results'].length > 0) {
      final addressComponents =
          responseJson['results'][0]['address_components'];

      // 컴포넌트가 역순으로 생성되기 때문에 그걸 역순으로 가져올 리스트
      List<String> reversedAddressComponents = [];

      // 국가와 인천시는 제외하고 가져오기
      // ex) 123-12 인하로 미추홀구 --> 미추홀구 인하로 123-12)
      for (var i = addressComponents.length - 1; i >= 0; i--) {
        var component = addressComponents[i];
        if (component['types'].contains('country') ||
            component['long_name'] == 'Incheon') {
          continue;
        }
        reversedAddressComponents.add(component['long_name']);
      }
      // 공백으로 연결
      String reversedFormattedAddress = reversedAddressComponents.join(' ');

      // 텍스트필드에 주소를 대입
      setState(() {
        _address = reversedFormattedAddress;
        searchedPosition = LatLng(lat, lon);
      });
    } else {
      print('No results found');
    }
  }