Flutter 可水平滚动的标签集中在中心位置，并带有卡入式颤振

在这里我想问或者我可以做一个像

标签

，聚焦中心这样的教程，但是左右标签是30%透明的，谢谢

---

使用

选项卡

小部件的-

未选择的标签颜色：

和

指示颜色：

，也可以实现同样的效果

示例代码：

@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'),
                ),
              ),
            ],
          )),
    );
  }

@覆盖
小部件构建（构建上下文）{
返回DefaultTabController(
长度：6，
孩子：脚手架(
appBar:appBar(
标题：对，
前导：图标（图标、人物轮廓），
标题：文本（“仪表板”，样式：TextStyle（fontSize:16.0），
底部：首选尺寸(
孩子：TabBar(
isScrollable：是的，
未选择的标签颜色：颜色。白色。不透明度（0.3），
指示颜色：颜色。白色，
选项卡：[
标签(
子项：文本（“选项卡1”），
),
标签(
子项：文本（“投资”），
),
标签(
孩子：文本（“你的收入”），
),
标签(
子项：文本（“当前余额”），
),
标签(
子项：文本（“选项卡5”），
),
标签(
子项：文本（“选项卡6”），
)
]),
preferredSize:Size.fromHeight（30.0）），
行动：[
填充物(
填充：仅限常量边集（右：16.0），
子：图标（图标。添加警告），
),
],
),
正文：选项卡视图(
儿童：[
容器(
儿童：中心(
子项：文本（“选项卡1”），
),
),
容器(
儿童：中心(
子项：文本（“选项卡2”），
),
),
容器(
儿童：中心(
子项：文本（“选项卡3”），
),
),
容器(
儿童：中心(
子项：文本（“选项卡4”），
),
),
容器(
儿童：中心(
子项：文本（“选项卡5”），
),
),
容器(
儿童：中心(
子项：文本（“选项卡6”），
),
),
],
)),
);
}

输出：

---

将isScrollable放置在选项卡栏中对我来说很有用

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {

  _counter++;
 });
}

@override
Widget build(BuildContext context) {

 final _kTabPages = <Widget>[
   Center(child: Icon(Icons.cloud, size: 64.0, color: Colors.teal)),
   Center(child: Icon(Icons.alarm, size: 64.0, color: Colors.cyan)),
   Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
   Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
   Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
   Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
   Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
   Center(child: Icon(Icons.forum, size: 64.0, color: Colors.blue)),
 ];
 final _kTabs = <Tab>[
   Tab(text: 'NK'),
   Tab(text:'ActiveTools'),
   Tab(text:'Coxmate'),
   Tab(text:'Concept2'),
   Tab(text:'Croker'),
   Tab(text:'Hudson'),
   Tab(text:'Swift'),
   Tab(text:'Rowshop'),
 ];
 return DefaultTabController(
   length: _kTabs.length,
   child: Scaffold(
     appBar: AppBar(
     leading:Image.asset("assets/Macarbi Logo.jpg"),//TODO image or icon here
     title: Text(widget.title),
     actions: <Widget>[
       IconButton(
         icon: Icon(Icons.search),
         onPressed: () {},//TODO  do something
       ),
       IconButton(
         icon: Icon(Icons.account_circle),
         onPressed: () {},//TODO do something
       ),
     ],
      bottom: TabBar(
        isScrollable: true,
         tabs: _kTabs,
       ),
   ),
     body: TabBarView(
       children: _kTabPages,
     ),
   ),
 );
}

类MyHomePage扩展StatefulWidget{
MyHomePage（{Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
int _计数器=0；
void _incrementCounter（）{
设置状态（）{
_计数器++；
});
}
@凌驾
小部件构建（构建上下文）{
最终kTabPages=[
中心（子项：图标（Icons.cloud，大小：64.0，颜色：Colors.teal）），
中心（子项：图标（Icons.alarm，大小：64.0，颜色：Colors.cyan）），
中心（子：图标（Icons.forum，大小：64.0，颜色：Colors.blue）），
中心（子：图标（Icons.forum，大小：64.0，颜色：Colors.blue）），
中心（子：图标（Icons.forum，大小：64.0，颜色：Colors.blue）），
中心（子：图标（Icons.forum，大小：64.0，颜色：Colors.blue）），
中心（子：图标（Icons.forum，大小：64.0，颜色：Colors.blue）），
中心（子：图标（Icons.forum，大小：64.0，颜色：Colors.blue）），
];
最终_kTabs=[
选项卡（文本：“NK”），
选项卡（文本：'ActiveTools'），
选项卡（文本：'Coxmate'），
选项卡（文本：“概念2”），
选项卡（文本：'Croker'），
选项卡（文本：“哈德逊”），
选项卡（文本：“Swift”），
选项卡（文本：“Rowshop”），
];
返回DefaultTabController(
长度：_kTabs.length，
孩子：脚手架(
appBar:appBar(
前导：Image.asset（“assets/Macarbi Logo.jpg”），//此处为TODO图像或图标
标题：文本（widget.title），
行动：[
图标按钮(
图标：图标（Icons.search），
onPressed:（）{}，//要做某事
),
图标按钮(
图标：图标（图标、账户和圆圈），
onPressed:（）{}，//要做某事
),
],
底部：选项卡栏(
isScrollable：是的，
选项卡：ktab，
),
),
正文：选项卡视图(
儿童：kTabPages，
),
),
);
}

添加

isScrollable:true，

在选项卡栏中 像

---

选项卡栏是可滚动的，但指示器不在中心。嗨@Ismail界面，找到答案了吗？这是正确的答案

TabBar(
       isScrollable: true,
.
.
.

)