grouped_list(플러터 채팅 날짜 header)

 

플러터 채팅방을 만들다가 중간중간에 날짜가 들어가는건 어떻게 해줘야할까라는 고민이 생겼다.

 

다른 유저들도 이런 것에 대한 고민과 질문이 많았고, 그 해답은 바로! "grouped_list" 였다.

 

참고로 저 날짜 글자는 DateDivider 등으로 불린다.

 

 

나는 문의사항 채팅을 예로 만들었고 코딩은 다음과 같다

 

GroupedListView<InquireChatModel, String>(
  elements: snapshotdata,
  groupBy: (element) => DateFormat('yyyy.MM.dd. EEE').format(element.created.toDate()),
  groupSeparatorBuilder: (String groupByValue) => Center(child: Text(groupByValue)),
  itemBuilder: (context, InquireChatModel element) =>   element.makeruid==_userModel.uid?
  myChat(element):otherChat(element),
  itemComparator: (item1, item2) => item1.created.compareTo(item2.created), // optional
  useStickyGroupSeparators: false, // optional
  floatingHeader: true, // optional
  order: GroupedListOrder.DESC, // optional
  reverse: true,
),

 

 

결과 화면!