subindev 님의 블로그

채팅 UI를 구현할 때 고려해야 할 세세한 부분들이 많습니다. 우리는 하루에도 몇십 번씩 사용하는 채팅 앱을 만들기 위해서는 당연하다고 느껴질 수 있는 세부 사항들을 고려하고, 사용자 경험(UX)을 고려하여 고품질의 채팅 기능을 구현해야 합니다.이 포스팅에서는 WhatsApp, 카카오톡, 그리고 라인과 같은 대표적인 채팅 앱에서 적용되는 UI 인터랙션 로직을 적용한 채팅 앱을 개발하는 방법에 대해 설명합니다.기본적인 구조 (뼈대)먼저, 채팅 스크린의 기본 구조를 살펴봅시다. Scaffold( appBar: AppBar( title: const Text("Chat"), backgroundColor: const Color(0xFF007AFF), ), // 일반..

오늘 목표- 현재 MV로 구현된 채팅방, 목록 페이지 -  MV VM 패턴으로 분리하기- 채팅방 화면 디테일 - 키보드가 나오거나 입력한 뒤 최근 메시지가 제일 아래에 보이도록 설정- 상품 등록화면 디자인 개선- 홈 메인화면 디자인 개선 내일 목표- 백 마이바티스 연결해서 JSON 쏴주기- JSON 클래스로 변환해서 화면에 출력하기 채팅방 추가된 기능- 키보드 외의 화면 터치나 드래그 시 키보드 자동으로 내려감ListView.builder( // 리스트를 드래그하면 키보드가 내려가도록 하는 코드 keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDr..

오늘의 작업- 채팅 리스트 화면 구현- 채팅 방 화면 구현- 홈 메인 화면 구현- 모델링 클래스 설계 및 더미 데이터 추가 (상품 | 채팅방 | 채팅메시지) 내일 목표 - 현재 MV를 MV VM 패턴으로 분리하기- 채팅방 화면 디테일 - 키보드가 나오거나 입력한 뒤 최근 메시지가 제일 아래에 보이도록 설정-  홈 화면 디테일 잡기- 상품 보기 화면 구현  구현화면 (결과)  // chatting_room Page 사용class ChatRoom { final int chat_room_id; final ProductCard productCard; final List participants; final List messages; final bool isRead; ChatRoom({ requir..

Dio 패키지 사용해 보기https://pub.dev/packages/dio/install dio install | Dart packageA powerful HTTP networking package, supports Interceptors, Aborting and canceling a request, Custom adapters, Transformers, etc.pub.dev 1. pubspec.yaml 파일 설정Dio 패키지를 사용하려면 프로젝트의 pubspec.yaml 파일에 아래 내용을 추가합니다.dependencies: dio: ^5.7.0설정 후, 다음 명령어를 실행합니다.flutter pub get  2. Dio 사용 예제 코드 전체 코드import 'package:dio/dio.dart'..

Dart 비동기 프로그래밍 정리학습 목표Dart 비동기 프로그래밍의 개념 이해Future 타입에 대한 이해Future 타입과 Future.delayed 함수 사용 실습1. Dart 비동기 프로그래밍이란?동기성 (Synchronous)코드가 순차적으로 진행됩니다.이전 작업이 끝나야 다음 작업을 시작할 수 있습니다.예: 파일 읽기 작업 완료 후에야 다음 코드 실행.비동기성 (Asynchronous)코드가 동시다발적으로 실행됩니다.작업 순서를 보장하지 않으며, 기다리는 동안 다른 작업을 수행합니다.Dart는 Future 타입을 사용해 비동기 작업을 처리합니다.2. Future 타입이란?Future 객체: 미래에 값이나 오류를 반환할 것을 약속하는 데이터 타입입니다.비동기 작업을 쉽게 처리하기 위해 async와..