First big upp for this package!

I am looking for a way to swipe another card even if the animation of the first card is not completed. What do you think is the best way to achieve this?

Hello, when we swap a widget and this widget removed, is it possible to widget back? like view pager , we can swap to right and see the new widget and after that, we can return to the old widget with a swap to left?
Which mean you see widget 1, 2, 3 by swap to right, Now by swap to left see widget 2

App gets stuck on splash Screen , means just showing a black screen. When added the package
Steps to reproduce

1. Create a App and add the flutter swipable stack dependencies
2. Run flutter run --relase It will work for only first time
3. RUn flutter run --release , it will show blank screen

If a build the SwipableStack inside FutureBuilder, I am not able to swipe the stack of individual widgets. The widgets to get rendered on screen but nothing happens if I try to drag them.

Expanded( flex: 15, child: Padding( padding: const EdgeInsets.all(10.0), child: FutureBuilder( future: Provider.of<Property>(context, listen: false) .fetchProperties(), builder: (ctx, snapShot) { if (snapShot.connectionState == ConnectionState.waiting) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const CircularProgressIndicator(), ], ); } else { return Consumer<Property>(builder: (bldctx, data, child) { return SwipableStack( swipeAnchor: SwipeAnchor.bottom, onSwipeCompleted: (index, direction) { print('$index, $direction'); }, stackClipBehaviour: Clip.none, onWillMoveNext: (index, direction) { if (direction == SwipeDirection.up) { showModalBottomSheet( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0), ), context: context, builder: (ctx) { return Container( child: Center( child: Text('Dummy Text'), ), ); }); } final allowedActions = [ SwipeDirection.right, SwipeDirection.left, ]; return allowedActions.contains(direction); }, controller: _controller, itemCount: data.properties.length, builder: (ctxt, props) { return ClipRRect( borderRadius: BorderRadius.circular(8.0), child: data.properties[props.index].thumbnailId != null ? Image.network( '${CommonEndpoints.assetUrl}/${data.properties[props.index].thumbnailId!.files!.elementAt(0)}', fit: BoxFit.cover, ) : null, ); }); }); } }, // child: , ), ), )

The swipeable stack works if use List made of imageUrls, but widgets is undraggable after async call.

It should have a mechanism to pull more data to fill the stack once the stack is empty.
Like pagination.

OverlaySwipeProperties is exposed through overlayBuilder property, but not exported from the lib. As a consequence, importing swipe_properties.dart result in a warning (not blocking, just a warning).

Hey, looks like all cards are rebuilding all the time as the user is dragging/as builder gets called. Seems like all children in the card are getting rebuilt. Can't quite figure it out, is there some magic with keys where all children are not really rebuilding, even though their build method is being called?

It works fine before I move the Column to SingleChildScrollView. Could it be the SingleChildScrollView is blocking the underlying pan gesture?

To replicate this, run any app with swipable stack in release mode.

• Reduce unnecessary state update
• Improve cancel animation
• Use StateNotifier instead of ChangeNotifier for SwipableStackController

Hi @HeavenOSK

First of, thanks for the mentioned.

I noticed a typo in the changelog.md that is dropping the package points on pub.dev

Big thanks for the package. I am learning how to use it. :)

I tried this:
/// You can reject [SwipableStack.onSwipeCompleted] invocation by
/// setting [shouldCallCompletionCallback] to false.

I tried this on line 179 onwards in the example main.dart

_BottomButton(
color: SwipeDirectionColor.up,
onPressed: () {
_controller.next(
swipeDirection: SwipeDirection.up,
shouldCallCompletionCallback: false ,
);
},
child: const Icon(Icons.arrow_upward),
),

However, when I swipe up, the text "UP" appears as desired. Then it ... moves to the next card of the stack. I thought that this property change would keep the same card on a up swipe and just make the label chnage from opacity cannot see to opacity appear. The examples i found where unclear on how to properly set the property shouldCallCompletionCallback to false

Could you provide a code example?
do I understand the expected behavior right?

thanks

Thanks @subhendukundu 🙏
#12 (comment)

Hi,

I used your package and it's amazing. I really appreciate your work.

I face one issue in release mode.
I run app in release mode flutter run --release then onSwipaCompleted method not called so I can't set action on that. but in debug mode this is working fine.

can you please tell me what's wrong?

I used latest version of this package : swipable_stack: ^2.0.0

even I copy whole code from your example then that also face same issue.
In debug work perfect but not work in release mode

Thanks in Advance

I'd like to completely remove the manual swipe, so I can do it using the controller when the buttons are pressed.
Currently, we can set detectableSwipeDirections with an empty Set, but this still allows to user to initiate the swipe.

When users have swiped all the cards in stack, I want to let them choose to restart (swipe from the first card). controller has only one method to rewind the last action not all the way back to the first card

I have two mode is my app with two differnt list. In mode 1 i swipe for example 3 profile but when i switch to mode 2 my builder index remains 2.
I don't if it is an isssue but this is not working as it should be. It should build from index 0 every time new list is feed.

Hi,

I recently noticed that the package has a new version (0.8.0) so I decided to update from version 0.7.1 to 0.8.0.

Now I got this error when I swipe first card:

The following RangeError was thrown building LayoutBuilder:
RangeError (index): Invalid value: Not in inclusive range 0..2: 3

The relevant error-causing widget was: 
  SwipableStack-[LabeledGlobalKey<_SwipableStackState>#fa547] file:///[MY_PROJECT]/lib/src/ui/screens/home/home.dart:74:12
When the exception was thrown, this was the stack: 
#0      List.[] (dart:core-patch/growable_array.dart:254:60)
#1      _HomeScreenState._swipeableContent.<anonymous closure> (package:[MY_PROJECT]/src/ui/screens/home/home.dart:81:34)
#2      _SwipableStackState._buildCards.<anonymous closure> (package:swipable_stack/src/swipable_stack.dart:395:37)
#3      new _GrowableList.generate (dart:core-patch/growable_array.dart:133:28)
#4      _SwipableStackState._buildCards (package:swipable_stack/src/swipable_stack.dart:391:19)

I can confirm that with version 0.7.1 the code and package works perfectly :)

PS: I can bring more code or info if needed.

Hey there I used the rewind() function to rewind to a previous card but it only goes 1 card back. How can I achieve more rewind. Currently using controller.currentIndex to set to previous card.

Hi!
Great package, thanks. would be great, if there would be a property for customization of the empty state, when the stack is empty:

Currently by default it shows empty container, a placeholder "Sorry, no more profile for you", or something like that,

Or any workaround?

When I run the project in debug mode it works fine but in release mode, it shows a grey screen as it looks in attached image

Hi

I can see the cards in the stack painted below the current card. Is there a way to move the back cards to be poking out of the top so the cards are falling down the page?

Aka this part:

Draw that along the top and the right, not just the right?

When there's a container on width 500px, the card swipe going under the container? Probably a zindex issue?

Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildAppBar(),
      body: Center(
        child: Container(
          constraints: BoxConstraints(
            minWidth: 300,
            maxWidth: 500,
            maxHeight: 730,
          ),
          padding: EdgeInsets.all(10),
          child: SwipeableStack(
            controller: _controller,
            onSwipeCompleted: (index, direction) {
              print('$index, $direction');
            },
            builder: (context, index, constraints) {
              final Post post = posts[index];
              return ProfileCard(
                post: post,
              );
            },
            itemCount: posts.length,
          ),
        ),
      ),
      bottomNavigationBar: _buildBottomBar(),
    );
  }
}

child: SwipableStack(
detectableSwipeDirections: const {
SwipeDirection.right,
SwipeDirection.left,
SwipeDirection.up,
},
controller: _controller,
stackClipBehaviour: Clip.none,
onSwipeCompleted: (index, direction) {
totalListCount = index;

                            if (direction == SwipeDirection.left) {

                              Provider.of<UserStore>(context, listen: false)
                                  .updateForgroundImage(
                                      imagePath('crossblue'));
                              reaction("dismiss", currentUser, index);
                            }
                            if (direction == SwipeDirection.right) {
                              reaction("like", currentUser, index);
                              Provider.of<UserStore>(context, listen: false)
                                  .updateForgroundImage(
                                      imagePath('heartred'));
                            }
                            if (direction == SwipeDirection.up) {
                              Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                      builder: (context) => UserProfile(
                                            userOrOther: true,
                                            user: currentUser,
                                          )));
                            }
                          },
                          horizontalSwipeThreshold: 0.8,
                          verticalSwipeThreshold: 0.8,
                          builder: (context, properties) {
                            // properties.constraints.
                            final itemIndex =
                                properties.index % matchList.length;
                            listIndex = properties.index % matchList.length;

                            print(
                                'itemCountController::${_controller.currentIndex}');

                            return (matchList.length > 0)
                                ? Stack(
                                    children: [
                                      ExampleCard(
                                        list: matchList,
                                        userData: matchList[itemIndex],
                                        assetPath: matchList[itemIndex]
                                            .profile_picture,
                                        currentUser: currentUser,
                                      ),
                                      // more custom overlay possible than with overlayBuilder
                                      if (properties.stackIndex == 0 &&
                                          properties.direction != null)
                                        CardOverlay(
                                          swipeProgress:
                                              properties.swipeProgress,
                                          direction: properties.direction,
                                        )
                                    ],
                                  )
                                : Container();
                          },
                        ),
                    )

reaction(String reaction, User opponent, int index) async {
print(HelpingMethods().getChannelId(user.id, opponent.id));

bool res = await Provider.of<UserStore>(context, listen: false)
    .sendReaction(context, reaction, opponent.id.toString());

if (res) {
  Provider.of<UserStore>(context, listen: false).removeMatchAt(index);
}

Provider.of<UserStore>(context, listen: false).updateForgroundImage('');

}

Hello team, If I placed a short video instead of Image, then when I swipe the video it keeps on playing with sound. That means it is not destroying the video widget. Any workaround?

Whenever I drag a card to the left the entire widget breaks with the following:

I/flutter ( 9115): {exception: _AssertionError, message: 'package:flutter/src/animation/animation_controller.dart': Failed assertion: line 610 pos 12: 'simulationDuration > Duration.zero': is not true.}

Another exception was thrown: 'package:flutter/src/animation/animation_controller.dart': Failed assertion: line 610 pos 12: 'simulationDuration > Duration.zero': is not true.

This doesn't happen in any other direction.

Once it's broken other errors start appearing:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
'package:flutter/src/rendering/object.dart': Failed assertion: line 1840 pos 12:
'!_debugDoingThisLayout': is not true.

Either the assertion indicates an error in the framework itself, or we should provide substantially
more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

The relevant error-causing widget was:
  Stack
  Stack:file:///home/bart/.pub-cache/hosted/pub.dartlang.org/swipable_stack-1.3.0/lib/src/swipable_stack.dart:386:18

When I call setState inside those callbacks, the next time you swipe won't work.

Overview

When SwipableStack moves card next, it updates state twice for incrementing index & reseting position. We can make them into a state

The only way I found to import ItemSwipeProperties is by importing it directly from src

import 'package:swipable_stack/src/model/swipe_properties.dart';

SwipableStack(
  builder: (BuildContext context, ItemSwipeProperties properties) {
    ...
  }
}

Hi, I have a problem when end of the stack came. I implemented two ways but I didn't success.

Following this issue #12 I added a listener like you suggested:

    _controller = SwipableStackController()
      ..addListener(() {
        if (_users.length - 1 <= _controller.currentIndex) {
          print('loading more users');
        }
        setState(() {});
      });

But when the last card is being swiped then listener is executed extremely times:

11 I[/flutter]() ( 6322): loading more users
11 I[/flutter]() ( 6322): loading more users
11 I[/flutter]() ( 6322): loading more users
11 I[/flutter]() ( 6322): loading more users

I thought: ok, so when the last card is shown I can use onSwipeCompleted callback to reset currentItem = 0 but didn't work because the library internally execute +1 on currentIndex, then SwipableStack shows again the last card.

Is there a solution for this problem?.

Thank you!!

I have a suggestion but first - Thanks for a great component.

Can we add an onSwipeUpdate callback that is passed SwipeDirection and SwipeProgress or else add them to the SwipableStackController ?

These values should be part of the controller so that the controller can be used in other Widgets (I need to provide additionally animation when a card is moved).

Currently the only way to get access to these values is via the OverlayBuilder which causes rebuild issues if animation is triggered from that callback.

Ideally we should have either the SwipableStackController enriched with these values or else provide an onSwipeUpdate(properties) callback.

Hi, I have a question, is there a way to change the spread of background cards?. I would like to change it to zero. I mean, just one photo on top of stack without using fullscreen image or Positioned.fill .

Thank you!

My layout is something like this

selector
_stack
__swipable stack

selector as data load after an api call and is passed to item count parameter

Problem:
sometime swipe has not effect on ui cards do not move
but my onComplete function prints and shows the sipedirection.

and if i hot reload it starts working again

Hi! Is there any chance that i can fix the lagging while user swiping? I think it is because of the animation or maybe the perfomance of the lib. Is there any way that i can solve this issue? Because this library is awesome, also unuseable because of the lagging(tearing). Thank you!