Flutter SliverAppBar with custom scrolling

I have a SliverAppBar with an image background, and on top of that some rainbow persistent header as an image. I would like to achieve a situation when I scroll the list of items the image fades away as it is now and for the name and description text to stay below that rainbow image pinned, while things can continue scrolling below that.

Any idea how to achieve this?

import 'package:consumerapp/core/constants.dart'; import 'package:flutter/material.dart'; class ProductPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Stack( children: [ NestedScrollView( headerSliverBuilder: (_, __) { return [ SliverAppBar( automaticallyImplyLeading: false, flexibleSpace: FlexibleSpaceBar( background: Image.network( 'https://webimages.we2p.de/2/starnbergammersee/entity/gallery/6076aca107bca56b2082f52a/CThomasMarufke-DSC00603-Bearbeitet3_80dpi.jpg', fit: BoxFit.cover, ), ), expandedHeight: 200, ), ]; }, body: Container( child: SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( padding: const EdgeInsets.fromLTRB(24, 20, 24, 5), child: Text('Name'), ), Padding( padding: EdgeInsets.symmetric(horizontal: 24), child: Text('Description'), ), ListView.builder( physics: NeverScrollableScrollPhysics(), shrinkWrap: true, padding: EdgeInsets.zero, itemBuilder: (_, int index) => Text( 'Item ' + index.toString(), textAlign: TextAlign.center, ), itemCount: 200, ), ], ), ), ), ), Positioned.fill( bottom: MediaQuery.of(context).size.height / 3, child: IgnorePointer( child: Image.asset( ImagesPaths.backgroundImage, width: double.infinity, height: double.infinity, fit: BoxFit.cover, alignment: Alignment.center, ), ), ), ], ), extendBodyBehindAppBar: true, ); } }