如何将TabBar的选项卡放置在中间，然后单击下一个选项卡，它开始向左移动？

Question

我正在尝试实现的模拟：

然后，当开始单击下一个标签时，即2，它将显示第3个标签（名称为3），第1个标签向左移动。直到最后到屏幕的最左方滑动。

模拟：

最后，当进一步单击时，它也会在左边显示三个点。仅供参考，点上的任何行为均不表示已显示更多内容。

现在是我的代码。

class TabbedAppBarSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: choices.length,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white, // status bar color
            brightness: Brightness.light,
            title: TimerPage(),
            bottom: TabBar(
              // isScrollable: true,
              indicatorColor:Colors.red,
              unselectedLabelColor:Colors.grey,
              labelColor: Colors.red,
              tabs: choices.map((Choice choice) {
                return Tab(
                  text: choice.title,

                  // icon: Icon(choice.icon),
                );
              }).toList(),
            ),
          ),
          body: TabBarView(
            children: choices.map((Choice choice) {
              return Padding(
                padding: const EdgeInsets.all(6.0),
                child: ChoiceCard(choice: choice),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

class Choice {
  const Choice({this.title, this.icon});

  final String title;
  final IconData icon;
}

const List<Choice> choices = const <Choice>[
  const Choice(title: '1'),
  const Choice(title: '2'),
  const Choice(title: '...'),

]; // above is a mock array which eventually will be coming from API call

感谢并接受我的编码，我是新手。

[我正在尝试实现的模拟：然后，当开始单击下一个标签时，即2，它将显示第3个标签（名称为3），第1个标签向左移动。直到屏幕的最左端滑动。模拟：最后，...

Answer 1

使用TabController设置下一个标签的动画，并使用PreferredSize控制标签栏的位置