Adding next and previous buttons to a ListView in flutter - flutter

Question

I was converting the following below ui to code.
I didn't find a suitable package for it, im stepper also didn't have the ability to customize in this way.
So I tried to use listView.builder.
Now I don't know how to add the next and previous buttons.
so that the number inside the scroll view scrolls like the picture below and is placed in the view area.
If you know a suitable package, introduce it.
my code:
FadingEdgeScrollView.fromScrollView(
gradientFractionOnEnd: 0.2,
gradientFractionOnStart: 0.15,
child: ListView.builder(
controller: _controller2,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
int one = index + 1;
int two = 0;
Color colorWhat(int q) {
Color color;
if (q == two) {
color = Color(0xff0AFF6C);
} else {
color = Colors.white;
}
return color;
}
double sizeOfCircle(int qq) {
int size;
if (qq == 0) {
size = 27;
} else {
size = 22;
}
return size.toDouble();
}
double sizeOfCircleText(int qqq) {
double size;
if (qqq < 10) {
size = 13.9;
} else {
size = 13.7;
}
return size;
}
return GestureDetector(
child: Row(
children: [
Container(
alignment: Alignment.center,
width: sizeOfCircle(index),
// height: sizeOfCircle(index),
// padding: EdgeInsets.all(sizeOfCircle(index)),
margin: const EdgeInsets.fromLTRB(
2, 0, 17, 0),
decoration: BoxDecoration(
color: colorWhat(index),
shape: BoxShape.circle,
boxShadow: const [
BoxShadow(
offset: Offset(0, 5),
blurRadius: 10.0,
spreadRadius: -7,
),
],
),
child: Text(
one.toString(),
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: sizeOfCircleText(index),
),
),
),
],
),
onTap: () =>
Scaffold.of(context).showSnackBar(
SnackBar(
content: Text((index+1).toString()),
),
),
);
},
itemCount: 100,
),
),

Answer 1

first select a current index like this:
int currentPageIndex = 0;
and then on tap function. Write a code like this
for decrement...
if (currentPageIndex == 4) {
return;
}
setState(() {
currentPageIndex += 1;
});
for Increment...
if (currentPageIndex == 4) {
return;
}
setState(() {
currentPageIndex += 1;
});
Change your text...
Text(
'${index + 1}'
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: sizeOfCircleText(index),
),
),
and change your onTap function like this:
onTap: () {
setState(() {
currentPageIndex = index;
});
},