How to make the center of carousel slider bigger than the others?

Question

I want to make the center Carousel Bigger than the others

      CarouselSlider(
      items: generateImageTiles(),
      options: CarouselOptions(
        enlargeCenterPage: true,
        aspectRatio: 16 / 5,
        viewportFraction: 0.4,
        reverse: false,
        initialPage: _current,
        onPageChanged: (index, other) {
          setState(() {
            _current = index;
            pizza = images[_current];
            price = prices[_current];
            name = names[_current];      
          });
        },
      ),
    ),

This is what i'm trying to achieve APP UI

This package only enlarges the center item a little bit and as you want totally another shape of the widget in the center, I think you should develop your own carousel. — Abbasihsn, Aug 01 '21 at 13:59

score 1 · Answer 1 · answered Aug 01 '21 at 14:08

On CarouselOptions, viewportFraction is responsible for making the center widget large/small. It can be >0.0 and <=1.0. If you wish to change aspectRatio, play with aspectRatio on CarouselOptions.

If you find Ui is not changing, do flutter clean and run again.

Full Widget:

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

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

  @override
  _CurSState createState() => _CurSState();
}

class _CurSState extends State<CurS> {
  int _current = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CarouselSlider(
        items: [1, 2, 3, 4, 5].map((i) {
          return Builder(
            builder: (BuildContext context) {
              return Container(
                width: MediaQuery.of(context).size.width,
                margin: EdgeInsets.symmetric(horizontal: 5.0),
                decoration: BoxDecoration(color: Colors.amber),
                child: Text(
                  'text $i',
                  style: TextStyle(fontSize: 16.0),
                ),
              );
            },
          );
        }).toList(),
        options: CarouselOptions(
          enlargeCenterPage: true,
          aspectRatio: 16 / 5,
          viewportFraction: .8,
          reverse: false,
          initialPage: _current,
          onPageChanged: (index, other) {
            setState(() {
              _current = index;
            });
          },
        ),
      ),
    );
  }
}

score 0 · Answer 2 · answered Feb 13 '22 at 18:23

0

You need to add an attrbute in options called as

enlargeCenterPage: true,

viewportFraction: 0.8,

That will do it for you. Also make the viewportfraction less than 1. That will make side cards visible.

answered Feb 13 '22 at 18:23

Umashankar Das

601
4
12

How to make the center of carousel slider bigger than the others?

2 Answers2