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

Issue

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.

Solution

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,
            ),
          ),
        ],
      ),
    );

Answered By – Jim

Answer Checked By – David Marino (FlutterFixes Volunteer)