Flutter/12 Clone 'Used Goods app' (54) 썸네일형 리스트형 [Flutter] Clone - 당근마켓53(Chat - 5) 동시 채팅 및 실제 정보 매핑 이번에는 채팅 화면에 실제 데이터를 매핑하고 동시 채팅을 실행해 보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 구현은 아래와 같습니다. 1. 내가 포함된 채팅방을 보여주는 화면 - 내가 팔거나 살려고 하는 채팅방 리스트 입니다. 게시글 제목과 마지막 메시지 등을 표시 2. 채팅방 리스트에서 클릭을 하면 해당 채팅방이 보여짐 - 상단의 아이템 정보를 실정보로 매핑(게시글제목, 금액, 가격제안 여부, 아이템 이미지 표시) 실제 메시지 구현 동영상입니다. ./src/repo/chat_service.dart - 내가 포함된 채팅방 조회 함수 Future getMyChatList(String myUserKey) async { List chatrooms = []; // t.. [Flutter] Clone - 당근마켓52(Chat - 4) 메시지 스타일 이번에는 채팅 화면을 좀 더 실제처럼 스타일을 적용해 보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 구현은 아래와 같습니다. ./src/screens/chat/chat.dart - 채팅 말풍성 위젯 import 'package:extended_image/extended_image.dart'; import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; import '../../models/chat_model.dart'; const roundedCorner = Radius.circular(20); class Chat extends StatelessWidget { final Size size; f.. [Flutter] Clone - 당근마켓51(Chat - 3) 메시지 표시 이번에는 채팅 화면에 간단하게 메시지를 표시해 보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 구현은 아래와 같습니다. ./src/screens/chat/chatroom_screen.dart class _ChatroomScreenState extends State { late String chatroomKey; final TextEditingController _textEditingController = TextEditingController(); late final ChatController chatController; @override void initState() { // TODO: implement initState chatroomKey = Get.para.. [Flutter] Clone - 당근마켓50(Chat - 2) 상단/하단 정보 표시 이번에는 채팅 화면에 입력창(하단)과 아이템 간략 정보(상단)를 표시해 보겠습니다. 개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1 화면 구현은 아래와 같습니다. ./src/models/chat_model.dart - 구현중 수정이 필요한 부분이 있어서 수정함 class ChatModel2 { String? chatKey; // 자동생성되므로 ? 처리 String msg; DateTime createdDate; String userKey; DocumentReference? reference; ChatModel2({ // required this.chatKey, // 자동생성되므로 필수처리 제외. required this.msg, required this.createdDate, re.. [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.. 이전 1 2 3 4 ··· 7 다음
