how to pin a group title of a list while scrolling in flutter

Question

I want to have a pinned title of a title of group in the list and this title change depends on the group being scrolled like scrolling the contacts in android with the starting letter pinned up.

Answer 1

I prefer using sliver_tools for this, you can find others packages out there.

Here is a demo Widget

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

Visit sliver_tools for more about it.