Flutter Riverpod : how to use consumer widget in slivers - flutter

Question

#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
const SliverToBoxAdapter(),
Consumer(
builder: (context, watch, child) {
return watch(recordProvider).when(
data: (records) {
// how to returns a set of Widgets(SliverPersistentHeader and SliverList) based on each item of records,
},
loading: () => const SliverToBoxAdapter(),
error: (obj, error) => const SliverToBoxAdapter(),
);
},
),
const SliverToBoxAdapter(),
],
),
);
}
}
I am new to flutter, want to know how to returns a set of Widgets(SliverPersistentHeader and SliverList) based on each item of records in List? thanks!

Answer 1

Howdy and welcome to Flutter. Slivers are a lot more complicated than using the other higher level widgets so bare with me on this answer. The code is documented with what's going on and it's using a very primitive list of data to build the CustomScrollView, just a List<int>.
/// fake FutureProvider
final recordProvider = FutureProvider(
(ref) => Future.value(
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
),
);
/// Our page of records
class RecordPage extends StatelessWidget {
const RecordPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Consumer(
builder: (context, watch, child) {
/// Building a list of our slivers up front so that it's easier to read
final List<Widget> slivers = watch(recordProvider).when(
data: (records) {
/// Lets split up some data so we can have our persistent headers hold some lists
final even = records.where((element) => element & 1 == 0);
final odd = records.where((element) => element & 1 == 1);
/// Now we need to take that data and make some lists of widgets
final evenWidgets =
even.map((e) => RecordWidget(record: e)).toList();
final oddWidgets =
odd.map((e) => RecordWidget(record: e)).toList();
/// Now let's make some SliverLists
final evenSliverList = SliverList(
delegate: SliverChildListDelegate.fixed(evenWidgets),
);
final oddSliverList = SliverList(
delegate: SliverChildListDelegate.fixed(oddWidgets),
);
/// Now let's create some headers
const evenHeader = SliverPersistentHeader(
delegate: RecordPersistentHeader('Even'),
);
const oddHeader = SliverPersistentHeader(
delegate: RecordPersistentHeader('Odd'),
);
/// Now let's merge them all together and return the slivers
return [
evenHeader,
evenSliverList,
oddHeader,
oddSliverList,
];
},
loading: () => [const SliverToBoxAdapter()],
error: (obj, error) => [const SliverToBoxAdapter()],
);
/// Finally let's return our [CustomScrollView] with our list of slivers
return CustomScrollView(
slivers: slivers,
);
},
),
);
}
}
/// The contents of our record sliver
class RecordWidget extends StatelessWidget {
const RecordWidget({Key? key, required this.record}) : super(key: key);
final int record;
#override
Widget build(BuildContext context) {
return Text('$record');
}
}
/// The contents of our header sliver
class RecordPersistentHeader extends SliverPersistentHeaderDelegate {
const RecordPersistentHeader(this.title);
final String title;
#override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return Text(title);
}
#override
double get maxExtent => 40;
#override
double get minExtent => 40;
#override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
return false;
}
}