'New messages' separator like WhatsApp

30 Views Asked by At

I need to make a separator for new events in my ListView.

ListView:

return Expanded(
      child: ListView(
        physics: const AlwaysScrollableScrollPhysics(),
        key: ValueKey(selectedProject?.id),
        controller: _scrollController,
        children: [
          ...eventsByDate.entries
              .map(
                (entry) => StickyHeader(
                  header: Padding(
                    padding: const EdgeInsets.only(top: 4, bottom: 4),
                    child: Center(
                      child: Container(
                        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
                        decoration: BoxDecoration(
                          color: ColorThemeApp.grayBackground,
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: Text(
                          formatDateLabel(entry.key),
                          style: TextThemeApp.r12w400(context, color: ColorThemeApp.gray90),
                        ),
                      ),
                    ),
                  ),
                  content: Column(
                    children: [
                      ...entry.value
                          .map(
                            (event) => EventCard(list: event, contextEvent: widget.context),
                          )
                          .toList(),
                    ],
                  ),
                ),
              )
              .toList(),
          if (context.read<EventListBloc>().state.isPaginationRequesting)
            const Padding(
              padding: EdgeInsets.symmetric(vertical: 16.0),
              child: Center(child: CircularProgressIndicator()),
            )
          else
            Container(),
        ],
      ),
    );

All I have is the number of new items (selectedProject.newEventsCount). Please tell me the best way to implement the separator. Wouldn't it be better to have an isNew flag for each event?

0

There are 0 best solutions below