Flutter: Persistent item in CustomScrollView - flutter

Question

Currently I'm creating an application using Flutter which involves several lists which can be ordered and filtered. When an ordering or filter is active, persistent bar appears under the app bar which indicates what filters are active. This is achieved by stacking int on top of a ListView using a StackView, and moving the ListView down a little using it's padding. An example of this can be seen in the image below:
Now I'm trying to create a second view using a CustomScrollView and a SliverAppBar, and I want this same "filter bar" behaviour here. I've tried using a SliverList with a single item, and a SliverList below that with the filtered items, but then both lists scroll as if they were one long list. I've also tried adding a bar through the bottom property of the SliverAppBar, but this results in a bar which is placed over the title of the app bar, and as far as I know, there is no way to move this title up. This result can be seen in the image below (the red bar is a placeholder for the filter bar in the first image).
Is there any way to achieve this "persistent" bar effect in a CustomScrollView with a SliverAppBar?

Answer 1

Since there are multiple scrollable views to be managed on the screen, you'll need to use NestedScrollView. This should solve the issue where both scrollable widgets are scrolled like a single long list.
Here's a sample on how it can be implemented similar to the screenshots you've provided.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyStatelessWidget(),
);
}
}
class MyStatelessWidget extends StatelessWidget {
MyStatelessWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
// This will help manage the SliverAppBar and ListView
body: NestedScrollView(
floatHeaderSlivers: true,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
flexibleSpace: FlexibleSpaceBar(
background: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/background.jpeg"),
fit: BoxFit.cover,
),
),
child: Container(
padding: EdgeInsets.all(16.0),
alignment: Alignment.centerLeft,
child: Text(
'Title',
style: TextStyle(color: Colors.white, fontSize: 36.0),
),
),
),
),
// title: const Text('Title'),
floating: true,
pinned: true,
expandedHeight: 300.0,
forceElevated: innerBoxIsScrolled,
bottom: AppBar(
backgroundColor: Colors.red,
toolbarHeight: 64.0,
),
),
];
},
body: ListView.builder(
padding: const EdgeInsets.all(8),
itemCount: 30,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
child: Center(child: Text('Item $index')),
);
},
),
),
);
}
}