Flutter : How create PageView with previous and next item smaller in size?

Question

I want to create below type of carousel view in Flutter

What I have tried so far

I have already this carousel_slider 1.4.1 package:flutter package not able to create carousel view as per my requirement
I Have tried using source and try to modify as per my requirement but not get proper solution here is the output of modified code

I have also tried this medium post.
https://medium.com/@caleb_52205/using-animatedbuilder-and-pageview-builder-for-a-beautiful-carousel-3b05161d981d

My code

Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/home.png'),
                  fit: BoxFit.cover,
                ),
                shape: BoxShape.rectangle,
              ),
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    width: 50.0,
                    height: 53.0,
                    child: Center(
                      child: Text(
                        "N",
                        style: TextStyle(
                            color: AppColors.textColor, fontSize: 20.0),
                      ),
                    ),
                    padding:
                        EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
                    decoration: BoxDecoration(
                        border:
                            Border.all(color: AppColors.textColor, width: 2)),
                  ),
                  SizedBox(
                    height: 68,
                  ),
                  Text(
                    "Hi",
                    style: TextStyle(fontFamily: 'f_book', fontSize: 16),
                  ),
                  Text(
                    userName,
                    style: TextStyle(
                        fontFamily: 'f_bold',
                        fontSize: 28,
                        fontWeight: FontWeight.bold),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 40),
                    child: CarouselSlider(
                      items: child,
                      autoPlay: false,
                      height: 400,
                      enableInfiniteScroll: true,
                      initialPage: 0,
                      enlargeCenterPage: true,
                      aspectRatio: 2.0,
                      onPageChanged: (index) {
                        setState(() {
                          _current = index;
                        });
                      },
                    ),
                  ),
                  Container(
                      margin: EdgeInsets.only(top: 40),
                      child: Center(child: Text(Constants.howDoesItWork)))
                ],
              ),
            )

If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.

Already answered here https://stackoverflow.com/a/47357960/3480829 — Alex Kuzmin, Mar 26 '20 at 07:13

score 1 · Answer 1 · edited Apr 05 '22 at 19:09

You just need to put this class in a scaffold.

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

 @override
 State<PageViewExample> createState() => _PageViewExampleState();
}

class _PageViewExampleState extends State<PageViewExample> {
  int _currentIndex = 0;

  final _pageViewController =
  PageController(initialPage: 0, viewportFraction: 0.75);

  final myImagesList = [
    'asset/uni_images/ada.jpg',
    'asset/uni_images/atu.jpg',
    'asset/uni_images/aztu.jpg',
    'asset/uni_images/adnsu.jpg',
    'asset/uni_images/bdu.jpg',
    'asset/uni_images/idman.jpg',
    'asset/uni_images/adra.jpg',
    'asset/uni_images/azi.jpg',
    'asset/uni_images/musiqiaka.jpg',
    'asset/uni_images/ndu.jpg',
    'asset/uni_images/dia.jpg',
    'asset/uni_images/atuGence.jpg',
    'asset/uni_images/admiu.jpg',
    'asset/uni_images/adu.jpg',
    'asset/uni_images/sdu.jpg',
    'asset/uni_images/adpu.jpg',
    'asset/uni_images/aqrar.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        height: 200,
        child: PageView.builder(
            controller: _pageViewController,
            itemCount: myImagesList.length,
            physics: const BouncingScrollPhysics(
                parent: AlwaysScrollableScrollPhysics()),
            onPageChanged: (index) {
              setState(() {
                _currentIndex = index;
              });
            },
            itemBuilder: (context, index) {
              final images = myImagesList[index];
              var _scale = _currentIndex == index ? 1.0 : 0.8;
              return TweenAnimationBuilder(
                  tween: Tween(begin: _scale, end: _scale),
                  duration: const Duration(milliseconds: 350),
                  child: Container(
                    decoration: BoxDecoration(
                      color: secondColor,
                      borderRadius: BorderRadius.circular(15),
                      image: DecorationImage(
                          image: AssetImage(images), fit: BoxFit.cover),
                    ),
                  ),
                  builder: (context, double value, child) {
                    return Transform.scale(
                      scale: value,
                      child: child,
                    );
                  });
            }),
      ),
    );
  }
}

Flutter : How create PageView with previous and next item smaller in size?

1 Answers1