[flutter]：如何让 Container() 的颜色填满 TabBar() 的标签中的整个区域？

Question

我正在尝试使用具有不同背景颜色的选项卡实现 TabBar。选项卡托管具有不同装饰颜色的 Container() 小部件。问题是背景颜色没有填满整个选项卡区域。下面是代码片段：

class Changes extends StatelessWidget {
  Changes({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 75,
        foregroundColor: Colors.yellowAccent[400],
        backgroundColor: Colors.grey[900],
        centerTitle: true,
        title: Text('Hello'),
      ),
      body: DefaultTabController(
        length: 2,
        child: Column(
          children: [
            TabBar(
              tabs: [
                Container(
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                        Colors.lightGreenAccent,
                        Colors.green
                      ]
                    ),
                  ),
                  height: MediaQuery.of(context).size.height * 0.05,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Up',
                        style: TextStyle(
                          color: Colors.grey[900],
                          fontSize: 22
                      )),
                      SizedBox(width: 15),
                      Icon(Icons.arrow_upward, color: Colors.grey[900]),
                    ],
                  ),
                ),
                Container(
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          Colors.red,
                          Colors.deepOrangeAccent
                        ]
                    ),
                  ),
                  height: MediaQuery.of(context).size.height * 0.05,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Down',
                          style: TextStyle(
                              color: Colors.grey[900],
                              fontSize: 22
                          )),
                      SizedBox(width: 15),
                      Icon(Icons.arrow_downward, color: Colors.grey[900]),
                    ],
                  ),
                ),
              ]),
            Expanded(
              child: TabBarView(
                children: [
                  Container(
                    child: Center(child: Text('Up')),
                  ),
                  Container(
                    child: Center(child: Text('Down')),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

屏幕是这样的：

Screen

我该如何解决这个问题？为什么 BoxDecoration() 的颜色没有填满整个选项卡 space？

Answer 1

您好，那部分的答案真的很简单。您需要添加：

 TabBar(
 labelPadding: EdgeInsets.zero, // this line
 tabs: [])

如果有帮助，请点赞。

[flutter]：如何让 Container() 的颜色填满 TabBar() 的标签中的整个区域？

[flutter]: How to make the color of a Container() fill whole area in a tab of TabBar()?

containers

colors

background-color

tabbar

flutter