How to create a fading edge with SliverList in flutter

Question

I am trying to create a fading edge with Flutter's SliverList. Like this:

Here's my code:

    class MyWidget extends StatefulWidget {
      const HymnView({Key? key}) : super(key: key);

      @override
      State<MyWidget> createState() => _MyWidgetState();
    }

    class _MyWidgetState extends State<MyWidget> {
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
            backgroundColor: const Color(0xFF4c4452),
            body: CustomScrollView(slivers: <Widget>[

              //Beginning of SliverAppBar
              SliverAppBar(
                  backgroundColor: const Color(0xff4c4452),
                  elevation: 0,
                  automaticallyImplyLeading: false,
                  expandedHeight: 300,
                  pinned: true,
                  bottom: PreferredSize(
                      preferredSize: const Size.fromHeight(70),
                      child: Container(
                          padding: const EdgeInsets.symmetric(horizontal: 20),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text("Some Title",
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 25,
                                      fontFamily: 'OpenSans',
                                      fontWeight: FontWeight.w600)),
                            ],
                          )))),

                          //End of sliver appbar



              SliverPadding(
                padding: const EdgeInsets.symmetric(vertical: 20),
                
                //Beginning of my SLiverList

                sliver:  SliverList(
                        delegate: SliverChildBuilderDelegate((context, index) {
                      return Container(
                          child: Text("Some thing to test with something to test with")
                      );
                    }, childCount: 20)),

                //nEnd of my SLiverList

              )
            ]));
      }
    }

I have searched everywhere online but couldn't find any solution. I was only able to find a solution for ListView, I tried the solution but it doesn't seem to work.

Answer 1

You can try with a shader mask and cheat with sliverToBoxAdapter

ShaderMask(
    shaderCallback: (rect) {
      return const LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [Colors.transparent, Colors.white, Colors.transparent],
      ).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
    },
    child: child
)