google / flutter.widgets

Home Page:https://pub.dev/packages/flutter_widgets

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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?