Comments (9)
@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);
}
}
from grouped_list.
@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!
from grouped_list.
@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
from grouped_list.
@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.
from grouped_list.
@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.
from grouped_list.
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
from grouped_list.
@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: [...]
),
),
),
};
from grouped_list.
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.
from grouped_list.
@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
from grouped_list.
Related Issues (20)
- Is there a way to draw a widget at the end of the last item? HOT 1
- Can separator be set to null? Because after setting itemExtent, the height doubles
- Ui Freezing when too many items are loaded in the list-LazyLoading feature request
- ItemComparator function doesn't work if you set groupComparator function HOT 1
- Wrong sticky header on first display of scrolled list HOT 3
- Support for container group HOT 1
- Feature Request: Custom Header Location HOT 1
- Bad state: Cannot add event after closing
- Element Position HOT 1
- Get first and / or last index of each group
- useStickyGroupSeparators
- Implicit animations for items when data source changes HOT 1
- index for group headers and separators HOT 1
- Highlight current group separator HOT 2
- Footer widget doesn't work as intended HOT 2
- Hide Separator if only one group HOT 1
- "primary" parameter doesn't work
- Sticky header not updated on web HOT 1
- Pagination support? HOT 2
- How do I apply it to the data model?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from grouped_list.