如何在 flutter 的 TabBar 中制作选定的 Tab 中心

Question

In my TabBar, there are up to 3 kinds of tabs of different widths.

"x月xx" has the widest width, "xx月" is the middle, "x月" has the narrowest width.

And when the tab state change from unselected to selected, it will become more wide because it add the prefix "xxxx年" to the title.

I can not set a specific value to tab width, because the tab title may change from "2020年11月" to "11月" if unselected.

My purpose is to center the selected tab on the screen.

The method animateTo of TabController only allows scrolling to an index but not a distance. So I copied the tabs.dart . I want to change the method _scrollToCurrentIndex() which uses a ScrollController to animate to an offset. There are many things(eg various TabOffsets, ScrollOffset, viewportWidth...) useful, but I still don' t know how to let scroll offset and padding work together.

Answer 1

I succeeded partly, that means, the selected tab will scroll to center, but the animation is strange.

In class _TabBarState extends State<TabBar> I found this in build function:

Widget tabBar = CustomPaint(
  painter: _indicatorPainter,
  child: _TabStyle(
    // ...
    child: _TabLabelBar(
      onPerformLayout: _saveTabOffsets,
      children: wrappedTabs,
    ),
  ),
);

In onPerformLayout: _saveTabOffsets I can get List<double> tabOffsets and double tabBarWidth . I use these to calculate the distance to scroll. But in this way, the problem is: when click a tab, it draws the indicator first, and after the indicator change from the last selected tab to the new selected tab, the tabBar scrolls to center it.

I am open to better ideas.