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

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'),
                        ),
                      ),
                    ],
                  );
                }),
          ],
        ),
      ),
    );
  }
}