Manage Grouped List View in Flutter (Data from Firestore)

Question

I am trying to group widgets using this package (grouped list) with no success.

Widgets are created by a streambuilder and come from two different collections and end up in a single listview. I would like to group them through a group (String) and as you can see, each Widget in the list view has its own header with the group (The value of the group is inserted each time inside Firestore).

I would like to group all widgets with the same group under one header.

Screenshot of my situation

Screenshot of what am I trying to achieve

List and GroupedListView:

 List<Widget> items = [
            ...(prospettive
                .map((prospettiveId) =>
                    ProspettiveItem(prospettiveId: prospettiveId))
                .toList()),
            ...(avvenimenti
                .map((avvenimentoId) =>
                    AvvenimentoItem(avvenimentoId: avvenimentoId))
                .toList()),
          ];
          //some code
          Expanded(
                    child: GroupedListView(
                      elements: items,
                      groupBy: //Here is where I'm stuck,
                    ),
                  ),

As you can see, the widgets that are built by StreamBuilder are two "AvvenimentoItem" and ProspettiveItem ", they are practically identical, only one wording changes. Below I have added how I build the header for both.

The Header you see on top of the Widget:

class AvvenimentoItem extends StatelessWidget {
  final Avvenimento avvenimentoId;

  const AvvenimentoItem({Key key, this.avvenimentoId}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return //somecode
                          Row(
                            children: [
                              OutlinedDotIndicator(
                                size: 12,
                                borderWidth: 1,
                                color: Colors.black54,
                              ),
                              Padding(
                                padding: const EdgeInsets.only(left: 8),
                                child: Text(
                                  avvenimentoId.dataAggiornamento ?? '', //Here is where I add the String from firestore with the group name
                                  style: TextStyle(
                                    fontSize: 16,
                                    color: Colors.black,
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  //the rest of the widget

How can I group these widgets?

Answer 1

groupBy: (element) => element.dataAggiornamento 

Try this. You must pass the element value to group the list.