Flutter 날씨 앱 만들기(2) - 프로젝트 생성, 위치 권한 확인, 위치정보 받아오기, API Key 발급

1. 폴더 구조 소개

 

전체 적인 폴더 구조는 사진과 같습니다.

기본적으로 프로젝트를 생성하면 작성되는 main.dart 파일이 있고,

data, model, screens 3개의 폴더를 추가로 생성하여 각각의 파일들을 관리하게 됩니다.

 

아래 추가되는 내용을 따라 하나하나 수정해보셔도 좋고, 전체적인 파일을 먼저 생성해두고 (내용은 x)

따라오시는 것도 좋을 것 같습니다.

 

2. main.dart 파일 수정

: main.dart 에서는 크게 중요한 부분이 없기 때문에 간단하게 넘어가도록 하겠습니다.

import 'package:flutter/material.dart';
import 'package:flutter_weather/screens/loading.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: Loading(),
    );
  }
}

 

loading.dart : 우선 기본 코드만 생성해줍니다!

import 'package:flutter/material.dart';

class Loading extends StatefulWidget {
  const Loading({Key? key}) : super(key: key);

  @override
  _LoadingState createState() => _LoadingState();
}

class _LoadingState extends State<Loading> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

 

 

- 기본 셋팅된 주석 및 내용 제거

- screens 폴더 > loading.dart 파일 생성 후 import

- Widget build의 home에서 Loading() 추가

 

3. pubspec.yaml 파일 수정 + data 폴더 > my_location.dart 파일 생성

[주요 작업]

→ 위치 권한 확인

→ 위치정보(위도, 경도) 받아오기

# pubspec.yaml 파일 > cupertino_incons: ^x.x.x 밑에 추가

# 권한 확인
  permission_handler: ^8.3.0
  
# 위치 관련 패키지
  geolocator: ^8.0.5

 

import 'package:geolocator/geolocator.dart';
import 'package:permission_handler/permission_handler.dart';

class MyLocation {
  late double latitude2;
  late double longitude2;

  Future<void> getMyCurrentLocation() async {
  
    // 위치권한을 가지고 있는지 확인
    var status_position = await Permission.location.status;

    if (status_position.isGranted) {
      // 1-2. 권한이 있는 경우 위치정보를 받아와서 변수에 저장합니다.
      Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high);

      latitude2 = position.latitude;
      longitude2 = position.longitude;

    } else {
      // 1-3. 권한이 없는 경우
      print("위치 권한이 필요합니다.");
    }
  } // ...getMyCurrentLocation()

}

앞서 main.dart 파일에서 loading.dart 파일을 생성해주었습니다. 이번에는 loading.dart 파일에서 사용될 기능인

위치정보를 받아오는 작업을 위한 코드를 먼저 작성해야 합니다.

 

기존 코딩셰프님의 코드에서 추가로, 저는 권한 여부를 확인하는 코드를 작성했습니다.

권한이 있는 경우에는 위치정보를 요청해서 받아오도록 하고, 권한이 없는 경우에는 추가코드를 작성하지는 않았지만

실제 앱의 기능을 생각해본다면, 권한 재요청 or 앱 이용불가 안내 메시지 정도가 추가될 수 있을 것 같습니다.

 

권한 확인, 위치정보 받아오기와 관련된 플러그인은 아래 링크를 참고해주세요!

(자세한 사용 방법, 버전, import 코드 등 자세하게 적혀있습니다!)

 

위 과정이 잘이루어졌다면, pirnt("$latitidue2, $longitude2") 작성해서 실행해봤을 때 현재 위치의 위, 경도값을 확인할 수 있습니다.

 

https://pub.dev/packages/geolocator

geolocator | Flutter Package

https://pub.dev/packages/permission_handler

permission_handler | Flutter Package

 

4. API KEY 발급받기

[주요 작업]

→ 날씨정보를 받아오기 위한 API Key 발급

→ 영문으로 표시되는 지역 정보를 한글 주소로 변환 하기 위한 API Key 발급

 

날씨정보 : Open Weather(https://openweathermap.org/)

Сurrent weather and forecast - OpenWeatherMap

한글 주소 변환 : Google Map geocoding Api(https://developers.google.com/maps/documentation/geocoding/overview#ReverseGeocoding)

Overview  |  Geocoding API  |  Google Developers

(Google 같은 경우에는 Google Cloud platform 에 접속해서 프로젝트 생성, API 사용, key 발급등의 절차가 필요합니다. api key 발급과 관련한 포스팅은 추후 작성하도록 하겠습니다. key 발급에 익숙하지 않으신 분들은 다른 블로거 분들의 글을 참고하여 key 를 준비해주세요.)

 

 

첫 포스팅은 앱을 만들기 위한 사전작업 같은 과정이기 때문에 코딩 작업이 많지 않았지만..

다음 포스팅에서는 받아온 위치정보를 바탕으로 날씨정보를 가져오고, 위치 및 날씨정보를 가져오는 동안 화면이 멈춘것 처럼 보이지 않도록 로딩화면이 동작하는 기능을 구현해보겠습니다.