flutter앱개발과정 (32) 썸네일형 리스트형 flutter 심화 GoRouter Flutter GoRouter 기존에는 Navigator로 라우팅을 처리했었는데, 페이지가 많아지니까 코드가 지저분해지고 관리하기가 힘들었다. 그런데 GoRouter를 쓰니까 구조도 깔끔하고 생각보다 너무 편하다고 느껴졌다. GoRouterFlutter용 라우팅 도우미.화면 전환할 때 URL 기반으로도 되고, 구조화도 잘되고, context.go() 이런 식으로 라우팅도 간편하게 처리할 수 있음.내가 느낀 장점은 딱 이거다:코드 깔끔해짐웹/앱 둘 다 호환 잘됨구조가 눈에 잘 보임나중에 수정할 때 훨씬 쉽다 설치dependencies: go_router: ^6.0.0 또는 터미널에서 flutter pub add go_router예제final GoRouter _router = GoRouter.. 운동하실? 앱 - Map 페이지 흐름 정리 1. 지도 페이지가 열리면동작 흐름Flutter NaverMap 위젯이 준비되면서 onMapReady가 호출된다.지도 컨트롤러(mapController)를 초기화한다.Firestore에서 게시글(boards) 데이터를 불러온다.boards의 위치 데이터를 좌표로 변환해서 지도에 마커를 표시한다.* 관련코드NaverMap( onMapReady: (controller) async { // 지도 준비 완료되면 viewModel.mapController = controller; // Firestore에서 boards 불러오기 await viewModel.loadBoards(); // boards 데이터 기반으로 지도에 마커 추가 await viewModel.addMarkers((Board board) { // .. Flutter 버전 업데이트 방법 Flutter 개발하다 보면 버전 업데이트할 일이 꼭 생긴다!여기서는 FVM 없이, Flutter 기본 방법으로 업데이트해볼 것이다.1. Flutter 설치 경로 확인하기Flutter는 따로 설치 프로그램이 있는 게 아니라,그냥 SDK 폴더를 받아서 쓰는 구조이다설치 경로 예시Mac: /Users/본인계정명/flutterWindows: C:\src\flutter만약 경로를 모르면 터미널에which flutter(Mac)또는where flutter(Windows) 입력해서 찾을 수 있다!2. Flutter 버전 업데이트 순서2-1. Flutter SDK 폴더로 이동터미널(또는 CMD)에서 Flutter 설치 경로로 이동한다.cd (Flutter 설치 경로) cd ~/flutter 2-2. 최신 버전 코드 .. flutter_naver_map 초기 설정 방법 이번에 wanna_exercise_app프로젝트를 하면서 지도 페이지를 담당하게 되었습니다. 1. pubspec.yaml파일에 dependencies에flutter_naver_map: ^1.3.1를 추가해준다! 줄을 잘맞춰 추가해야한다 추가한 후 flutter pub get을 해준다 2. IOS 설정터미널에서 git-lfs를 설치해 줍니다. brew install git-lfs 다음은 아래 명령어 실행git lfs install 3. 지도 초기화void main() async { WidgetsFlutterBinding.ensureInitialized(); await FlutterNaverMap().init( clientId: "ddmiypldvb", onAuthFailed: (ex) { print(ex.. 위치 검색 앱 - 트러블 슈팅(위도 경도로 주소받아왔지만 네이버 API검색 결과가 없음) - 주소는 나왔는데 네이버 검색 결과가 없을 때위도/경도로 주소를 잘 받아왔고, 네이버 지역 검색 API도 붙였는데... 검색 결과가 비어 있음! 아무것도 안 뜸!❗ 문제 상황VWorld API를 통해 주소를 잘 받아옴서울특별시 중구 태평로1가 31하지만 네이버 지역 검색 API 호출 결과는 빈 배열 []화면에는 아무것도 안 나타남 (리스트가 비어 있어서)원인네이버 검색 API는 도로명 주소보다 '장소 이름' 중심으로 작동합니다.예를 들어, 스타벅스, 서울역, 강남역 같은 상호명/지명에는 잘 작동하지만, 서울특별시 중구 태평로1가 31 같은 정확한 주소로는 검색 결과가 없을 수 있습니다.✅ 해결 방법1. 주소를 '시 + 구' 정도로 잘라서 검색어로 사용하기String fullAddress = "서울특별시.. 위치 검색 앱 -트러블 슈팅(위도 경도 위치가 외국으로 나옴) - 에뮬레이터 위치가 외국(미국)으로 나올 때Flutter 앱을 잘 만들었고, 위치 권한도 잘 받아졌는데... 앱에서 받아온 좌표를 보니 샌프란시스코였습니다.이 글은 위치 정보를 받아왔는데, 위치가 한국이 아닌 외국(미국)으로 나오는 문제의 원인과 해결법을 다룹니다.❗ 문제 상황getCurrentPosition() 호출 결과가 lat: 37.xxx, lon: -122.xxx주소 변환 API에서 오류: Exception: 주소를 찾을 수 없습니다VWorld에서는 해외 좌표를 지원하지 않음원인Flutter 앱에서 사용하는 Android Emulator, iOS Simulator는 기본 GPS 위치가 미국으로 설정되어 있습니다. 즉, 아무 설정을 안 하면 샌프란시스코나 애플 본사 근처 좌표가 들어옵니다.플랫폼.. 위치검색앱 - 트러블슈팅(Geolocator 패키지사용, 위치 권한 팝업 안뜸) - 위치 권한 팝업이 안 뜰 때Flutter에서 위치 기반 기능을 구현할 때 가장 처음 마주치는 문제 중 하나는 앱 실행 시 위치 권한을 묻는 팝업이 아예 안 뜨는 것입니다.이번 글에서는 제가 Flutter + Geolocator 패키지를 사용하며 겪었던 실제 문제와 해결 과정을 공유합니다.❗ 문제 상황앱을 실행했는데, 위치를 사용하는 코드가 있음에도 불구하고 위치 권한 요청 팝업이 뜨지 않음콘솔에는 아무런 오류도 없고, 위치 관련 기능은 동작하지 않음.원인Geolocator 패키지는 자동으로 권한을 요청해주지 않기 때문입니다. Flutter 앱 개발자가 직접 위치 권한 요청 함수를 호출해야만 시스템이 권한 팝업을 띄워줍니다.또한, iOS에서는 Info.plist에 권한 설명이 없으면 아예 요청 자체가 .. Json 직렬화 역직렬화 ✅ 직렬화 (Serialization)객체 → Map → JSON 문자열객체를 Map으로 변환 → toJson() 메서드 필요Map을 JSON 문자열로 변환 → jsonEncode() 사용import 'dart:convert';class Person { String name; int age; Person(this.name, this.age); // toJson: 객체를 Map으로 변환 Map toJson() => { 'name': name, 'age': age, };}void main() { Person person = Person('홍길동', 30); String jsonString = jsonEncode(person.toJson()); print(jsonString); /.. 이전 1 2 3 4 다음