IoT DEV

https://github.com/cjk09083/ftweather 이번 포스팅에서는 마커 ListView를 좌우로 슬라이딩해서 이름변경 /삭제 기능을 추가해보자. 1. Slidable 위젯 추가 Slide Action을 추가하기 위해 Dismissible 위젯을 사용하려고 했으나 해당 위젯은 슬라이드 이후 자동으로 위젯이 삭제되는 기능을 OFF할수가 없었다. 다른 위젯을 알아보던 도중 Slidable(https://pub.dev/packages/flutter_slidable) 위젯이 적합하다고 판단하여 해당 위젯을 사용하였다. 먼저 pubspec.yaml에 해당 플러그인을 추가하고 Pub get 해준다. # pubspec.yaml dependencies: flutter: sdk: flutter flut..

https://github.com/cjk09083/ftweather 이번 포스팅에서는 MarkerList에 저장된 Marker들의 순서를 ListView 드래그로 변경해보자. - 이를 위해 Flutter에서 제공하는 ReorderableListView 위젯을 사용하였다. 1. ReorderableListView 위젯 추가 MarkerList의 Build부분을 아래와 같이 수정한다. 1) onReorder와 children 속성은 필수로 작성되어야 한다. 2) 각 리스트의 위치 구분을 위해 리스트 최상단 위젯인 GestureDetector 마다 key 를 부여해준다. # MarkerList.dart @override Widget build(BuildContext context) { final mapMode..

https://github.com/cjk09083/ftweather 기존에 개발한 마커 추가방법은 현재 NaverMaps Camera에서 중앙 좌표를 가져와서 맵 중앙에 마커를 추가하는 방식이였다. 하지만 이 방법은 마커가 추가될 위치를 미리 확인하기 어려운 문제가 있다. 따라서 이번 포스팅에서는 맵을 클릭시 클릭한 곳을 특정한 이미지로 표시하고 addMarker 버튼 클릭시 표시된 좌표에 마커를 추가할 수 있도록 수정하였다. 1. onTab 이벤트에 마커 생성 함수 추가 먼저 선택한 좌표에 생성될 NMarker selAreaMarker를 정의하고 NaverMap의 onTap 이벤트에서 좌표를 수신받아 마커를 추가한다. 마커 생성시 기존에 생성되어있는 selAreaMarker가 있었다면 이를 제거하고 현..

https://github.com/cjk09083/ftweather 지난번 포스팅 까진 개발이 중단된 NaverMap (https://github.com/LBSTECH/naver_map_plugin) 플러그인을 사용중이였으나, 해당 플러그인에는 카메라 이동이 안되는 치명적인 오류가 있었다. 마침 찾아놨었던 새로운 플러그인 (https://pub.dev/packages/flutter_naver_map) v1.0이 출시되어 해당 라이브러리로 업데이트 하고 카메라 이동 기능을 추가하였다. API 문서 : https://note11.dev/flutter_naver_map/ 1. 플러그인 변경 pubspec.yaml에서 기존 플러그인을 제거하고 새로운 플러그인을 추가해준다. dependencies: flutter..

https://github.com/cjk09083/ftweather 이번 포스트에서는 날씨앱에 Shared Preferences 기능을 추가하여 맵에 추가한 마커들을 저장해두고, 앱 실행 시 불러오도록 하였다. 1. Shared Preferences 추가 pubspec.yaml에 아래와 같이 패키지 추가 후 Pub get 해준다. dependencies: flutter: sdk: flutter shared_preferences: ^2.0.9 2. 마커 목록 (markers) 저장 아래와 같이 마커 추가 함수인 _createMarker 마지막에 새로운 마커가 추가된 마커목록 _markers를 json형태로 바꿔 저장한다. // 마커 생성 및 목록에 추가하는 메서드 void _createMarker(Stri..

https://github.com/cjk09083/ftweather 이번 포스트에서는 지도 하단에 ListView를 만들어서 지도에서 추가한 Marker들의 정보를 리스트로 확인해보자. 1. ListView 추가 Home.dart에 아래와 같이 ListView를 추가하고 Marker추가를 위한 버튼을 Stack과 Positioned 위젯을 사용해 NaverMap 위에 겹치도록 수정한다. import 'package:flutter/material.dart'; import 'package:ftweather/provider/MapModel.dart'; import 'package:naver_map_plugin/naver_map_plugin.dart'; import 'package:provider/provide..

https://github.com/cjk09083/ftweather 이전 FCM 기능 추가 과정에서 main.dart에 모든 함수와 설정을 추가해 가독성이 좋지못하게 되었다. 따라서 이번 기회에 파일을 여러개로 나누어 각 디렉토리에 분류하였다. lib 디렉토리 구조: config -> firebase_option.dart : firebase cli 에서 생성된 firebase option handler -> FcmHandler.dart : fcm 관련 선언과 함수 manager -> FcmManager.dart : Firebase core 및 message 초기화 -> RequestManager.dart : 권한 요청 (위치) model -> MapModel.dart : Naver Maps 관련 prov..

https://github.com/cjk09083/ftweather 지난 포스트에서는 Flutter 앱에 Android fcm 기능을 추가하였다. 이번엔 iOS에서도 fcm 수신 후 알림 기능을 추가해보자. 먼저 Flutter에 firebase cli 추가 방법은 지난 포스트를 참고하자 (https://cjk09083.tistory.com/57) 그리고 iOS를 위한 추가 설정을 진행하자 1. iOS 파일들을 수정 # Info.plist에 key 추가 UIBackgroundModes fetch remote-notification # AppDelegate.swift import UIKit import Flutter @UIApplicationMain @objc class AppDelegate: Flutter..

https://github.com/cjk09083/ftweather Flutter에 fcm 알림 기능을 추가해보자 1. 먼저 firebase 콘솔에서 앱을 생성한다. https://console.firebase.google.com/ 2. 앱 생성 후 firebase 추가하기에서 아래 그림과 같이 flutter를 선택한다. 3. 안내에 따라 Firebase cli를 설치 및 실행한다. # 자동 설치 스크립트를 사용하여 Firebase CLI를 설치 curl -sL https://firebase.tools | bash # Firebase Login firebase login # FlutterFire CLI 설치 dart pub global activate flutterfire_cli # 경로 경고시 expo..

https://github.com/cjk09083/ftweather 이전 포스트에서 Provider 라이브러리 추가 및 빌드를 성공하였다. 이번엔 Flutter 앱에 Naver maps를 추가하고 현재위치를 마커로 나타내보자. 기존에 사용하면 naver map 라이브러리 (https://github.com/LBSTECH/naver_map_plugin) 가 지원이 중단돼 새로운 라이브러리를 찾아보니 https://pub.dev/packages/flutter_naver_map 라이브러리가 개발중이였다. 다만 아직 베타버전이기 때문에 1.0 버전이 정식 출시되면 이전하도록 하고 이번 포스팅에선 기존 라이브러리 (LBSTECH)를 사용하였다. 1. 먼저 pubspec.yaml에 Dependencies 를 추가해..