Synchronizing ListWheelScrollView in Flutter
omthetheos opened this issue · comments
Problem description
When I scroll through one list, the other list either lags or does not scroll smoothly.https://pub.dev/packages/linked_scroll_controller
allows to sync lists but does not support FixedExtendScrollPhysics.
https://pub.dev/packages/linked_scroll_controller works perfectly if we are using CampingScrollPhysics but throws an error when used with a widget that uses FixedExtendScrollPhysics. I want both the list to move Synchronizing
Steps to reproduce
import 'package:linked_scroll_controller/linked_scroll_controller.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'List',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const List(),
);
}
}
class List extends StatefulWidget {
const List({Key? key}) : super(key: key);
@override
_ListState createState() => _ListState();
}
class _ListState extends State<List> {
late LinkedScrollControllerGroup
_controllers; // Declare link scroll Controller
late ScrollController
_letters; // Declare scroll controller for first list/widget
late ScrollController
_numbers; // Declare scroll controller for second list/widget
@override
void initState() {
super.initState();
_controllers =
LinkedScrollControllerGroup(); // Initialize link scroll controller
_letters = _controllers
.addAndGet(); // Attach the first list/widget scroll controller to link scroll controller
_numbers = _controllers
.addAndGet(); // Attach the second list/widget scroll controller to link scroll controller
}
@override
void dispose() {
_letters.dispose();
_numbers.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Material(
child: Directionality(
textDirection: TextDirection.ltr,
child: Column(
children: [
Expanded(
child: ListWheelScrollView(
controller: _letters,
physics: const FixedExtentScrollPhysics(),
itemExtent: 100,
children: [
for (int i = 0; i < 5; i++) ...[
Container(
color: Colors.red,
height: 50,
width: 50,
)
]
]),
),
Expanded(
child: ListWheelScrollView(
controller: _numbers,
physics: const FixedExtentScrollPhysics(),
itemExtent: 100,
children: [
for (int i = 0; i < 5; i++) ...[
Container(
color: Colors.red,
height: 50,
width: 50,
)
]
]),
),
],
),
),
);
}
}
class _Tile extends StatelessWidget {
final String caption;
_Tile(this.caption);
@override
Widget build(_) => Container(
margin: const EdgeInsets.all(8.0),
padding: const EdgeInsets.all(8.0),
height: 250.0,
child: Center(child: Text(caption)),
);
}
Expected behavior
Both lists should sync and hence move synchronously.
Actual behavior
It's throwing a error :
FixedExtentScrollPhysics can only be used with Scrollables that uses the FixedExtentScrollController
I encountered the same issue, have you resolved it?