如何制作中心更大的旋转木马? (颤振)

问题描述 投票:0回答:1

我想放映幻灯片,您会看到三个容器,中间的容器应大于其他两个容器。

这是它的外观:slideshow where you can see three Elements at once which center item is bigger or the other two smaller

我曾尝试将expandCenterPage:设置为true,但仅适用于viewportFraction:0.8。

这是现在的样子:the center is not bigger as I would like to have

这是我的代码,带有,, 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 dart flutter-layout flutter-animation
1个回答
1
投票

使用类似此处所示的比例小部件

© www.soinside.com 2019 - 2024. All rights reserved.