Flutter (156) 썸네일형 리스트형 [Flutter] MacOS - 아이폰 실기계에서 개발 이번 시간에는 시뮬레이터 대신 아이폰 실기기를 연결해서 개발하는 방법에 대해서 알아보겠습니다. 1. xcode 에 개발자 정보 추가 - 애플 홈피에서 개발자 등록, 129,000 원의 멤버쉽은 구매하지 않아도 됩니다. 프로젝트의 메인 폴더에서 아래 명령어를 터미널에서 실행합니다. $ open ios/Runner.xcworkspace 아이폰(실제 기계) 개발자모드로 전환 - 아이폰설정 > 개인정보 보호 및 보안 > 개발자 모드 켜기 > 재부팅필요 - 개발자 모드를 켜야만 Xcode 에서 해당 아이폰이 보여진다. ios-deploy 등록 - 맥북설정 > 보안 및 개인 정보 보호 > 다음에서 다운로드한 앱 허용 > 확인 없이 허용 화면 캡쳐 현재는 해당 프로그램을 이미 허용 등록한 상태이므로 화면캡쳐가 실제 .. [Flutter] MacOS - github 인증 설정 이번 시간에는 맥에서 github 자동 로그인 설정에 대해서 알아보겠습니다. 이전 블로그에서 iTerm2 설정을 기반으로 진행했습니다. $ brew install gh # 앱이 아니므로 --cask 옵션이 필요없습니다. $ gh auth login 옵션은 아래 화면처럼 선택하세요. 화면에 나오는 one-time code 는 웹로그인 인증 절차중에 필요합니다. one-time code 는 아래 화면에 입력하면 됩니다. 아래 화면 처럼 인증 절차가 완료되었습니다. [Flutter] MacOS - 터미널 프로그램 iTerm2 설정 이번에는 터미널 프로그램인 iTerm 에 대한 커스터마이징을 알아보겠습니다. 설치는 웹(https://iterm2.com/downloads.html)으로 다운로드 받아서 설치하면 됩니다. 1. 설정 클릭 2. 다음 설정들을 순서대로 설정합니다. 설정이 완료된 화면은 아래와 같습니다. 색상 설정을 원한다면 다음 사이트에 접속해서 설정을 추가합니다. ==> https://iterm2colorschemes.com Iterm Themes - Color Schemes and Themes for Iterm2 iterm2colorschemes.com iTerm 화면의 설정을 더 추가하고 싶다면 다음 사이트에 접속합니다. ===>> https://ohmyz.sh/#install (아래 화면은 샘플 화면이고 다양한 옵션.. [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 - 당근마켓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.. 이전 1 2 3 4 ··· 20 다음
