[Flutter] - 채팅 메시지 정렬

min_chan·2023년 6월 3일
0
post-thumbnail

구현 하고 싶은 기능

- 카카오톡이나 sns 메신저와 같이 전달 받은 텍스트를 아래로 쌓아 올리려면 어떻게 해야 할까?


1. ListView.builder - reverse

- 코드

ListView.builder(
             // 역순 배치
             reverse: true,

ListView.builder의 reverse 값을 true로 두면 아래 사진처럼 채팅이 아래에서 올라온다.


하지만 채팅이 위로 쌓이는건 내가 원하는 기능이 아니다 ㅠ.ㅠ


2. insert(0, ~)

- 코드

final List<ChatMessage> _chatLog = [];

void update() => setState(() {});

void sendMessage(String prompt) async {
  gptController.textEditingController.clear();

  update();
  _chatLog.insert(0, ChatMessage(role: 'User', content: prompt));

  final response = await gptService.fetchChatGPTResponse(prompt);

  update();
  _chatLog.insert(0, ChatMessage(role: 'ChatGPT', content: response));
}

리스트에 챗 메시지를 넣어줄 때 맨 앞 부분(0)에 넣어주면 문제가 해결된다 ^^ *


+ 옛날 모델이라 좀 멍청하다.....

profile
github.com/kangminchan99

0개의 댓글