Scroll-based fade out

foo.dart

class Foo extends StatefulWidget {
  @override
  _FooState createState() => new _FooState();
}

class _FooState extends State<Foo> with SingleTickerProviderStateMixin {
  AnimationController _animation;

  @override
  void initState() {
    super.initState();
    _animation = new AnimationController(value: 1.0, vsync: this);
  }

  bool _handleScrollNotification(ScrollUpdateNotification notification) {
    if (notification.depth == 0) // meaning its from the list view we created
      _animation.value = 1.0 - (notification.metrics.extentBefore / 200.0).clamp(0.0, 1.0);
    return false;
  }

  @override
  Widget build(BuildContext context) {
    return new Stack(
      alignment: FractionalOffset.topCenter,
      children: <Widget>[
        new NotificationListener<ScrollUpdateNotification>(
          onNotification: _handleScrollNotification,
          child: new ListView.builder(
            itemExtent: 100.0,
            itemBuilder: (BuildContext context, int index) {
              return new Center(child: new Text('$index'));
            },
          ),
        ),
        new FadeTransition(
          opacity: _animation,
          child: new Container(
            width: 150.0,
            height: 150.0,
            decoration: new BoxDecoration(
              backgroundColor: Colors.green[500],
            ),
          ),
        ),
      ],
    );
  }
}