Flutter循环转盘卡

Question

我有一个颤振问题。我想创建一个循环的旋转木马，所以当你在最后一个元素时，第一个就是下一个。但不使用第三方小部件。

有没有什么方法可以用纯飞镖创造出这样的特征？

以下是我可以做的：

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

Answer 1

我用过这个flutter carousal软件包，它运行良好。https://pub.dev/packages/carousel_slider/install

我的完整源代码附在下面：

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:carousel_slider/carousel_slider.dart';
final List<Map<String, String>> carousalCards = [
{"cardName": "Rohini"},
{"cardName": "Babu"},
{"cardName": "Hari"}
];
class CarousalCards extends StatelessWidget {
const CarousalCards({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
appBar: AppBar(
leading: IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.of(context).pop(),
),
iconTheme: const IconThemeData(color: Colors.black),
title: const Center(
child: Text("Carousal Cards",
style: TextStyle(color: Color.fromRGBO(41, 82, 119, 1))),
),
backgroundColor: Colors.white,
),
body: Container(
child: CarouselSlider.builder(
itemCount: carousalCards.length,
options: CarouselOptions(height: 950),
itemBuilder: (ctx, index, realIdx) {
return Padding(
padding: const EdgeInsets.only(top: 40, left: 0),
child: Column(children: [
Container(
width: 420,
height: 120,
decoration: BoxDecoration(
color: Color(0xFF1f4068),
),
child: Center(
child: Text(
carousalCards[index]['cardName'].toString(),
style: TextStyle(fontSize: 20.0, color: Colors.white),
)))
]),
);
},
)));
}
}

在pubspec.yaml中添加依赖项

dependencies:
carousel_slider: ^4.0.0