ScrollablePositionedList's alignment paramenter is not enough. There are impossible situations.

[marcglasberg]

As of now, some positions are impossible, both for the constructor and for methods that accept alignment.

Examples below given for a vertical non-reversed list:

• It's impossible to align the center of the item to the center of the Viewport.
• It's impossible to align the bottom of the item to the center of the Viewport.
• It's impossible to align the bottom of the item to the bottom of the Viewport.

The only precise positioning here is aligning the top of the item to the top of the Viewport, or putting the top of the item right below the Viewport.

I'd say, as it is, alignment is quite useless.

1) When using a single alignment like this its much better to follow Flutter's Align widget standard of always keeping the item inside of the Viewport. In the standard, 0.0 means the top of the item would be at the top of the screen, while 1.0 means the bottom of the item would be at the bottom of the screen.

2) Another (in my opinion better) possibility is having two alignment proprieties, one that refers to the Viewport, and another that refers to the item:

itemScrollController.jumpTo(index: 10, viewportAlignment: 0.0, itemAlignment: 0.5);

In this example, the center of the item (0.5) would be aligned to the top of the screen (0.0).

3) Pixel positions should be possible too:

itemScrollController.jumpTo(
    index: 10, 
    viewportAlignment: 0.0, 
    itemAlignment: 0.0, 
    pixelDistance: 25.0);

In this example, the top of the item would be aligned to 25.0 pixels to the top of the screen (for vertical non-reversed lists).

[tarobins]

Yes, I agree. This has crossed my mind. I would like to do something like 2.

[tarobins]

I've written a doc that proposes a solution to this bug and a few other. If you are interested in the solution to this bug, please take a look and leave comments.

https://docs.google.com/document/d/1ozIndwAbYcd96ktOX8LnsZ1L-K08q2XvdDD3G_ruEE8/edit#

[marcglasberg]

@tarobins Added my comments there already.

[MiguelSOliveira]

Hey guys, will this solution also work for horizontal lists?

I'm trying to implement tabs with the ScrollablePositionedList. My idea is whenever a tab is outside of the view port it will scroll to the viewport.

If it is outside of the viewport to the right, it will scroll until the rightmost part of the tab is aligned to the right of the screen (or enough to show a portion of the next tab).
If it is outside of the viewport to the left, it will scroll until the leftmost part of the tab is aligned to the left of the screen (or enough to show a portion of the previous tab).

I don't think this can be done with the alignment property at the moment, but please correct me if I'm wrong.

My question is, will this issue aim to resolve that?

From the document above, I've noticed the following regarding horizontal lists:
Need to make sure the definition of itemAnchor is consistent with the definition of anchor for horizontal and reversed lists, and that backward compatibility is maintained

Just want to make sure that it is in fact what I've described above?

[marcglasberg]

@tarobins Hi Tom. Could you please give me some information about where in the code you believe I should be looking towards implementing item 2 above? Could you give me some direction? Any insight would be useful. Thanks!

[dodatw]

Is there any good solution now?
I need item align to screen center after tap.
The workaround, I need to calculate item's width and viewportWidth. then use item width to calculate aligement dynamic, something like:

alignment = 0.5 - itemWidth / (2 * viewportWidth);

Is there any elegant solution ?