STACK Layout - list order inverted

[LampadinoMania]

Good morning,

I am having a problem using STACK Layout with a list: it seems that the order of the elemets is inverted during elements swiping.
Example (gif attached):

1. The first element on the stack is the 2
2. The user makes the swipe in order to get the element 1 (during the movement it is possible to see that under the element 2 there is the element 1)
3. During the swipe animation, item 1 is actually displayed
4. As soon as the animation is completed the element 1 is changed with the element 3

It seems that the animation swiping is the opposite of the list shifting order.

Here's the code:

import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';


List prova = ["1", "2", "3", "4", "5", "6", "7", "8"];

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page', key: ValueKey(1),),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({required Key key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SizedBox(
          width: 200,
          height: 200,
          child: Swiper(
            itemBuilder: (BuildContext context, int index){
              final item = prova[index];
              return SizedBox(
                width: 150,
                height: 150,
                child: Container(
                  decoration: BoxDecoration(border: Border.all(color: Colors.black)),
                  child: Text(index.toString())));
            },
            index: 0,
            axisDirection: AxisDirection.right,
            scrollDirection: Axis.horizontal,
            loop: true,
            itemCount: prova.length,
            layout: SwiperLayout.STACK,
            itemHeight: 150,
            itemWidth: 150,
            pagination: SwiperPagination(),
            // control: SwiperControl(),
          ),
        ),
      ),
    );
  }
}

[CharlesMangwa]

Just installed the library this morning @LampadinoMania and am facing pretty much the same issue. The weird thing is that onIndexChanged does allow to print the proper index, but if I print it from within itemBuilder as well, the order doesn't make much sense indeed. I'll let you know if I can come up with something.

[CharlesMangwa]

FWIW here's a visual representation of what the issue is for me. As you can see, the (problematic) behaviour is the same as @LampadinoMania:

Screen.Recording.2022-01-27.at.12.57.43.mov

[MiguelHL]

I had the same problem and you only have to change the version of the package, versions 2.0.0 and 2.0.1 have the same error, you should change it to 1.0.4.
Hope this can help you @CharlesMangwa

[CharlesMangwa]

Thanks for the heads up @MiguelHL, v1.0.4 does not have the issue indeed! Unfortunately, the axisDirection property is not available there but I guess I can just fork the lib for now and apply f7a9bf6.

[CharlesMangwa]

OK after some investigation in the internals of the lib and the previous commits, I managed to "fix" it. So, it seems like the issue is coming from:

card_swiper/lib/src/custom_layout.dart

Lines 210 to 215 in 7b6b68d

	_move(1.0, nextIndex: _currentIndex + 1);
	} else if (_animationController.value < 0.25 || velocity < -500.0) {
	if (_currentIndex >= widget.itemCount - 1 && !widget.loop) {
	return;
	}
	_move(0.0, nextIndex: _currentIndex - 1);

after this change was introduced: f7a9bf6#diff-d1e5d4e270664cc2388fc8b37dd68ef5f513da1be06c5e4d008fa9565f8d2eecL208-L213

So I forked the latest version, reverted this specific change and got to this status: the 1st item is correct, but not the following ones:

Screen.Recording.2022-01-28.at.15.19.05.mov

From this, I made 2 changes in my own code to get it to work:

1. Reversed my List.

- itemBuilder: (BuildContext context, int index) => MyWidget(item: myList.elementAt(index)),
+ itemBuilder: (BuildContext context, int index) => MyWidget(item: myList.reversed.elementAt(index)),

Which gets it to a valid state, minor the 1st item being off now:

Screen.Recording.2022-01-28.at.15.20.02.mov

2. Change the initial index

+ index: -1,

And voilà!

Screen.Recording.2022-01-28.at.15.20.41.mov

Hope this helps you as well @LampadinoMania!

[TheAnkurPanchani]

This is fixed in latest version. Please check and confirm. Thanks!

[CharlesMangwa]

Just installed that latest version (2.0.3) and this issue has been addressed on my side indeed. Thanks so much @TheAnkurPanchani!

[k-ane]

@TheAnkurPanchani This issue is still prevalent in the latest versions, except that it happens on autoplay rather than swipe.

So when I use a STACK layout, manually swiping works fine, but the autoplay does the weird swapping mentioned above.

I had to go all the way back to 1.0.4 to get a fully working implementation.

[TheAnkurPanchani]

@k-ane : Please raise a fresh issue. I will fix it asap.