我想要有特定背景颜色的标签页。当我点击标签页时,当前标签页的背景颜色应该会改变。我尝试了很多方法,但没有得到我想要的。
我希望选项卡的颜色是灰色和选定的颜色是蓝色。有人能帮助解决这个问题吗?
这就是我想要的
我得到的:
下面是单个选项卡的代码:
DefaultTabController(
length: 4, // length of tabs
initialIndex: 0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TabBar(
isScrollable: true,
labelColor: const Color(0xff000000),
labelPadding:
const EdgeInsets.only(left: 8, right: 5),
indicator: BoxDecoration(
borderRadius:
BorderRadius.circular(10), // Creates border
color: const Color(0xff77e8d9)),
unselectedLabelColor: Colors.black,
tabs: [
Tab(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
10), // Creates border
color: const Color(0xfff4f4f4)),
child: SizedBox(
height: 40,
width: 110,
child: Row(children: [
Padding(
padding: const EdgeInsets.only(left: 8),
child: Text('Featured',
style: GoogleFonts.poppins(
fontWeight: FontWeight.w700,
fontSize: 15,
letterSpacing: 0.3,
)),
),
const Padding(
padding: EdgeInsets.only(left: 1),
child: Icon(
Icons.favorite,
color: Color(0xffef5145),
size: 21,
),
),
]),
),
),
),
Container(
height: 1250,
decoration: const BoxDecoration(),
child: TabBarView(children: [
Container(),
]),
),
1条答案
按热度按时间hwamh0ep1#
这里的问题是Container有自己的颜色,但是你想用TabBar指示器给予它一个新的颜色,这是不可能的。要解决这个问题,你可以设置Container的颜色
到
这将使它看起来像这样:Transparent color Container
然而,你似乎想要的是使选中的标签的颜色为“蓝色”,而未选中的标签的颜色为“白色”。要做到这一点,你可以使用TabController根据选中标签的索引值设置容器的颜色。我可能解释得有点混乱,但如果你看了这个例子,你就会明白我的意思。这将使它看起来像这样:Changing the color of the Container
本例中的重要事项:
完整代码:
我希望这个答案对你有帮助