본문 바로가기

전체 글

(30)
[iGPT] Version 1.0.5 구현 내용 1. 답변이 오는 동안 로딩 표시 구현 구현 방법 FutureBuild 사용 api를 호출하는 함수를 FutureBuild의 future에 등록 후 if문을 통해서 API 통신이 완료되면 snapshot.connectionsState의 값이 ConnectionState.done과 일치하여 내용을 표시 else에는 loading indicator를 작성하여 구현하였다. 사용한 패키지는 flutter_spinkit (https://pub.dev/packages/flutter_spinkit)을 사용하였다. iMessage과 유사한 3개의 점이 있는 ThreeBounce을 사용했다.
[iGPT] Version 1.0.4 구현 내용 1. 채팅 내역을 지우는 버튼 생성 구현 방법 message를 관리하는 Provider 객체인 messageService에 List를 Clear하는 메소드를 추가 버튼 onPressed에 해당 메소드를 연결하여 구현했다.
[iGPT] Version 1.0.3 구현 내용 1. Chat 메시지를 버블 형태로 변환 구현 방법 직접 구현하는 방법과 기존 패키지를 사용하는 방법이 있는데 이번에는 간편하게 후자를 선택 사용한 패키지는 chat_bubbles: https://pub.dev/packages/chat_bubbles chat_bubbles | Flutter Package Flutter chat bubble widgets, similar to Whatsapp and more shapes. Easy to use and implement chat bubbles. pub.dev 원하는 테마인 iMessage 테마도 지원하기 때문에 선택 구현 방법은 간단한데 text와 color에 원하는 글자와 배경색을 지정 가능하고 tail 옵션으로 말풍선 꼬리를 설정 가능 (iMe..
[iGPT] Version 1.0.2 구현 내용 1. 새로운 메시지가 수신되면 자동으로 스크롤이 맨 아래로 이동 구현 방법 Scroll을 관리해주는 ScrollController를 생성, 스크롤을 맨 아래로 이동해주는 _scrollToBottom 함수 생성 Scffold 구현 전에 WidgetsBindig으로 _scrollToBottom 함수 연결 ListView Controller에 _scrollController 추가 참고: https://stackoverflow.com/questions/56685732/flutter-how-to-create-list-view-autoscrolling --------------------------------------------------------------------------------------..
[iGPT] Version 1.0.1 구현 내용 1. 키보드가 아닌 부분 터치시 키보드 내려가게 구현 구현 방법 채팅과 입력 TextField가 있는 부분인 Column을 GestureDetector로 감싸서 구현 GestureDetector : https://api.flutter.dev/flutter/widgets/GestureDetector-class.html GestureDetector class - widgets library - Dart API A widget that detects gestures. Attempts to recognize gestures that correspond to its non-null callbacks. If this widget has a child, it defers to that child for i..