Flutter 기본-11. Null Safety, 날씨앱 만들기 기본

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다.

https://www.youtube.com/@codingchef

코딩셰프

 

---

 

 

1. null safety

 

Flutter 2 버전부터 null safety mode를 지원하게 되었다. nullable 하지 않은 값을 선언했는데 null이 들어올 위험이 있으면 compile 에러를 낸다. 특히 class 안의 변수는 생성과 동시에 반드시 초기화 해줘야한다. 아니면 아래의 nullable 처리들을 해줘야한다.

 

nullalble 처리

• 타입 뒤에 물음표 ?를 붙여주면 null safety 기능이 적용된 상황에서도 nullable함을 표시해줄 수는 있다.
• 나중에 할당되는 변수라면 타입 앞에 late 키워드를 붙여주면 된다.
• nullable로 선언된 변수이나 코드 진행 부분에서 확실히 non-nullable이고 non-nullable 타입에 할당한다면 변수명뒤에 느낌표 !(exclamation mark)를 붙여주면 된다.
• 파라미터의 앞에는 required를 붙여 non-nullable 타입을 설정할 수 있다.

 

Class 내부에서 ?, required, late 사용

생성자에서 {this.name, this.age} 는 name=this.name, age=this.age 로 지정해주는 역할을 하는데, nullable한 값일 수 있어서 아래처럼 에러가 난다. nullable하게 처리하려면 타입 뒤에 물음표를, 필수로 처리하려면 타입 앞에 required를 써줘야한다.

 

 

 

 

 

 

runtime에 값이 지정될 것이라면 late 키워드를 적용하면 된다.

 

 

 

 

이외에도 다양한 예제가 아래 다트 공식 사이트 codelabs에 있으니 참고해서 공부하면 된다.

 

https://dart.dev/codelabs/null-safety

 

 

 

 

 

 

2. 날씨앱 만들기

 

외부 API에서 데이터들을 받아와서 사용자의 지역의 날씨 정보를 보여주는 앱을 만든다. 처음에는 loading 화면으로 Get my location 버튼만 있다가, 사용자가 위치 데이터 접근을 허용하면 지역, 온도, 기상, 미세먼지 등 다양한 정보를 보여주는 화면으로 넘어가게 만들 것이다. 기본 앱 화면은 아래와 같다.

 

이때까지 배운 내용들을 더듬어가며 직접 만들어보는 것이 중요할 것 같다. 최소한으로 필요한 정보들만 가지고 아래 화면을 구현해본다.

 

 

1. 위치 라이브러리 : geolocator

라이브러리들은 https://pub.dev/에서 받을 수 있다. pub.dev는 플러터, 다트 관련 라이브러리들이 저장된 저장소이다.

pubspec.yaml/dependencies 아래에 geolocator 버전을 작성해주고 pub get 으로 업데이트한다.

https://pub.dev/packages/geolocator

 

import 해준다.

import 'package:geolocator/geolocator.dart';

 

Geolocator.getCurrentPosition을 적용하여 위치를 얻어올 수 있다. 앞서 배웠던 async/await를 적용해야한다. pub.dev에 있는 geolocator의 example 코드를 거의 복사해오면 된다. 여기서 getCurrentPosition으로 위치값을 얻어오기 전에 checkPermission을 하는 부분들이 있는데, 이것은 위치 권한 허용 동의를 위한 조건문들이다.

 

위치 권한 허용 동의

앱에서 위치 정보를 알려면 반드시 동의 과정을 거쳐야 한다. geolocator 페이지의 Usage 항목에서 각 운영 체제에 맞게 앱 사용 권한 동의를 구할 수 있는 코드를 넣어줘야한다.

iOS의 경우 ios/Runner/info.plist의 dict에 key-String pair들을 넣어주면 된다고 되어있다.

 

화면상에서 Get My Location 버튼을 누르면 위치 정보가 출력되도록 해본다.

 

 

2. initState()

 

Stateful 위젯은 Stateless + State 위젯의 형태라고 배웠다. State는 Lifecycle을 가지며, State 위젯 내부에서 initState 메서드를 override하면 Stateful 위젯이 생성됨과 동시에 처리할 작업들을 선언할 수 있다. 이외에도 build, dispose, deactivate method 등이 있다.

 

initState를 활용하면 Get My Location 버튼을 누르지 않아도 자동으로 다른 화면으로 넘어가게 만들 수 있다.

 

 

 

3. http, 날씨 API 사이트 : OpenWeather

 

http

pub.dev에 가서 http를 검색한다. geolocator를 import 했을 때처럼 http를 import하고 아래 OpenWeather에서 정보를 얻어오면 된다.

 

geolocator로 얻어온 위도(latitude), 경도(longitude) 정보 -> OpenWeather의 쿼리 스트링으로 전달하여 날씨 정보 받아오기

 

순서대로 적용해보면 된다!

 

 

OpenWeather

 

https://openweathermap.org/current

무료이다. 그렇기 때문에 데이터가 완전히 정확하지는 않다.

회원 가입 후 apikey를 얻어오고, 데이터 양식을 참고로해서 날씨 정보를 json으로 받아오면 된다.

 

 

4. dart:convert, JsonDecode

데이터를 정상적으로 받아오는데까지 성공했다면, dart:convert 라이브러리를 import 한다. 그리고 JsonDecode로 json 데이터를 직렬화하면 된다. JsonDecode 결과는 String, int, double 등 다양한 타입들이 있을 수 있어서 dynamic 타입이다. 그래서 var 타입 키워드로 지정해줘야한다.

 

import 'dart:convert';

var jsonData = jsonDecode(response.body);

 

 

해당 내용들을 바탕으로 1차적으로 앱을 구성해보고, 잘 안되는 부분들에 대해서 다음 글에서 자세한 개념과 코드를 익혀본다.