Bundle two list of data to update depedning on scroll option

Question

My problem is that I can't come up with the idea how to bundle data of two ListWheelScrollView, so taht they are being updated depending on chosen value of first List.

here is the represantation of two scrollable lists placed vertically parallel to each other. In the first list data of sizes of product is represented. In the second the availability of product.

So the problem is to find out how to update availability data, while scrolling the first list.

Here I have size and availability data stored into list.

final List<Map<String, int>> _sizeAndAvailability = [
    {'size': 15, 'availability': 8},
    {'size': 16, 'availability': 5},
    {'size': 17, 'availability': 6},
    {'size': 18, 'availability': 7},
  ];

I am trying to update 'availability' data depending on 'size' data. So that each time when user chooses specific size, 'In stock' could render 'availability' data for the index of chosen 'size'. That's what I tried to do.

SizedBox(
                        height: MediaQuery.of(context).size.height * 0.3,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            SizedBox(
                              width: 70,
                              child: ListWheelScrollView.useDelegate(
                                itemExtent: 50,
                                perspective: 0.005,
                                diameterRatio: 1.2,
                                squeeze: 1.0,
                                physics: const FixedExtentScrollPhysics(),
                                childDelegate: ListWheelChildBuilderDelegate(
                                  childCount: _sizeAndAvailability.length,
                                  builder: (context, index) {
                                    _indexOfSize = index;
                                    return ScrollWheelTile(
                                        size: _sizeAndAvailability[index]
                                                ['size']
                                            .toString());
                                  },
                                ),
                              ),
                            ),
                            const SizedBox(width: 10),
                            SizedBox(
                              width: 120,
                              child: ListWheelScrollView.useDelegate(
                                itemExtent: 50,
                                perspective: 0.005,
                                diameterRatio: 1.2,
                                squeeze: 1.0,
                                useMagnifier: true,
                                physics: const FixedExtentScrollPhysics(),
                                childDelegate: ListWheelChildBuilderDelegate(
                                  childCount: 1,
                                  builder: (context, index) {
                                    return Container(
                                      color: const Color.fromARGB(
                                          255, 225, 225, 225),
                                      child: Text(
                                          'In stock: ${_sizeAndAvailability[_indexOfSize]['availability']}'),
                                    );
                                  },
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),

Answer 1

You should add a callback to the first scrolled view via its onSelectedItemChanged parameter, that updates the "available" data and calls setState() update the display.

I think you do not need a scrollable list for the second list, a suitably aligned Text will be fine.

All of the above requires use of a StatefulWidget, of course.