Flutter

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

s_hoonee 2023. 11. 21. 18:00
반응형

소개

플러터(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');
    }
  }