πŸ’ΉAgrupamento de mensagens

Aqui apenas vou demonstrar como fiz o uso do GroupedListView para agrupar as mensagens do chat por data e de maneira decrescente.

O widget e suas determinaΓ§Γ΅es ficaram da seguinte maneira:

GroupedListView<dynamic, String>(
 elements: snapshot.data!.toList(),
 controller: _scrollController,
 reverse: true,
 order: GroupedListOrder.DESC,
 groupBy: (e) => getUpdatedAtDateFormatted(e != null && e.createdAt != null &&
    e.createdAt is int ? e.createdAt : Timestamp.now().millisecondsSinceEpoch, ),
 itemComparator: (item1, item2) => (item1.createdAt != null && item1.createdAt is int)
  && (item2.createdAt != null && item2.createdAt is int) ? item1.createdAt .compareTo(item2.createdAt): 1,
 sort: false,
groupSeparatorBuilder: (String groupByValue) =>
Center(
child: Padding(
  padding: const EdgeInsets.all(10),
  child: Text(
    groupByValue.replaceAll("Z-", ""),
    style: Fonts.headline6.copyWith(
    color: CustomColors.darkerGrey,
    fontWeight: FontWeight.w600,
      ),
    ),
  ),
),

Onde a funΓ§Γ£o de getUpdatedAtDateFormatted Γ© a seguinte:

Com isso, as mensagen ficam ordenadas da mais atual para as mais antigas, e agrupadas por "Hoje", "Ontem" ou a data em que foram enviadas.

Last updated