可水平滚动的选项卡聚焦在中心，颤动迅速

Question

在这里，我想问一个问题，或者我可以制作一个教程，例如tabs，聚焦中心，但是这样的左右标签是30％透明的，谢谢！

Answer 1

isScrollable: true,在 TabBar 中添加 ，例如

TabBar(
       isScrollable: true,
.
.
.

)

Answer 2

截屏：

代码：

TabBar(
  isScrollable: true, // Required
  unselectedLabelColor: Colors.white30, // Other tabs color
  labelPadding: EdgeInsets.symmetric(horizontal: 30), // Space between tabs
  indicator: UnderlineTabIndicator(
    borderSide: BorderSide(color: Colors.white, width: 2), // Indicator height
    insets: EdgeInsets.symmetric(horizontal: 48), // Indicator width
  ),
  tabs: [
    Tab(text: 'Total Investment'),
    Tab(text: 'Your Earnings'),
    Tab(text: 'Current Balance'),
  ],
)

Answer 3

同样可以使用实现- unselectedLabelColor:＆indicatorColor:的TabBar部件。

示例代码：

@override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 6,
      child: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            leading: Icon(Icons.person_outline),
            title: Text('DASHBOARD',style: TextStyle(fontSize: 16.0),),
            bottom: PreferredSize(
                child: TabBar(
                    isScrollable: true,
                    unselectedLabelColor: Colors.white.withOpacity(0.3),
                    indicatorColor: Colors.white,
                    tabs: [
                      Tab(
                        child: Text('Tab 1'),
                      ),
                      Tab(
                        child: Text('Investment'),
                      ),
                      Tab(
                        child: Text('Your Earning'),
                      ),
                      Tab(
                        child: Text('Current Balance'),
                      ),
                      Tab(
                        child: Text('Tab 5'),
                      ),
                      Tab(
                        child: Text('Tab 6'),
                      )
                    ]),
                preferredSize: Size.fromHeight(30.0)),
            actions: <Widget>[
              Padding(
                padding: const EdgeInsets.only(right: 16.0),
                child: Icon(Icons.add_alert),
              ),
            ],
          ),
          body: TabBarView(
            children: <Widget>[
              Container(
                child: Center(
                  child: Text('Tab 1'),
                ),
              ),
              Container(
                child: Center(
                  child: Text('Tab 2'),
                ),
              ),
              Container(
                child: Center(
                  child: Text('Tab 3'),
                ),
              ),
              Container(
                child: Center(
                  child: Text('Tab 4'),
                ),
              ),
              Container(
                child: Center(
                  child: Text('Tab 5'),
                ),
              ),
              Container(
                child: Center(
                  child: Text('Tab 6'),
                ),
              ),
            ],
          )),
    );
  }

输出：