This project is a way to implement a anchor tabs panel like the one of the rhymit.

Anchor tabs demo


Tab button scroll to the block Scrolling will update the tab button selected

Getting started

Add the dependency to your pubspec.yaml:

anchor_tabs: ^0.0.1


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

  Widget build(BuildContext context) {
    List<String> tabsText = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];

    List<Widget> tabs = [];
    List<Widget> body = [];

    for (var element in tabsText) {
      // Create a tab item

      // Create a target item
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          controller: ScrollController(),
          itemCount: 40,
          itemBuilder: (BuildContext ctxt, int i) {
            return Text('$element  $i',
                style: Theme.of(ctxt).textTheme.headline6);

    return Container(
      margin: const EdgeInsets.all(10),
      child: Column(
        children: [
          const Text('Simple example of anchor tabs'),
          Expanded(child: AnchorTabPanel(tabs: tabs, body: body)),

Additional information

This AnchorTabPanel widget have more fields like the one to configure the size of the tab buttons

Like us on

Package url:

Contribute on github

If you have some problem that this package doesn’t solve feel free to contribute on github

Instruction to publish the package to

dart pub publish


View Github