How to make my tabbar synced with scroll when touched certain widget without package?

Question

I have initialised my tab.

tabs = [
  Tab(text: tr("detail")),
  Tab(text: tr("store")),
  Tab(text: tr("review")),
];

_tabController = TabController(
  length: tabs.length,
  vsync: this,
);

Then i have my widget wrap inside CustomScrollView

CustomScrollView(
                  controller: _scrollController,
                  slivers: [
SliverToBoxAdapter(child: Consumer<MyProvider>(
                        builder: (context, myProvider, child) {
                     

                      return Column(
                        children: [
                          Widget1(),
                          Widget2(), 
                          Widget3(),
                          Widget4(),       
                        ],
                      );
                    }))
]

I want to assign the tab index to certain widget, when scroll until the widget then my tab will switch too. I will need to manually assign an unique index to each widget and bind to my tab. When scrolling allow to scroll to widget not visible on screen also. How should i actually start to achieve that? thanks

So to be clear, when your user scrolls and reaches a certain widget, you want to automatically switch to the next tab? — Adam Griffiths, Aug 03 '22 at 10:41
@AdamGriffiths yes, the tab here not going switch to next page. I am trying to make it scrolling to certain widget position within a page view. User can either tap on it or when scrolling the tab index will automatically switched too. — Crazy, Aug 03 '22 at 10:44

score 0 · Answer 1 · answered Aug 03 '22 at 15:32

Doing this without packages - simply copy the code you need from the package if you don't want dependency.

From what i understood you have 3 problems to solve

When scrolled to the bottom of page, switch the tab

There already is a great answer for the problem

Answer: https://stackoverflow.com/a/54539182/15106600

Do something when certain widget is displayed

There is the package for it to detect if widget is displayed ( remember it triggers when it starts being visible not the full height displayed)

Answer: https://pub.dev/packages/visibility_detector

Navigate to next tab

NavigatorController.animateTo()

Answer: https://api.flutter.dev/flutter/material/TabController-class.html

How to make my tabbar synced with scroll when touched certain widget without package?

1 Answers1

When scrolled to the bottom of page, switch the tab

Do something when certain widget is displayed

Navigate to next tab