[Flutter CHALLENGE]: ListView shape animation

Question

In a listView I need to make an animation that the most visible item is with rectangular shape and the others are with circular shape.

Youtube link for the animation process https://youtu.be/Uc0M5kvTpHo

Does someone know how to implement this ?

I tried animationBuilder in listView or PageView and couldn't get a fluid effect

Answer 1

I think the recommended way to implement this is using a PageView. Specifically, if you use PageView.builder, you can use the position of the item and the page of the PageController to determine the shape/opacity of each item, and they should transition smoothly.

https://api.flutter.dev/flutter/widgets/PageView-class.html

For inspiration, this Medium post highlights some examples where a rotation is applied when items are scrolled out of/into view. In your case, it's very similar but you can change the borderRadius of your container instead.

https://medium.com/flutter-community/a-deep-dive-into-pageview-in-flutter-with-custom-transitions-581d9ea6dded