Flutter/12 Clone 'Used Goods app' (54) 썸네일형 리스트형 [Flutter] Clone - 당근마켓13(Shared reference) 이번시간에는 간단한 데이터들을 디바이스에 저장했다가 로딩하는 방법에 대해서 알아하겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 추가된 패키지는 아래와 같습니다. shared_preferences: ^2.0.15 ./src/screens/start/address_page.dart - 공유 정보 저장 // 함수 추가 _saveAddressOnSharedPreference(String address, num lat, num lon) async { SharedPreferences prefs = await SharedPreferences.getInstance(); debugPrint('save Address: $address.'); await prefs.setString(SHA.. [Flutter] Clone - 당근마켓12(geocoding & reverse geocoding) 이번시간에는 주소와 위도/경도 사이의 데이터 변환에 대해서 구현하겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 원래 도로명 검색과 현재 위치 찾기에 사용하는 API 서버는 vWorld 였으나 해외에서 접근이 안되는 관계로 2개의 API 서버를 사용해서 데체할 예정입니다. 도로명 검색은 이전에 설명한대로 api 서버는 "https://www.juso.go.kr/openIndexPage.do" 사이트를 이용했습니다. 주소와 위도/경도 사이의 변환은 구글 api 서버를 사용할 예정입니다. vWorld 는 도로명 검색결과에 위도/경도 정보가 포함되어 있으나 juso 서버에는 도로명 정보만 있어서 juso 서버의 결과를 한번 더 구글 api 서버를 이용하여 위도/경도 정보를 취.. [Flutter] Clone - 당근마켓11(Address - ListView) 이번에 검색결과(도로명 주소)를 ListView 형식으로 화면에 표시해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면은 아래와 같습니다. 검색창에 단어를 입력하고 엔터 클릭시 검색결과 반환. 현재는 최대 100건만 표시하였다. ./src/screens/start/address_service.dart - 함수의 리턴 타입을 모델링 타입으로 변경함 Future searchAddressByStr(String text) async { final formData = { 'confmKey': jusoKey, 'currentPage': '1', 'countPerPage': '100', 'keyword': text, 'resultType': 'json', }; var resp .. [Flutter] Clone - 당근마켓10(Address Model) 이번에 도로명 주소를 검색하는 API 기능을 구현하겠습니다. 화면 레이아웃은 다음에 구현 예정입니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 api 서버는 "https://www.juso.go.kr/openIndexPage.do" 사이트를 이용했습니다. 주소정보누리집(도로명주소 안내시스템) 국가기초구역이란 각종 관할구역(통계, 우편, 소방, 경찰 등)을 관리하기 위해 나눈 단위 구역입니다.국가기초구역번호는 우편번호로 사용됩니다. www.juso.go.kr API 키는 여기서("https://www.juso.go.kr/addrlink/openApi/apiReqst.do") 신청하면 됩니다. 개발용 키는 본인 인증이 필요없으므로 필수정보를 대략 입력해도 발급 가능합니다. op.. [Flutter] Clone - 당근마켓9(logout) 지난번에 auth page 에서 인증 성공후 Home Screen 으로 이동하는 기능을 추가했습니다. 이번에는 반대로 Home Screen 에서 로그아웃하면 다시 auth page 로 이동하는 기능을 구현하겠습니다. (실제 사용자관리는 차후 예정). 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 흐름은 아래와 같다. 지난번 인증 받고 로그인할때 화면 이동시 Get.toNamed('/') 을 사용하여 Home Screen 화면에 리턴 버튼이 생겼다. 그래서 이번에는 Get.offAllNamed('/'); 로 변경하였다. ./src/screens/home_screen.dart class HomeScreen extends StatelessWidget { const HomeScre.. [Flutter] Clone - 당근마켓8(authorization-login) 이번에는 auth page 에서 인증 성공후 Home Screen 으로 이동하는 기능을 추가해보겠습니다 (실제 사용자관리는 차후 예정). 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 기존에 네비게이션을 beamer 와 getx 로 이중으로 진행하였는데, beamer 보다 getx 가 가성비가 좋은거 같아서 이후로는 getx 로 네비게이션을 구현할 예정입니다. 특히, beamer 의 BeamGuard 의 기능은 GetX 에서는 middlewares 로 구현 가능하다. 그래서 상태관리도 GetX 로 구현할 예정입니다. 화면 흐름은 아래와 같다. ./src/apple_app.dart - refactorying 및 initialBinding 추가 import 'package:beame.. [Flutter] Clone - 당근마켓7(PageView - auth page) 이번에는 PageView 의 내부에 auth page 를 추가해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 새로운 페이지 이름이 기존 페이지인 auth_screen 과 비슷하여 이름을 수정하였습니다. auth_screen.dart => start_screen.dart AuthScreen() => StartScreen() 화면 구성은 아래와 같습니다. 자세한 기능은 모델링도 필요하여 차후에 구현하겠습니다. 새로운 패키지 추가 - 입력값을 쉽게 검증하기 위함 flutter_multi_formatter: ^2.5.8 start_screen.dart - 새로운 페이지 추가 class StartScreen extends StatelessWidget { StartScreen(.. [Flutter] Clone - 당근마켓6(PageView - address page) 이번에는 PageView 의 내부에 address page 를 추가해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 구성은 아래와 같습니다. 자세한 기능은 모델링도 필요하여 차후에 구현하겠습니다. 상단부터 TextFormField, TextButton.icon, Expanded&ListView,builder&ListTile 로 구성되어 있습니다. 주요 파일은 아래와 같습니다. ./src/screens/auth_screen.dart ./src/screens/start/intro_page.dart ./src/screens/start/address_page.dart ./src/screens/auth_screen.dart import 'package:flutter/mat.. 이전 1 ··· 3 4 5 6 7 다음
