how to infinite loop array on flutter - arrays

Question

i want to asking about my problem, i want to make a stack of card with ifinite loop when stack card on last index on array, i want to make it loop to first index. i use satck widget and page builder for it, i have a list of data :
import 'package:flutter/material.dart';
List<String> images = [
'assets/images/trivia/bedroom.png',
'assets/images/trivia/digital-signature.png',
];
List<String> title = [
'“41 percent of job seekers search for jobs while in bed”',
'“Digital signatures are legally recognized.”',
];
List<Color> colorList = [
Color(0xffa605ad),
Color(0xffe0991e),
];
and my flutter code :
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'data.dart';
import 'dart:math';
void main() => runApp(MaterialApp(
home: Trivia(),
debugShowCheckedModeBanner: false,
));
class Trivia extends StatefulWidget {
#override
_TriviaState createState() => new _TriviaState();
}
var cardAspectRatio = 12.0 / 16.0;
var widgetAspectRatio = cardAspectRatio * 1.2;
class _TriviaState extends State<Trivia> {
var currentPage = images.length - 1.0;
#override
Widget build(BuildContext context) {
PageController controller = PageController(initialPage: images.length - 1);
controller.addListener(() {
setState(() {
currentPage = controller.page;
});
});
return Container(
decoration: BoxDecoration(
color: Colors.white,
),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Column(
children: <Widget>[
SizedBox(
height: 70,
),
Container(
alignment: Alignment.center,
child: Text(
'Please Wait',
textAlign: TextAlign.center,
),
),
SizedBox(
height: 60,
),
Stack(
children: <Widget>[
CardScrollWidget(currentPage),
Positioned.fill(
child: PageView.builder(
itemCount: images.length,
controller: controller,
reverse: true,
itemBuilder: (context, index) {
return Container();
},
),
),
],
),
],
),
),
);
}
}
class CardScrollWidget extends StatelessWidget {
double currentPage;
var padding = 20.0;
var verticalInset = 20.0;
CardScrollWidget(this.currentPage);
#override
Widget build(BuildContext context) {
return new AspectRatio(
aspectRatio: widgetAspectRatio,
child: LayoutBuilder(builder: (context, contraints) {
var width = contraints.maxWidth;
var height = contraints.maxHeight;
var safeWidth = width - 2 * padding;
var safeHeight = height - 2 * padding;
var heightOfPrimaryCard = safeHeight;
var widthOfPrimaryCard = heightOfPrimaryCard * cardAspectRatio;
var primaryCardLeft = safeWidth - widthOfPrimaryCard;
var horizontalInset = primaryCardLeft / 2;
List<Widget> cardList = new List();
for (var i = 0; i < images.length; i++) {
var delta = i - currentPage;
bool isOnRight = delta > 0;
var start = padding +
max(
primaryCardLeft -
horizontalInset * -delta * (isOnRight ? 15 : 1),
0.0);
var cardItem = Positioned.directional(
top: padding + verticalInset * max(-delta, 0.0),
bottom: padding + verticalInset * max(-delta, 0.0),
start: start,
textDirection: TextDirection.rtl,
child: ClipRRect(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16.0),
border: Border.all(color: colorList[i], width: 2)),
child: AspectRatio(
aspectRatio: cardAspectRatio,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Text(
'Fun Fact',
textAlign: TextAlign.center,
style: TextStyle(
decorationColor: Colors.black,
fontSize: 22,
fontFamily: 'Poppins-ExtraBold'),
),
Image.asset(
images[i],
scale: 3,
),
Align(
alignment: Alignment.bottomLeft,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(
horizontal: 16.0, vertical: 8.0),
child: Text(title[i],
textAlign: TextAlign.center,
style: TextStyle(
color: colorList[i],
fontSize: 18.0,
fontFamily: 'TTCommons')),
),
SizedBox(
height: 10.0,
),
],
),
)
],
),
),
),
),
);
cardList.add(cardItem);
}
return Stack(
children: cardList,
);
}),
);
}
}
i want to make the card loopable by array. thank you anyway

Answer 1

You can do this using an PageView, the default is loop, unless you provide an item count for PageView. Example
final controller = new PageController(initialPage: 999);
...
new PageView.builder(
controller: controller,
itemBuilder: (context, index) {
return new Center(
child: new Text('${index % 5}'),
);
},
)
I don't know if you need exactly the stack and can't do with PageView.. but if you can't do with PageView, i'll try searching an answer to you.
I Hope i have helped you!