颤振环轮播卡

时间:2020-09-22 09:11:55

标签: flutter dart mobile carousel

我对扑打有​​疑问。我想创建一个循环的圆盘传送带,所以当您位于最后一个元素时,第一个是下一个。但无需使用第三方控件。

有什么方法可以只用飞镖来创建这样的特征?

这是我能做的:

class TemplatesBody extends StatefulWidget {
  @override
  _TemplatesBodyState createState() => _TemplatesBodyState();
}

class _TemplatesBodyState extends State<TemplatesBody> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
        child: Column(

          children: <Widget>[
            SizedBox(height: 10.0,),
            Text(
              'Templates for restaurants',
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: 18,
                  color: Colors.black.withOpacity(.8)),
            ),
            SizedBox(height: 30.0,),
            SizedBox(
              height: 380, 
              child: PageView.builder(
                itemCount: 5,
                controller: PageController(viewportFraction: 0.7),
                onPageChanged: (int index) => setState(() => _index = index),
                itemBuilder: (_, i) {
                  return Transform.scale(
                    scale: i == _index ? 1 : 0.9,
                    child: Card(
                      elevation: 9,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(30)),
                      child: Center(
                        child: Text(
                          "Template ${i + 1}",
                          style: TextStyle(
                              fontSize: 32,
                              fontWeight: FontWeight.bold,
                              color: Colors.brown.withOpacity(.5)),
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

0 个答案:

没有答案