scroll_fade_demo.dart

import 'package:flutter/material.dart';

class DemoShader extends StatefulWidget {
  const DemoShader({ Key key, this.child }) : super(key: key);

  final Widget child;

  @override
  _DemoShaderState createState() => _DemoShaderState();
}

class _DemoShaderState extends State<DemoShader> {
  double _closeToTheEdge = 0.0;

  bool _handleScrollNotification(ScrollNotification notification) {
    final ScrollMetrics metrics = notification.metrics;
    final double t = (((metrics.extentInside - metrics.extentAfter) / metrics.extentInside).clamp(0.0, 1.0));
    if (t != _closeToTheEdge) {
      setState(() {
        _closeToTheEdge = t;
      });
    }

    return false;
  }

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      child: NotificationListener<ScrollNotification>(
        onNotification: _handleScrollNotification,
        child: widget.child,
      ),
      shaderCallback: (Rect bounds) {
        return LinearGradient.lerp(
          const LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: <Color>[Color(0xFFFFFFFF), Color(0x00FFFFFF)],
            stops: <double>[0.6, 0.9],
          ),
          const LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: <Color>[Color(0xFFFFFFFF), Color(0xFFFFFFFF)],
          ),
          _closeToTheEdge,
        ).createShader(bounds);
      },
    );
  }
}

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Opacity Gradient'),
      ),
      body: DemoShader(
        child: Container(
          color: Colors.grey[300],
          padding: EdgeInsets.symmetric(vertical: 12.0, horizontal: 8.0),
          child: ListView.builder(
            itemExtent: 96,
            itemCount: 50,
            itemBuilder: (BuildContext context, int index) {
              return Padding(
                padding: EdgeInsets.symmetric(vertical: 8),
                child: Card(
                  color: Colors.blue[300],
                  child: ListTile(
                    title: Text('Item $index'),
                  ),
                ),
              );
            }
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: Demo()));
}