[英]How do I add background color to unselected tabs in flutter tabbar?
I'm making an app with a page with multiple tabs.我正在制作一个带有多个选项卡的页面的应用程序。 I want it to look like this:
我希望它看起来像这样:
I want the unselected tabs to have a white background with black font.我希望未选择的选项卡具有带有黑色字体的白色背景。 I have managed to bring it up to this:
我设法做到了这一点:
But I can't find an option to change the background color of unselected tabs.但我找不到更改未选中标签的背景颜色的选项。 I have changed the text color of unselected tabs to black using the
unselectedLabelColor
property.我已使用
unselectedLabelColor
属性将未选定选项卡的文本颜色更改为黑色。 I tried wrapping the tabbar widget in a container and coloring it but it just filled the entire area around it instead of just the tabs.我尝试将标签栏小部件包装在一个容器中并为其着色,但它只是填充了它周围的整个区域,而不仅仅是标签。 Any idea on how I can get this without using any external packages?
关于如何在不使用任何外部软件包的情况下获得它的任何想法?
Set Scaffold backgroundColor
something like backgroundColor: Colors.grey.shade100,
and use TabController设置 Scaffold
backgroundColor
类似于backgroundColor: Colors.grey.shade100,
并使用 TabController
class _TabBarDemoState extends State<TabBarDemo>
with SingleTickerProviderStateMixin {
late TabController controller = TabController(length: 10, vsync: this)
..addListener(() {
setState(() {});
});
and和
TabBar(
isScrollable: true,
controller: controller,
tabs: List.generate(
10,
(index) => AnimatedContainer(
duration: Duration(milliseconds: 100),
width: 34,//do as you like
height: 34,//do as you like
alignment: Alignment.center,
decoration: ShapeDecoration(
color: controller.index == index
? Colors.deepPurple
: Colors.white,
shape: CircleBorder(),
),
child: Text(
"$index",
style: controller.index == index
? TextStyle()
: TextStyle(color: Colors.black),
),
),
)),
ListView.separated(
itemCount: 10,
scrollDirection: Axis.horizontal,
shrinkWrap: true,
separatorBuilder: (BuildContext context, int index) => const SizedBox(width: 5,),
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
setState(() {
isSelected = index;
});
},
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: isSelected == index ? Colors.pink : Colors.white
),
child: Padding(
padding: const EdgeInsets.all(10),
child: Center(child: Text("${index.toString()}", style: TextStyle(color: isSelected == index ? Colors.white : Colors.black),)),
),
),
);
}
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.