2

with the following example code, is get a very ugly animation. I would even say, it's no animation at all. The next Page will just appear after the setstate is called.

How can I create a smooth delete animation using PageView? If it is not possible via PageView, is there any alternative, that has the "snapping cards" feature?

Here is my code:

class SwipeScreen extends StatefulWidget {
  const SwipeScreen({Key key}) : super(key: key);

  static const routeName = '/swipe';

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

class _SwipeScreenState extends State<SwipeScreen> {
  List<String> content = ['one', 'two', 'three', 'four', 'five'];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        scrollDirection: Axis.vertical,
        itemCount: content.length,
        controller: PageController(viewportFraction: 0.8),
        itemBuilder: (context, index) {
          return Dismissible(
            key: ValueKey(content[index]),
            child: Card(
              child: Container(
                height: MediaQuery.of(context).size.height * 0.8,
                child: Text('test'),
              ),
            ),
            onDismissed: (direction) {
              setState(() {
                content = List.from(content)..removeAt(index);
              });
            },
          );
        },
      ),
    );
  }
}
mincer
  • 21
  • 1
  • 2

2 Answers2

0

Replacing PageView.builder() with ListView.builder() will create a smoother animation.

Hopefully this is what you're looking for!

Will Hlas
  • 1,241
  • 1
  • 6
  • 14
  • 1
    Thanks for the answer. The reason why I'm using the PageView is that it has the snapping functionality. So that a Card will always be in the center of the screen. Is there any possibility to achieve this with ListView as well? – mincer Nov 05 '20 at 10:32
0

Unfortunately, the PageView widget is not intended to be used with the Dismissible widget as the animation when the dismiss is complete is not implemented.

You can still change your PageView to a ListView and set a physics to PageScrollPhysics() to get the animation on dismiss but you will probably encounter some other issues on Widget sizes

F Perroch
  • 1,988
  • 2
  • 11
  • 23
  • Hey, PageScrollPhysics looks pretty promising. Just to be sure I fully understand your comment: Do you think the App will encounter performance problems at some points? Or do you just mean the widget itself will be very complicated? – mincer Nov 05 '20 at 10:41
  • The widget may be complicated to get the same behavior as the PageView on scrolling events. When you dismiss an item in the middle of your list, the scroll position may be shifted – F Perroch Nov 05 '20 at 12:50
  • Any idea to solve the behavior? From my point of view that should only happen at the beginning and end of the list. Could it be a solution to make the list infinite, or like a carousel? -- Meaning: if the last element is reached, it shall already point at the first once again. Is there maybe a plugin somewhere existing that is already doing that? I just found the swiper package (pretty buggy) and the carousel package (couldn't get it animated correctly). – mincer Nov 05 '20 at 14:42
  • I don't know It depends on what you want exactly. in any case I think you could find a way without using a package. Maybe you could look again to the page view and implement an animation on the `confirmDismiss` method to your tile and reduce it's size ? Good luck :) – F Perroch Nov 05 '20 at 15:10
  • Never made it working till now. I tried a couple of different approaches with no luck till now. I couldn't get any animation running for confirmDismiss. Does someone maybe know how this can be achieved? – mincer Dec 14 '20 at 23:03