Flutter, adjust widget in list depending on scrolloffset

Question

How would I set the height of a Widget in a ListView depending on the offset of the underlying scrollview?

Thanks for any hints :)

Answer 1

To know the current scroll offset of ListView, you can just pass a controller and check the offset of controller.

example:

class ScrollOffsetWidget extends StatefulWidget {
  @override
  _ScrollOffsetWidgetState createState() => new _ScrollOffsetWidgetState();
}

class _ScrollOffsetWidgetState extends State<ScrollOffsetWidget> {
  List<double> height = <double>[200.0,200.0,200.0,200.0,200.0];

  double scrollOffset = 0.0;

  static ScrollController _controller;

  _ScrollOffsetWidgetState(){
    _controller = new ScrollController(initialScrollOffset: scrollOffset);
    _controller.addListener(listen);
  }

  void listen(){
    final List<double> newHeight = height;

    if(_controller.offset>100.0){
      newHeight[1] = 400.0;
    }else{
      newHeight[1] = 200.0;
    }

    setState((){
      height = newHeight;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new ListView(
          controller: _controller,
          children: <Widget>[
            new AnimatedContainer(duration: const Duration(milliseconds: 300),height: height[0],color: Colors.primaries[0],),
            new AnimatedContainer(duration: const Duration(milliseconds: 300),height: height[1],color: Colors.primaries[1],),
            new AnimatedContainer(duration: const Duration(milliseconds: 300),height: height[2],color: Colors.primaries[2],),
            new AnimatedContainer(duration: const Duration(milliseconds: 300),height: height[3],color: Colors.primaries[3],),
            new AnimatedContainer(duration: const Duration(milliseconds: 300),height: height[4],color: Colors.primaries[4],)
          ],
        ),
      ),
    );
  }
}

Hope that helped!