How to make ListWheelScrollView horizontal

Question

I Am trying to have a horizontal ListView Widget that magnifies the center items. I tried using the normal ListView but I couldn\'t get the center

Answer 1

You can make this work with the help of ListView and PageView along with NotificationListener. Below is my code for the same-

import 'dart:math';
import 'package:flutter/material.dart';        
const SCALE_FRACTION = 0.9;
        const FULL_SCALE = 1.0;
        final PAGER_HEIGHT = SizeConfig.screenHeight*0.32;
        const PAGER_WIDTH = double.infinity;

        class PaymentWidget extends StatefulWidget {
          @override
          State createState() => _PaymentState();
        }

        class _PaymentState extends State {
          double viewPortFraction = 0.9;
          int currentPage = 1;
          double page = 2.0;

          PageController pageController;

          final List _cardsImages = ['image/path1', 'image/path2',
            'image/path3', 'image/path4'];

          @override
          void initState() {
            pageController = PageController(
                initialPage: currentPage, viewportFraction: viewPortFraction);
            super.initState();
          }

          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: null,
              body: _creditCardsList()
        );
        }

       Widget _creditCardsList() {
            return ListView(
              shrinkWrap: true,
                  children: [
                    Container(
                      height: PAGER_HEIGHT,
                      child: NotificationListener(
                        onNotification: (ScrollNotification notification) {
                          if (notification is ScrollUpdateNotification) {
                            setState(() {
                              page = pageController.page;
                            });
                          }
                        },
                        child: PageView.builder(
                          onPageChanged: (pos) {
                            setState(() {
                              currentPage = pos;
                            });
                          },
                          physics: BouncingScrollPhysics(),
                          controller: pageController,
                          itemCount: _cardsImages.length,
                          itemBuilder: (context, index) {
                            final scale =
                            max(SCALE_FRACTION, (FULL_SCALE - (index - page).abs()) + viewPortFraction);
                            return CreditCardTile(
                                _cardsImages[index], scale);
                          },
                        ),
                      ),
                    ),
                  ],
            );

          }

        Widget CreditCardTile(String image, double scale) {
            return Align(
              alignment: Alignment.bottomCenter,
              child:Container(
                  height: PAGER_HEIGHT * scale,
                  width: PAGER_WIDTH * scale,
                  child: Card(
                    elevation: 5,
                    shadowColor: constColors.blueWhiteShade,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0)
                    ),
                    clipBehavior: Clip.antiAlias,
                    child: Image.asset(
                      image,
                      fit: BoxFit.cover,
                    ),
                  )
              ) ,
            );

          }