I want to create a horizontal list view that scrolls automatically without user intervention at a certain speed. Also, this scroll should be done infinitely and the list view should be repeated.
In the search I did, usually the automatic scrolling was to scroll to a specific item, but I did not find the automatic scrolling until the end of the list.
Here is how you can achieve your desired output.
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
home: HomePage(),
),
);
}
class HomePage extends StatefulWidget {
const HomePage({
super.key,
});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
late final ScrollController _scrollController;
@override
void initState() {
_scrollController = ScrollController();
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
double minScrollExtent2 = _scrollController.position.minScrollExtent;
double maxScrollExtent2 = _scrollController.position.maxScrollExtent;
animateToMaxMin(
maxScrollExtent2,
minScrollExtent2,
maxScrollExtent2,
4, ///How fast or slow your widget's should move
_scrollController,
);
});
super.initState();
}
@override
void dispose() {
_scrollController.dispose();
super.dispose();
}
animateToMaxMin(
double max,
double min,
double direction,
int seconds,
ScrollController scrollController,
) {
scrollController
.animateTo(
direction,
duration: Duration(seconds: seconds),
curve: Curves.linear,
)
.then((value) {
direction = direction == max ? min : max;
animateToMaxMin(max, min, direction, seconds, scrollController);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home Page'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView(
controller: _scrollController,
scrollDirection: Axis.horizontal,
shrinkWrap: true,
children: const [
SizedBox(
height: 100,
width: 100,
child: Text('1'),
),
SizedBox(
height: 100,
width: 100,
child: Text('2'),
),
SizedBox(
height: 100,
width: 100,
child: Text('3'),
),
SizedBox(
height: 100,
width: 100,
child: Text('4'),
),
SizedBox(
height: 100,
width: 100,
child: Text('5'),
),
SizedBox(
height: 100,
width: 100,
child: Text('6'),
),
SizedBox(
height: 100,
width: 100,
child: Text('7'),
),
SizedBox(
height: 100,
width: 100,
child: Text('8'),
),
SizedBox(
height: 100,
width: 100,
child: Text('9'),
),
SizedBox(
height: 100,
width: 100,
child: Text('10'),
)
],
),
),
),
);
}
}