Flutter (156) 썸네일형 리스트형 [Flutter] Clone - 당근마켓49(Chat - 1) 이번에는 채팅 관련 함수들 및 채팅 화면 추가를 구현해 보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 구현은 아래와 같습니다. ./src/repo/chat_service.dart - 채팅관련 함수들 추가(채팅룸 생성, 채팅생성, 채팅룸 연결 등등) import 'dart:async'; import 'package:cloud_firestore/cloud_firestore.dart'; import '../constants/data_keys.dart'; import '../models/chat_model.dart'; import '../models/chatroom_model.dart'; class ChatService { // 싱글톤 패턴 적용 static final.. [Flutter] Clone - 당근마켓48(chatroomModel, chatModel) 이번에는 채팅창을 구현하기 위한 채팅룸과 각 채팅메시지에 대한 모델링 구현해 보겠습니다. 여기서는 "https://app.quicktype.io" 을 이용하여 모델을 구현했습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 "https://app.quicktype.io" 을 이용한 모델링 방법은 아래 링크를 참고하세요 2022.06.30 - [Flutter/04 Widgets] - [Flutter] Widgets - Google map 2 [Flutter] Widgets - Google map 2 이번 카테고리는 google map 을 사용하는 방법에 대해서 알아보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 소스코드 위치 - https:/.. [Flutter] Clone - 당근마켓47 번외(googleMap - 1) 지난번에 구현한 구글 지도를 다른 패키지를 사용해서 구현해 보겠습니다. 로딩 및 drag 기능을 추가해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현 화면은 아래와 같습니다. - 게시글 제목이 같은 동일한 게시글입니다. 다만, 이미지는 랜덤이라서 다를수 있습니다. 첫번째 스크린 - map/latlng 패키지로 구현 두번째 스크린 - google_maps_flutter 패키지로 구현 세번째 스크린 - 지도에서 클릭한 마커의 상세 페이지 새로운 패키지(google_maps_flutter)에는 강력한 기능들이 많지만 오늘은 기본적인 부분만 확인해 보았습니다. google_maps_flutter 패키지로 구현한 화면은 화면 이동이 조금 더 부드럽다, 하지만 이미지 사이즈.. [Flutter] Clone - 당근마켓46(Map - 3) 이번에는 지도에 화면 중간을 기준으로 특정 거리 이내에 (작성자 위치기준)위치한 게시글을 화면에 표시해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현한 화면은 아래와 같습니다. 붉은 마커는 로그인 사용자 위치이고 검은색 마커는 테스트용 마커입니다. ./src/repo/item_service.dart - 메소드 추가, 특정 위치 주변의 게시글 검색(위도/경도 기반으로 검색) Future getNearByItems(String userKey, LatLng latLng) async { // GeoFlutterFire is an open-source library that allows you to store // and query firestore documents ba.. [Flutter] Clone - 당근마켓45(Map - 2) 이번에는 구글 지도에 마커를 추가해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현한 화면은 아래와 같습니다. ./src/screens/near/map_screen.dart - userModel 을 파라미터로 전달하여 사용자 위치에 마커를 표시 import 'package:apple_market3/src/models/user_model.dart'; import 'package:extended_image/extended_image.dart'; import 'package:flutter/material.dart'; import 'package:latlng/latlng.dart'; import 'package:map/map.dart'; class MapScreen ext.. [Flutter] Clone - 당근마켓44(Map - 1) 이번에는 Near 화면에 구글 지도 로딩 및 drag 기능을 추가해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현 화면은 아래와 같습니다. 필요한 패키지는 아래와 같습니다. map: ^1.3.3 latlng: ^0.2.0 ./src/screens/near/map_screen.dart import 'package:extended_image/extended_image.dart'; import 'package:flutter/material.dart'; import 'package:latlng/latlng.dart'; import 'package:map/map.dart'; class MapScreen extends StatefulWidget { const MapScree.. [Flutter] Clone - 당근마켓43(Item detail & PageView) - 5 이번에는 게시글 작성자의 다른 게시글을 하단에 추가해보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현 전/후 화면은 아래와 같습니다. ./src/repo/item_service.dart - 유저 정보 하위에 저장된 글정보 가져오는 함수 추가 Future getUserItems({required String userKey, String? itemKey}) async { CollectionReference collectionReference = FirebaseFirestore.instance.collection(COL_USERS).doc(userKey).collection(COL_USER_ITEMS); QuerySnapshot snapshots = await colle.. [Flutter] Clone - 당근마켓42(Item detail & PageView) - 4 지난번에는 title 로 구현한 인디케이터를 숨기기 위해서 Scaffold 를 추가, LinearGradient 를 구현했었습니다. 이번에는 게시글의 상세 정보를 화면에 표시 및 Custom bottomNavigationBar 구현해 보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 구현 전/후 하면은 아래와 같습니다. ./src/screens/home/item_detail_page.dart - 전체 코드는 아래 "더보기" 를 클릭하세요 더보기 import 'package:apple_market3/src/states/category_controller.dart'; import 'package:extended_image/extended_image.dart'; import .. 이전 1 2 3 4 5 ··· 20 다음
