Липкие заголовки на SliverList

Question

Я видел новое флаттер видео и видел несколько интересных. (Это не типичный липкий заголовок или расширяемый список, поэтому я не знаю, как его назвать)

Видео - смотреть с 0: 20

Кто-нибудь знает, как я могу создать такой тип списка с заголовками, используя SliverList?

Answer 1

Один из способов - создать CustomScrollView и передать объект SliverAppBar, прикрепленный к true, и SliverFixedExtentList объект с вашими виджетами.

Пример:

List<Widget> _sliverList(int size, int sliverChildCount) {
    var widgetList = new List<Widget>();
    for (int index = 0; index < size; index++)
      widgetList
        ..add(SliverAppBar(
           title: Text("Title $index"),
           pinned: true,
         ))
        ..add(SliverFixedExtentList(
          itemExtent: 50.0,
          delegate:
              SliverChildBuilderDelegate((BuildContext context, int index) {
                   return Container(
                      alignment: Alignment.center,
                      color: Colors.lightBlue[100 * (index % 9)],
                      child: Text('list item $index'),
                   );
              }, childCount: sliverChildCount),
        ));

   return widgetList;
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Slivers"),
    ),
    body: CustomScrollView(
      slivers: _sliverList(50, 10),
    ),
  );
}