Flutter (122) 썸네일형 리스트형 [Flutter] MacOS - Flutter 개발환경 준비 이번에는 맥북에 flutter 환경을 설정하는 방법에 대해서 알아보겠습니다. 맥북 버전은 12.6.2 몬트레이 입니다. 기본적인 방법은 "https://docs.flutter.dev/get-started/install/macos" 사이트를 참고로 하였습니다. 1. Xcode 설치 - https://developer.apple.com/xcode/, 에 접속하여 xcode 14 를 앱스토어를 통해서 설치합니다. 파일 용량이 커서 시간이 좀 걸립니다. 앱스토어를 통해서 설치가 완료되면 터미널에서 아래 두 명령어를 실행합니다. Path 설정입니다. sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFi.. [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 - 당근마켓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 - 당근마켓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.. 이전 1 2 3 4 ··· 16 다음
