How to change the swipe direction of the stack layout to the reverse of the default one?

[adar2378]

Swiper(
layout: SwiperLayout.STACK,

              itemBuilder: (BuildContext context, int index) {
                return Stack(
                  alignment: Alignment.topCenter,
                  children: <Widget>[
                    Image.network(
                      "http://via.placeholder.com/288x188",
                      fit: BoxFit.fill,
                    ),
                    Text(
                      index.toString(),
                      style: TextStyle(fontSize: 20),
                    )
                  ],
                );
              },
              itemCount: 10,
              itemWidth: 300.0,
              // viewportFraction: 0.85,
              // scale: 0.9,
            ),

Please can anyone help me to understand how can I change the default card swiping direction?

[adar2378]

I have solved it by changing two lines of code! :)
custom_layout.dart

void _onPanEnd(DragEndDetails details) {
if (_lockScroll) return;

double velocity = widget.scrollDirection == Axis.horizontal
    ? -details.velocity.pixelsPerSecond.dx//edited here!
    : details.velocity.pixelsPerSecond.dy;

if (_animationController.value >= 0.75 || velocity > 500.0) {
  if (_currentIndex <= 0 && !widget.loop) {
    return;
  }
  _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);
} else {
  _move(0.5);
}

}

void _onPanStart(DragStartDetails details) {
if (_lockScroll) return;
_currentValue = _animationController.value;
_currentPos = widget.scrollDirection == Axis.horizontal
? details.globalPosition.dx
: details.globalPosition.dy;
}

void _onPanUpdate(DragUpdateDetails details) {
if (_lockScroll) return;
double value = (_currentValue +
((widget.scrollDirection == Axis.horizontal
? details.globalPosition.dx
: details.globalPosition.dy) -
_currentPos) /
-_swiperWidth / //edited here
2);
// no loop ?
if (!widget.loop) {
if (_currentIndex >= widget.itemCount - 1) {
if (value < 0.5) {
value = 0.5;
}
} else if (_currentIndex <= 0) {
if (value > 0.5) {
value = 0.5;
}
}
}

_animationController.value = value;

}

int _currentIndex = 0;
}

swiper.dart
void _updateValues() {
if (widget.scrollDirection == Axis.horizontal) {
double space = (_swiperWidth - widget.itemWidth) / 2;
offsets = [-2space, -2(space / 3 * 2), -2*(space / 3), 0.0, _swiperWidth];
} else {
double space = (_swiperHeight - widget.itemHeight) / 2;
offsets = [-space, -space / 3 * 2, -space / 3, 0.0, _swiperHeight];
}
}

[ThomasEcalle]

Hi @adar2378

I don't really understand the changes you made in order to change the stack direction.
What are "offsets" that you wrote ?

Did you finaly found something in order to reverse the Stack direction ? I would be happy to see it working

Thanks in advance

[adar2378]

Yes I have managed to change the direction, follow //edited here comments, thats where i made the changes. also made changes here:
swiper.dart
void _updateValues() {
if (widget.scrollDirection == Axis.horizontal) {
double space = (_swiperWidth - widget.itemWidth) / 2;
offsets = [-2space, -2(space / 3 * 2), -2*(space / 3), 0.0, _swiperWidth];
} else {
double space = (_swiperHeight - widget.itemHeight) / 2;
offsets = [-space, -space / 3 * 2, -space / 3, 0.0, _swiperHeight];
}
}

[rurickdev]

thank @adar2378 your changes worked like a charm, just i have the problem with the order of the widgets in the stack, they are reversed, any idea on how to change it?

As you can se the bigger values are top in the stack but they sould be in the buttom
Link to example

[adar2378]

Yeah, check 903 line in swiper.dart
Alignment alignment = widget.scrollDirection == Axis.horizontal
? Alignment.centerLeft
: Alignment.topCenter;
Instead write
Alignment alignment = widget.scrollDirection == Axis.horizontal
? Alignment.centerRight
: Alignment.topCenter;

[subhendukundu]

@rurickdev @adar2378 How did you make the stack on the right side one top of other?
I tried the

Alignment alignment = widget.scrollDirection == Axis.horizontal
? Alignment.centerRight
: Alignment.topCenter;

This make them on top of each other not the edge effect.
Any help?

[keyur005]

Yes I have managed to change the direction, follow //edited here comments, thats where i made the changes. also made changes here:
swiper.dart
void _updateValues() {
if (widget.scrollDirection == Axis.horizontal) {
double space = (_swiperWidth - widget.itemWidth) / 2;
offsets = [-2space, -2(space / 3 * 2), -2*(space / 3), 0.0, _swiperWidth];
} else {
double space = (_swiperHeight - widget.itemHeight) / 2;
offsets = [-space, -space / 3 * 2, -space / 3, 0.0, _swiperHeight];
}
}

this code add but i have a some error

[clong1995]

https://github.com/clong1995/StorySwiper
fork from UdaraWanasinghe