How to implement cycle wheel scroll list widget - flutter

Question

Flutter has ListWheelScrollView widget but I want cycle wheel scroll widget. Any ideas how to implement such widget.
How it should work:
For example, I have a list with 10 items and a selected item is 1
The selected element is positioned by center
above this element, you see the last element in the list below the second element
[10]
-> [1] <-
[2]
scroll down
[9]
-> [10] <-
[1]
etc.
Thanks!

Answer 1

You are right considering ListWheelScrollView.
The exact solution is to use ListWheelScrollView.useDelegate with ListWheelChildLoopingListDelegate.
Example:
import 'package:flutter/material.dart';
const String kTitle = 'Loop Wheel Demo';
void main() => runApp(new LoopWheelDemo());
class LoopWheelDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: kTitle,
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new HomePage(),
);
}
}
class HomePage extends StatelessWidget {
HomePage({Key key,}) : super(key: key);
#override
Widget build(BuildContext context) {
final _style = Theme.of(context).textTheme.display2;
return new Scaffold(
appBar: new AppBar(
title: new Text(kTitle),
),
body: new Center(
child: new ConstrainedBox(
constraints: BoxConstraints(
// Set height to one line, otherwise the whole vertical space is occupied.
maxHeight: _style.fontSize,
),
child: new ListWheelScrollView.useDelegate(
itemExtent: _style.fontSize,
childDelegate: ListWheelChildLoopingListDelegate(
children: List<Widget>.generate(
10, (index) => Text('${index + 1}', style: _style),
),
),
),
),
),
);
}
}

Answer 2

I've been trying to figure it out how to do that. I've tried lots of options, but the one that made me achieve what I wanted and what you are asking for was using the plugin:
Flutter Swiper (https://pub.dartlang.org/packages/flutter_swiper).
It's pretty customizable e flexible.
Here is the screenshot: https://imgur.com/a/ktxU6Hx
This is how I implemented it:
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
class Looping extends StatefulWidget {
#override
LoopingState createState() {
return new LoopingState();
}
}
class LoopingState extends State<Looping> {
List<int> numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
List<String> options = ['A', 'B', 'C', 'D'];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Infinity Loop Items'),),
body: Center(
child: Container(
height: 100.0,
child: Row(
children: <Widget>[
mySwiper(numbers),
mySwiper(options),
],
),
),
),
);
}
Widget mySwiper(List list) {
return Expanded(
child: Swiper(
itemCount: list.length,
scrollDirection: Axis.vertical,
control: SwiperControl(),
itemBuilder: (BuildContext context, int index) {
return Center(
child: Text(
list[index].toString(),
style: TextStyle(fontSize: 20.0),
),
);
}),
);
}
}