flutter - 如何制作中心较大的旋转木马？ ( flutter )

Question

我想要一个幻灯片放映，您可以看到三个容器，中间的容器应该比其他两个大。

它应该是这样的:

我试过设置 enlargeCenterPage: true，但它只适用于 viewportFraction: 0.8。

现在是这样的:

这是我使用 ,,carousel_slider: ^1.4.1'' 插件的代码:

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

如何让中心变大(其他两个变小)？

我是 Flutter 的新手，很想听听一些建议 :)

Answer 1

使用此处显示的比例小部件

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