chat app 썸네일형 리스트형 [Flutter] 채팅앱 만들기 #10 What to do? 홈화면 UI 구현 데모영상 홈화면 Reference 구현해야 할 내용 1. 상단 탭바 2. 채팅방 List 3. 활동중인 유저 State 관리 상단 탭바에서 활동중인 유저 숫자를 보여줘야 함. 또한 활동중 유저 탭을 누르면 보여줄 유저 목록이 필요함. 이를 위해 홈화면에서 사용할 State를 정의 State abstract class HomeState extends Equatable {} class HomeInitial extends HomeState { @override List get props => []; } class HomeLoading extends HomeState { @override List get props => []; } class HomeSuccess exten.. 더보기 [Flutter] 채팅앱 만들기 #9 What to do? 회원가입 화면(UI) 구현 데모영상 Custom Thema Color Appbar, Tabbar Light mode, Dark mode const kPrimary = Color(0xFFEF1B48); const kBubbleLight = Color(0xFFE8E8E8); const kBubbleDark = Color(0xFF262629); const kAppBarDark = Color(0xFF111111); const kActiveUsersDark = Color(0xFF3B3B3B); const kIndicatorBubble = Color(0xFF39B54A); const kIconLight = Color(0xFF999999);; final appBarTheme = AppBarThe.. 더보기 [Flutter] 채팅앱 만들기 #8 What to do? 회원가입(On Boarding) 기능 개발하기 - 프로필 사진 업로드 기능을 위해 이미지 업로드용 Server를 생성 - 이미지 업로드 기능 구현 - 상태 관리를 위해 Multi Provider 생성 Reference 라이브러리 설치 pubspec.yaml 파일 수정 dependencies: ... flutter_bloc: ^7.0.1 google_fonts: ^1.1.2 http: ^0.12.2 image_picker: ^0.6.7+22 rethink_db_ns: ^0.0.4 shared_preferences: ^2.0.6 State OnBoardingState(회원가입 상태) 회원가입 로딩중 props : None 회원가입 성공 props : 회원가입 성공한 유저 state_ma.. 더보기 [Flutter] 채팅앱 만들기 #7 What to do? State 관리 React에서 상태관리를 redux, zustand, recoil과 같은 상태관리 라이브러리를 사용 하듯이, 유사하게 Flutter 프로젝트에서도 Bloc 라이브러리를 적용해보자. Reference 라이브러리 설치 pubspec.yaml 파일 수정 상태관리 라이브러리를 사용하기 위한 라이브러리 설치 dependencies: ... bloc: ^7.0.0 equatable: ^2.0.2 Usage 메세지의 상태를 정의하는 예시 State 정의 MessageState라는 Base State를 정의 MessageSentSuccess라는 State 정의 - props는 message abstract class MessageState extends Equatable { // .. 더보기 [Flutter] 채팅앱 만들기 #6 What to do? View Model Reference Base View Model /view_model/base_view_model.dart abstract class BaseViewModel { final IDataSource _dataSource; BaseViewModel(this._dataSource); @protected Future addMessage(LocalMessage localMessage) async { if (!await _isExitingChat(localMessage.chatId)) await _dataSource.addMessage(localMessage); await _dataSource.addMessage(localMessage); } Future _isExitingCh.. 더보기 [Flutter] 채팅앱 만들기 #5 What to do? Local Message, Local Database ⓐ 기기에 저장할 메세지 형태를 Local Message로 정의 ⓑ Sqflite를 사용해 로컬데이터 베이스에 접근하는 코드 작성 ⓒ 테스트 코드 작성 Reference Refactoring 기존에 작성했던 파일들을 전부 chat이라는 폴더로 때려넣음 chat/lib/chat.dart 기작성한 모델과 서비스 코드를 export하는 파일 작성 (interface는 export하지 않음) library chat; export './model/receipt_model.dart'; export './model/message_model.dart'; export './model/typing_event_model.dart'; export '... 더보기 [Flutter] 채팅앱 만들기 #4 What to do? ReceiptService, TypingEventService를 만들고, Test 코드 작성하기 채팅서비스에서 다음의 두가지 기능을 구현하기 위한 서비스 코드를 작성 ⓐ 상대방이 내가 보낸 메세지를 읽었는지 여부 ⓑ 상대방이 현재 타이핑을 하고 있는지 여부 이를 위해 Receipt, TypingEvent 관련된 모델과 서비스코드, 테스트코드까지 작성하였다. 이전에 작성한 Message service코드와 거의 대부분이 유사하다 Refence Receipt Model 메세지를 상대방이 읽었는지를 나타내기 위한 Entity recipeint : 메세지를 받은 유저의 id messageId : 메세지 아이디 status : 메세지 상태를 enum으로 정의 delivered read : 상.. 더보기 [Flutter] 채팅앱 만들기 #3 What to do? EncryptionService를 만들고, MessageService 코드 수정하기 메세지를 암호화하는 Service 코드를 작성하고, 기작성했던 message service, test 코드에 적용하기 Reference 라이브러리 설치 메세지 암호화를 위해 encyrpt 라이브러리 설치 Encryption Service 작성하기 service/encryption_service_interface.dart encrypt : 메세지 암호화 decrypt : 암호화 된 메세지 해독 abstract class IEncryptionService { String encrypt(String text); String decrypt(String encryptedText); } service/encry.. 더보기 이전 1 2 다음
