как закрепить заголовок группы списка при прокрутке во флаттере

Question

Я хочу иметь закрепленный заголовок заголовка группы в списке, и это изменение заголовка зависит от прокручиваемой группы, например прокрутки контактов в android с закрепленной начальной буквой.

Answer 1

Я предпочитаю использовать для этого , вы можете найти там другие пакеты.

Вот демонстрационный виджет

      
class AlignX extends StatelessWidget {
  const AlignX({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple,
      body: CustomScrollView(
        slivers: [
          MultiSliver(
            pushPinnedChildren: true,
            children: [
              MultiSliver(
                pushPinnedChildren: true,
                children: [
                  SliverPinnedHeader(
                    child: Container(
                      height: 100,
                      color: Colors.purple,
                      child: Text("Group 1"),
                    ),
                  ),
                  ...List.generate(
                    22,
                    (index) => Container(
                        height: 100, child: Text("  Group1 item $index")),
                  ),
                ],
              ),
              MultiSliver(
                pushPinnedChildren: true,
                children: [
                  SliverPinnedHeader(
                    child: Container(
                      height: 100,
                      color: Colors.deepOrange,
                      child: Text("Group 2"),
                    ),
                  ),
                  ...List.generate(
                    22,
                    (index) => Container(
                        height: 100, child: Text("Group2 item $index")),
                  ),
                ],
              ),
              MultiSliver(
                pushPinnedChildren: true,
                children: [
                  SliverPinnedHeader(
                    child: Container(
                      height: 100,
                      color: Colors.pinkAccent,
                      child: Text("Group 3"),
                    ),
                  ),
                  ...List.generate(
                    22,
                    (index) => Container(
                        height: 100, child: Text("Group3 item $index")),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Посетите чтобы slover_toolsузнатьslover_tools, об этом подробнее.