Maintaining the scroll position when the list is being modified in flutter

Question

I have a list thay displays elements with different heights (it can be also zero which mean the element is hidden), and I have a slider that controls the heights if the elements using a certain equation. The problem is, if I am standing on the 15th element for example, and i start increasing the height of the elements, the elements in the positions 0,...,14 "start pushing" the 15th element down in the list and I end up losing my position. I tried using the jumpTo method of the scroll controller but the problem is because rhe heights are different, I cannot calculate the exact offsset that I need. Is there a way to fix this problem?

I tried calculating the offsset but it did not work fine.

Answer 1

It can indeed be challenging. One possible approach is to estimate element height and use jumpTo method to scroll to estimated offset.

Calculate the estimated offset by summarizing heights above the current position. Determine a buffer or padding to prevent close-up scrolling. Apply the offset using the jumpTo method of the ScrollController.

You can try this example

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollController _scrollController = ScrollController();

  // Store the current slider value that determines element heights
  double _sliderValue = 0.0;

  // Store the estimated offset when the slider is changed
  double _estimatedOffset = 0.0;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_scrollListener);
  }

  void _scrollListener() {
    // Calculate the estimated offset when scrolling
    _estimatedOffset = _calculateEstimatedOffset();
  }

  double _calculateEstimatedOffset() {
    double estimatedOffset = 0.0;

    for (int i = 0; i < _getCurrentElementIndex(); i++) {
      // Calculate the estimated height of each element
      double estimatedElementHeight = _calculateElementHeight(i);
      estimatedOffset += estimatedElementHeight;
    }

    // Add a buffer to the estimated offset
    double buffer = 20.0; // You can adjust this value
    estimatedOffset -= buffer;

    return estimatedOffset;
  }

  int _getCurrentElementIndex() {
    // Calculate the current element index based on your logic
    // This could be based on the slider value or other factors
    // For example: (_sliderValue * myList.length).toInt()
    return 0;
  }

  double _calculateElementHeight(int index) {
    // Calculate the estimated height of the element at the given index
    // This could be based on the slider value or other factors
    return 100.0; // Replace with your logic
  }

  void _updateSliderValue(double newValue) {
    setState(() {
      _sliderValue = newValue;
      _estimatedOffset = _calculateEstimatedOffset();
      _scrollController.jumpTo(_estimatedOffset);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        controller: _scrollController,
        itemCount: myList.length,
        itemBuilder: (context, index) {
          // Build your list items based on the slider value and other factors
          // You can use the _sliderValue and _calculateElementHeight methods here
          return MyListItem();
        },
      ),
      bottomNavigationBar: Slider(
        value: _sliderValue,
        onChanged: _updateSliderValue,
      ),
    );
  }
}