How to build the TabBar and TabBar View in a single, vertical view?

[Hassan Hammad]

By default, the behaviour of TabBar and TabBarView is as many separate pages as many tabs. 

I need a Single scrollable column/list view that will have Headings/sections, and each section should change the selected tab as the user scrolls down the list view. An example is the menu of a restaurant in Foodpanda mobile app. 

Also, when a tab is pressed in the TabBar, the scroll should shift to the relevant heading. 

The main consideration is that each item in the list view WILL NOT HAVE same height, instead the height will be dynamic for each element. 

I have achieved the part where pressing on a tab in TabBar switches the scroll to the relevant index using this package: https://pub.dev/packages/scroll_to_index

But how can i create the part where the scrolling manually will dynamically change the selected TabBar as soon as the relevant Heading/section is reached? How can I match the index with the scroll offset? 

Thanks.