如何同时添加和滚动两个列表？

Question

I have one scrollable list similar to cupertinoPicker. I need to make it so that I have 2 lists, one with the values I already have and the second list with the icons on the right. Tell me, how can I add a second list and make it so that when scrolling, 2 lists scroll at once? Like the example I have attached below. Now I have only one list with values, I need to add a second list with icons on the right and make it scroll along with the main one

picker

class WheelPicker extends StatefulWidget {
  final Function(dynamic) onValueChanged;
  final int? startPosition;
  final double itemSize;
  final double? listHeight;
  final int currentPosition;
  final double? listWidth;
  final FixedExtentScrollController? controller;
  final List<String> list;

  const WheelPicker({
    Key? key,
    required this.onValueChanged,
    required this.currentPosition,
    required this.itemSize,
    this.startPosition,
    this.listHeight,
    this.controller,
    this.listWidth, required this.list,
  }) : super(key: key);

  @override
  State<WheelPicker> createState() => _WheelPickerState();
}

class _WheelPickerState extends State<WheelPicker> {
  FixedExtentScrollController? fixedExtentScrollController;
  int? currentPosition;

  @override
  void initState() {
    super.initState();
    currentPosition = widget.currentPosition;
    fixedExtentScrollController = widget.controller ??
        FixedExtentScrollController(initialItem: currentPosition ?? 0);
  }

  void _listener(int position) {
    setState(() {
      currentPosition = position;
    });
    widget.onValueChanged(currentPosition);
  }

  @override
  Widget build(BuildContext context) {
    return RotatedBox(
      quarterTurns: 0,
      child: SizedBox(
        height: widget.listHeight ?? double.infinity,
        width: widget.listWidth ?? double.infinity,
        child: _getListWheelScrollView(),
      ),
    );
  }

  Widget _getListWheelScrollView() {
    return ListWheelScrollView(
      diameterRatio: 20,
      onSelectedItemChanged: _listener,
      controller: fixedExtentScrollController,
      physics: const FixedExtentScrollPhysics(
        parent: BouncingScrollPhysics(),
      ),
      useMagnifier: true,
      magnification: 1,
      itemExtent: widget.itemSize,
      children: _convertListItems(),
    );
  }

  List<Widget> _convertListItems() {
    List<Widget> children = [
      for (int i = 0; i < widget.list.length; i++) _item(widget.list[i], i),
    ];

    return children;
  }

  Widget _item(String text, int pos) {
    return Align(
      alignment: Alignment.centerLeft,
      child: Container(
        height: 48,
        width: double.infinity,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          border: Border.all(
            color: currentPosition == pos
                ? constants.Colors.white
                : Colors.transparent,
          ),
        ),
        child: Text(
          text,
          style: currentPosition == pos
              ? constants.Styles.smallHeavyTimerTextStyleWhite
              : constants.Styles.smallerBookTextStyleWhite.copyWith(
                  color: constants.Colors.white.withOpacity(0.5),
                ),
        ),
      ),
    );
  }
}

now I have

need to do

Answer 1

you can do something like this:

FixedExtentScrollController? fixedExtentScrollController1;
FixedExtentScrollController? fixedExtentScrollController2;

RotatedBox(
      quarterTurns: 0,
      child: SizedBox(
        height: widget.listHeight ?? double.infinity,
        width: widget.listWidth ?? double.infinity,
        child: row(
        children:[
           expanded(
             child: _getListWheelScrollView(fixedExtentScrollController1),
           ),
           expanded(
             child: _getListWheelScrollView(fixedExtentScrollController2),
           ),
        ]
        ),
      ),
    )



    Widget _getListWheelScrollView(FixedExtentScrollController controller) {
    return ListWheelScrollView(
      diameterRatio: 20,
      onSelectedItemChanged: _listener,
      controller: controller,
      physics: const FixedExtentScrollPhysics(
        parent: BouncingScrollPhysics(),
      ),
      useMagnifier: true,
      magnification: 1,
      itemExtent: widget.itemSize,
      children: _convertListItems(),
    );
  }

Answer 2

You can add a listener on main controller, then listen to it changes and set the position on second controller.

 final ScrollController mainCOntroller = ScrollController();
  final ScrollController secondController = ScrollController();

  @override
  void initState() {
    super.initState();

    mainCOntroller.addListener(() {
      if (mainCOntroller.hasClients && secondController.hasClients) {
        secondController.jumpTo(mainCOntroller.offset);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Row(
      children: [
        Expanded(
          child: ListView.builder(
            controller:mainCOntroller ,
            itemBuilder: (context, index) => Text("main $index"),
          ),
        ),
        Expanded(
          child: ListView.builder(
            controller: secondController,
            itemBuilder: (context, index) => Text("listener $index"),
          ),
        ),
      ],
    ));
  }
}