How to make a carousel where the center is bigger? (flutter)

Question

I want to have a slideshow where you see three container and the middle container should be bigger than the other two.

This is how it should look:

I tried the to put enlargeCenterPage: true,but it only works with a viewportFraction: 0.8.

This is how it looks now:

This is my code with the ,,carousel_slider: ^1.4.1'' plugin:

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

import '../classes/konto.dart';
import '../providers/account_type.dart';

class Carousel extends StatefulWidget {
  @override
  _CarouselState createState() => _CarouselState();
}

class _CarouselState extends State<Carousel> {
  @override
  Widget build(BuildContext context) {
    return Consumer<GeldKonto>(
      builder: (ctx, konto, child) => CarouselSlider.builder(
          height: MediaQuery.of(context).size.height * 0.5,
          //realPage: 1,
         aspectRatio: 16/4,
          viewportFraction: 0.4,
          initialPage: 0,
          enableInfiniteScroll: true,
          reverse: false,
          autoPlay: true,
          autoPlayInterval: Duration(seconds: 4),
          autoPlayAnimationDuration: Duration(milliseconds: 800),
          autoPlayCurve: Curves.fastOutSlowIn,
          pauseAutoPlayOnTouch: Duration(seconds: 10),
          enlargeCenterPage: true,
          scrollDirection: Axis.horizontal,
          itemCount: konto.kontos.length,
          itemBuilder: (BuildContext context, int i) {
            Map<String, Konto> kontoHier = konto.kontos;
            String key = kontoHier.keys.elementAt(i);
            return 
               Container(
                 height: 200,
                 child: Column(mainAxisAlignment: MainAxisAlignment.center ,
              children: <Widget>[
                  Text(
                    kontoHier[key].title,
                    style: Theme.of(context).textTheme.title,
                  ),
                  Container(
                    height: 150,
                    width: 150,
                    margin: EdgeInsets.all(10.0),
                    decoration: BoxDecoration(
                        color: Colors.transparent,
                        border: Border.all(
                          color: Colors.white54,
                          width: 2,
                        ),
                        shape: BoxShape.circle),
                        child: kontoHier[key].icon,
                       
                  ),
                   Text(
                    '${kontoHier[key].kontostand}',
                    style: Theme.of(context).textTheme.title,
                  ),
              ]
            ),
               );
          }),
    );
  }
}

How to make the center bigger (the two others smaller)?

I am new to flutter and would love to hear some advice :)

Answer 1

Use a scale widget like shown here

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

    class CArousel extends StatefulWidget {
      @override
      _CArouselState createState() => _CArouselState();
    }

    class _CArouselState extends State<CArousel> {
      int _current = 0;

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
              padding: EdgeInsets.only(top: 200),
              child: CarouselSlider.builder(
                  viewportFraction: 0.7,
                  initialPage: _current,
                  onPageChanged: (index) {
                    setState(() {
                      _current = index;
                    });
                  },
                  itemCount: 6,
                  itemBuilder: (ctx, int index) {
                    return Transform.scale(
                      scale: index == _current ? 1 : 0.8,
                      child: Container(
                        height: 400,
                        width: 300,
                        color: Colors.red,
                        child: Center(
                          child: Text(
                            "$index",
                            style: TextStyle(fontSize: 30),
                          ),
                        ),
                      ),
                    );
                  })),
        );
      }
    }