CODEWITHSUNDEEP
listviewdartfluttertabbar
flix
flix

Reputation: 1974

How to handle TabBar with ListView in Flutter?

I have spent a couple hours just to find how to change the tint of tab while scrolling the listView until (x) item/header,

I'm start to learn flutter from here

and the UI look's like:

enter image description here

I wonder how to dealing with ListView and tabBar just in case i'm scrolling until Flutter is awesome 51 the tabBar indicator should change to right, the same things should work with tabBar, when i press the tabBar index 51 the ListView should scrolling to Flutter is awesome 51,

anyone can guide me how to achieve this?

Upvotes: 0

Views: 2603

Answers (1)

Durdu
Durdu

Reputation: 4849

You need to use

TabController 

_tabController.animateTo((index))

In combination with

ScrollController

final _position = ... // half or top depending on tab selection itemsize and count 
_scrollController.animateTo(_position,
        curve: Curves.linear, duration: Duration(milliseconds: 500));

If your list items have the same height you could rely on the offset and position from the scroll in order to detect when it reached half.

Here is an implementation of the ScrollController that will aid you.

Upvotes: 2

Related Questions