Something is not right after updating to v3.0.1

[MihaiRebegea]

Hello,

I just updated my app with the latest version of the library and my grouped list is behaving strange.

I noticed that if I don't add the floatingHeader param to false, then I get only the first groupSeparator item and the rest of the list is not visible.

If I add the floatingHeader param to true then I get all the items of the grouped list with a sticky groupSeparator item which somehow has a transparent background.
What am I doing wrong?

And since I opened this thread I have a small question. I group my list after date but I would like to order it after date and time is that possible somehow?

Thank you in advance.

[Dimibe]

@MihaiRebegea I'll have a look into it. Which version have you been using before 3.0.0 or 2.x?

Regarding your question: Sure you can this. The list is ordered by the groups and inside the groups it is ordered by the element itself. So you need to to extend the Comparable interface and implement the compareTo method. e.g:

class Element implements Comparable {
  final DateTime dateTime;

  Element(this.dateTime);

  @override
  int compareTo(other) {
    return dateTime.compareTo(other.dateTime);
  }
}

[MihaiRebegea]

@Dimibe In version 2.x it worked. After installing 3.0.1 the header issue occurred.
For now I reverted to 2.3.0 and everything works fine.

Thank you very much for the hint and the quick reply!

[Dimibe]

@MihaiRebegea I think I figured it out. It should be fixed in version 3.1.0. Let me know if it still does not behave like in version 2.3.0.
When using version 3.1.0 please set the parameter like you did in version 2.3.0, so remove the floatingHeader parameter or set it to false.
Best regards

[MihaiRebegea]

@Dimibe I don't get the transparent group header anymore if I don't use floatingHeader, and useStickyGroupSeparators.
However setting the useStickyGroupSeparators to true is not showing the rest of the list items, (besides the first groupItem).
And if I set floatingHeader to true I see all the list elements but with the same issue of the transparent group item.
I will leave this version for now, but the stickyGroupSeparator was a nice feature which I would like to activate once you find a fix.

Thank you very much for your effort.

[Dimibe]

@MihaiRebegea Can you send me your code from the groupSeparatorBuilder function? Are you using the Center widget. If so that might be the issue.

You need to wrap the center widget with a "Container"-Widget and specify a hight, e.g.:

   groupSeparatorBuilder: (value) => Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        height: 30,
        child: Center(
          child: Text(
            value,
            style: TextStyle(
                fontSize: 18.0, color: Colors.red, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    ),

The other is to remove the "Center"-Widget and directly use the "Text"-Widget, e.g:

 groupSeparatorBuilder: (value) => Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(
        value,
        textAlign: TextAlign.center,
        style: TextStyle(
            fontSize: 18.0, color: Colors.red, fontWeight: FontWeight.bold),
      ),
    ),

In this case don't forget the "textAlign"-Property in the "Text"-Widget.

If you just want to display text without a background I would recommend the second option with textAlign: TextAlign.center to you.
The fist option makes sense if you give the Container some color or other visible properties.

[MihaiRebegea]

Sure, this is the code I use currently:

  Widget _buildGroupSeparator(dynamic groupByValue) {
    return Padding(
      padding: EdgeInsets.only(top: 16.0),
      child: Column(
        children: <Widget>[
          Container(
            alignment: Alignment.centerLeft,
            margin: EdgeInsets.fromLTRB(18, 0, 0, 16),
            child: Text(
              DateTimeUtils.getDateAsStringOutput(groupByValue, 'yyyy-MM-dd'),
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 18,
                  fontWeight: FontWeight.bold),
            ),
          ),
          Divider(
            color: Colors.black,
            height: 1,
          )
        ],
      ),
    );
  }

I removed the first container, I just tried it out after I saw your answer, this is the version I currently use, only with the Padding as parent

[Dimibe]

@MihaiRebegea This seems to be the same issue here like the one I described with the Center widget. The Column widget has no height defined so it expands to all the space it has and thats results in that the group header overlays the list.

I have just tried it out and its works when you wrap the Column inside a Container and then specify a height for the Container. e.g.:

Widget _buildGroupSeparator(dynamic groupByValue) {
  return Padding(
    padding: EdgeInsets.only(top: 16.0),
    Container(
      height: 60,
      child: Column( 
        children: [...] 
      ),
    ),
  ), 
};

[MihaiRebegea]

yes, that did the trick, I had to add a background for the container as well, otherwise when activating the floating header the background was still transparent.
Looks good now, thank you very much.

[Dimibe]

@MihaiRebegea If you dont want transparent background you can leave the floatingHeaders option to false. Without this option the sticky headers should work like in version 2.3.0.

I'll close this issue since your main issue is solved.

Best regards