How to make Arc ( Curve ) carousel ( ListVie,Row Widget ) in Flutter? - carousel

Question

I would want to have a Carousel/Swiper/Row that elements( images / icons ) follow path of curve ( Arc ), I want to scroll the elements in curve path not in straight path , Please share if u have any idea .
you can check the example in link below :
https://github.com/walmartlabs/curved-carousel
enter image description here

Answer 1

Yes, you can check that, i used PageView:
Ex:
class _MyHomePageState extends State<MyHomePage> {
PageController _pageController =
PageController(initialPage: 0, viewportFraction: 0.2);
int pageChangedIndex = 0;
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Align(
alignment: Alignment.bottomCenter,
child: Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Container(
height: 100.0,
color: Colors.blue,
),
PageView.builder(
itemCount: 20,
controller: _pageController,
physics: BouncingScrollPhysics(),
onPageChanged: (index) {
setState(() {
pageChangedIndex = index;
});
},
itemBuilder: (context, index) {
print(pageChangedIndex.toString() + ' ' + index.toString());
final scale = max(SCALE_FRACTION,
(FULL_SCALE - (index - pageChangedIndex).abs()) + 0.2);
return Stack(
children: <Widget>[
AnimatedPositioned(
duration: Duration(milliseconds: 600),
bottom: index - 2 == pageChangedIndex
? 10.0
: index - 1 == pageChangedIndex
? 30
: index + 1 == pageChangedIndex
? 30.0
: index + 2 == pageChangedIndex
? 10.0
: index == pageChangedIndex
? 50.0
: 10.0,
child: Container(
color: Colors.red,
// height: pageChangedIndex == index
// ? PAGER_HEIGHT * scale
// : 45.0,
// width: pageChangedIndex == index
// ? PAGER_HEIGHT * scale
// : 45.0,
child: Text('hey there'),
),
),
],
);
}),
],
),
),
);
}
}