How to create a SliverAppBar, that has a upper pinned and lower floating element?

So I want to create a SliverAppBar where the upper part is pinned and always gets shown. The lower part has to be floating and appear on scroll down even when the top of the list isn't reached.

The only way to make it kind of work for me was to add 2 sliverappbars on top of each other but I feel like this isn't the best approach. So how would this be done properly?

  return Scaffold(
      body: NestedScrollView(
        body: ListView.builder(
            itemBuilder: (context, index) => Text(index.toString())),
        headerSliverBuilder: (context, hasScrolled) {
          return [
            const SliverAppBar(
              title: Text('pinned'),
              pinned: true,
              centerTitle: true,
            ),
            const SliverAppBar(
              floating: true,
              snap: true,
              title: Text('floating'),
            ),
          ];
        },
      ),
    );

So visually, this is what I am looking for, I'm just not sure about the implementation.

this will do the trick:

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Title')),
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            floating: true,
            title: Text('Test'),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(title: Text('Item #$index')),
              childCount: 1000,
            ),
          ),
        ],
      ),
    );