TatsuUkraine / flutter_sticky_infinite_list

Multi directional infinite list with Sticky headers for Flutter applications
BSD 2-Clause "Simplified" License
341 stars 31 forks source link

Sort items descending and scroll to the end of the list by default #38

Closed AkbarBakhshi closed 4 years ago

AkbarBakhshi commented 4 years ago

Describe the behavior you'd like to achieve Hi. I have a comment section in my app where I am using this package for. I am fetching data from Firebase and then display the data in ascending order from top to bottom (older to newer). That works fine, but I want to have the list scrolled to the bottom (most recent comment) by default, when I navigate to the screen with this widget. How can I do that?

Thanks for the help.

Code sample that you've tried so far (if you have any) InfiniteList( controller: ScrollController(), direction: InfiniteListDirection.multi, negChildCount: 0, posChildCount: postCommentDocs.length, anchor: 0, builder: (BuildContext context, int index) { return InfiniteListItem( headerBuilder: (BuildContext context) { // return My headers }, contentBuilder: (BuildContext context) { // return My content }, minOffsetProvider: (StickyState<int> state) => 50, mainAxisAlignment: HeaderMainAxisAlignment.start, crossAxisAlignment: HeaderCrossAxisAlignment.start, positionAxis: HeaderPositionAxis.crossAxis, ); }, ),

TatsuUkraine commented 4 years ago

So if I get you right, you need reverse list?

TatsuUkraine commented 4 years ago

If so, you can use code sample for this section https://github.com/TatsuUkraine/flutter_sticky_infinite_list#reverse-infinite-scroll

TatsuUkraine commented 4 years ago

Btw, couple of small tips - InfiniteListItem has default constructor for the relative positioning and overlay constructor for absolute header position. And minOffsetProvider is not required, if it's not provided - the max header position will be based on header size (it won't overflow the container and it's max position will be at the opposite edge of the container)

AkbarBakhshi commented 4 years ago

Hi. I tried that, but with anchor: 1.0 and posChildCount: 0 I get a blank screen and if I change the posChildCount value to number of comments, I basically get a blank screen that starts showing lists after I scroll down one screen size and still shows in the ascending order.

TatsuUkraine commented 4 years ago

Hm, this is strange. You put negChildCount to number of your comments? And during the item build have you took into account that index is actually a negative value?

AkbarBakhshi commented 4 years ago

This is with anchor: 1.0 and posChildCount: numberOfComments and negChildCount: 0 https://drive.google.com/file/d/1VAfxf5j9rgjZU4W0_B6_Lo1bSJz-l0o5/view?usp=sharing

AkbarBakhshi commented 4 years ago

with anchor: 1.0 and posChildCount: 0 and negChildCount: numberOfComments I get this error:

RangeError (index): Invalid value: Not in range 0..20, inclusive: -1

TatsuUkraine commented 4 years ago

This is with anchor: 1.0 and posChildCount: numberOfComments

yep it's expected behavior. You need to set anchor: 1.0, posChildCount: 0 and negChildCount: numberOfComments

And then in the builder find your comment item like this

builder: (BuildContext context, int index) {
/// index will be negative, so you need to convert it to the array index
/// so you need to multiply on -1 to make it possitibe, and subtract 1 since first index will be -1 and array starts with 0

const commentItem = commentArray[(index * -1) - 1];
......

}
TatsuUkraine commented 4 years ago

RangeError (index): Invalid value: Not in range 0..20, inclusive: -1

yep, because it seems your comment array has 20 items and index will start in the builder from -1, so if you convert it to appropriate array index value like I described in the comment before - all should work fine

AkbarBakhshi commented 4 years ago

Array index values did the trick. Thanks a lot for the help and a great package :)

TatsuUkraine commented 4 years ago

Np)