Develop/Flutter 30

[Flutter] 플러터 Google Map API 활용 예제(마커 추가, zoom)

이전에 Flutter에서 Google Map API를 활용해보았다. Flutter에서 Google Map API를 활용하는 방법에 대해서 궁금한 점이 있다면 다음 링크를 통해 알아보고 오면 좋을 것 같다. [Flutter] 플러터 Google Map API 활용 이전에 kakaomap_webview 패키지를 통해 지도를 구현해보았다. kakaomap_webview 패키지를 통해 지도를 쉽게 구현할 수 있었지만 지도의 여러 가지 기능을 코드로 작성할 때 JavaScript를 사용해야 하는 경우 fre2-dom.tistory.com 이번에는 Google Map API의 간단한 예제 코드 2개를 리뷰해보면서 구현해보자. 이번 예제 코드도 main.dart와 map_sample.dart를 통해 이루어져 있으며 ..

Develop/Flutter 2022.01.08

[Flutter] 플러터 Google Map API 활용

이전에 kakaomap_webview 패키지를 통해 지도를 구현해보았다. kakaomap_webview 패키지를 통해 지도를 쉽게 구현할 수 있었지만 지도의 여러 가지 기능을 코드로 작성할 때 JavaScript를 사용해야 하는 경우가 있었다. 다른 방법이 없을까 알아보았지만 Kakao에서 webview 말고는 Flutter에 대응하는 카카오 맵 플러그인을 개발할 계획이 없다고 했다. JavaScript를 따로 배워서 코드를 작성하기보다 다른 지도 API를 활용하는 게 더 좋을 거 같다는 생각을 해서 다른 지도 API를 알아보았다. 그중에서 Flutter를 개발한 Google에 Map API를 활용해야겠다고 생각했다. Google에 Map은 한국 한정으로 앱을 개발할 때 좋다고 생각하진 않지만 Flutt..

Develop/Flutter 2022.01.07

[Flutter] 플러터 kakaomap_webview 패키지 활용

이번에는 pub.dev에 있는 kakaomap_webview 패키지를 활용해보자. 라이브러리 우선 Kakao 오픈 api 키를 사용하기 위해 다음 링크에 들어가 카카오 계정으로 로그인한다. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 로그인을 했다면 애플리케이션 추가하기를 눌러 카카오 맵 api를 사용할 애플리케이션을 등록한다. 앱 이름과 사업자명은 자신이 원하는 이름으로 설정하여 저장한다. 성공적으로 애플리케이션을 추가했다면 내 애플리케이션 > 앱 설정 > 요약 정보에 들어가 JavaScript 키를 메모장에 작성해 놓는다. 이제 새 프로젝..

Develop/Flutter 2022.01.06

[Flutter] 플러터 Provider로 공공데이터 오픈 API 활용

이번에는 Provider로 공공데이터 오픈 API를 활용해보자. 공공데이터 오픈 API 활용 신청하는 방법은 다음 링크를 통해서 확인 후 현재 페이지에서 진행하면 될 것 같다. [kotlin] 코틀린 Android 공공데이터 오픈 API 활용(XML 문서) 이번에는 다양한 데이터가 있는 공공데이터 포털을 통해 오픈 API를 활용해려고한다. 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법 fre2-dom.tistory.com 우리가 사용할 데이터는 한국전력공사에 전기차 충전소 운영정보의 오픈 API를 통해 예제를 수행하려 한다. 아래 데이터는 XML로 이루어져 있으며, XML 데이터와 JSON 데이터 모두 수행할 수 있는 코드이기 때문에 신경 쓰지 않고 ..

Develop/Flutter 2022.01.05

[Flutter - Error] Unhandled Exception: type 'String' is not a subtype of type 'List<dynamic>' in type cast => JSON 파싱 중 한글 깨짐

json 파싱 중 한글이 깨지는 상황이 생길 수 있다. var body = await json.decode(json.encode(response.body)); print(body); 위 코드를 사용해서 한글이 깨질 경우에는 다음 코드를 통해 해결하자. var body = utf8.decode(response.bodyBytes); print(body); json 형식은 서버와 통신을 하려고 할 때 통상적으로 사용하는 형식이고 utf8 형식의 경우 문자 형식으로 공통으로 쓰기 좋아 통일할 때 사용하면 좋다. 상황에 맞춰 쓰면 될 것 같다.

Develop/Flutter 2022.01.01

[Flutter - Error] Unhandled Exception: FormatException: Unexpected character (at character 1)

xml을 파싱하는 과정에서 뜬 에러이다. var body = await json.decode(response.body); print(body); 위 코드를 다음 코드로 수정하면 에러가 사라진다. var body = utf8.decode(response.bodyBytes); print(body); 그런데 "Unhandled Exception: type 'String' is not a subtype of type 'List ' in type cast" 에러와 같이 한글이 깨지는 것을 확인할 수 있었다. 한글이 깨지는 경우는 다음 링크를 통해 해결해보자. [Flutter - Error] Unhandled Exception: type 'String' is not a subtype of type 'List' in..

Develop/Flutter 2022.01.01

[Flutter] 플러터 MultiProvider를 통해 BottomNavigationBar 구현

이전에 Provider를 통해 count를 하는 UI를 구현해보았다. Provider에 대해서 잘 모른다면 다음 링크를 통해 알아보면 좋을 것 같다. [Flutter] 플러터 ChangeNotifierProvider를 통해 Provider 구현 이번에는 ChangeNotifierProvider를 통해 Provider를 구현해보자. ChangeNotifier는 Flutter SDK에 포함된 클래스로 청취자에게 변경 알림을 제공해주는 것이다. 즉, ChangeNotifier를 통해 변화에 대해 구독할 수.. fre2-dom.tistory.com 이번에는 2개 이상의 Provider를 사용하기 위해 MultiProvider를 사용하면서 BottomNavigationBar를 구현해보도록 하자. 코드의 이해를 돕..

Develop/Flutter 2021.12.30

[Flutter] 플러터 Bloc 패턴 구현

이번에는 Flutter에 Bloc 패턴에 대해서 알아보고 구현해보자. 이전에도 설명했듯이 Bloc 패턴의 목적은 상태 관리, UI와 비즈니스 로직의 분리를 하기 위한 것이다. [Flutter] 플러터 Bloc 패턴과 Provider 패턴 Flutter 앱을 개발하다 보면 자주 등장하는 Bloc 패턴과 Provider 패턴에 대해서 간단하게 알아보자. Bloc 패턴은 Google 개발자가 권장하는 Flutter의 상태 관리 시스템이다. 프로젝트를 관리하는데 도움 fre2-dom.tistory.com Bloc 패턴이 상태 관리, UI와 비즈니스 로직의 분리를 해준다는 것은 알겠는데, 그러면 우리는 왜 Bloc 패턴을 써야 하는가? 의문이 들 수 있다. 예를 들어 배포를 위한 앱을 개발할 때 복잡한 구조의 위..

Develop/Flutter 2021.12.27

[Flutter - Error] INSTALL_FAILED_INSUFFICIENT_STORAGE

INSTALL_FAILED_INSUFFICIENT_STORAGE와 같은 에러가 나온다면 에뮬레이터의 저장 공간이 부족한 것으로 에뮬레이터 저장 공간을 늘려주거나 에뮬레이터 안에 있는 앱을 제거해주면 된다. 그렇다면 에뮬레이터 저장 공간을 늘려주는 방법을 알아보자. 에뮬레이터를 확인하기 위해 AVD Manager을 클릭한다. AVD Manager를 클릭하면 다음 이미지처럼 에뮬레이터들이 나온다. 여기서 저장공간을 늘릴 에뮬레이터에 Edit를 클릭한다. 해당 에뮬레이터를 편집하기 위해 Show Advanced Settings를 클릭한다. 클릭 후 스크롤을 통해 아래로 내리게 되면 Internal Storage가 나오게 된다. 원하는 만큼 용량을 늘린 후 Finish를 클릭 해 에뮬레이터를 편집한다. 편집이 ..

Develop/Flutter 2021.12.24