[Flutter] - 채팅 메시지 정렬

 

 

구현 하고 싶은 기능

- 카카오톡이나 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)에 넣어주면 문제가 해결된다 ^^ *

---

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