[英]How can I remove label from bottom navigation bar in flutter so I can center horizontally my add button?
can someone help me with this problem.有人可以帮我解决这个问题。 The only solution i have currently found, is to set both showSelectedLabels and showUnselecedLabels to false.
我目前找到的唯一解决方案是将 showSelectedLabels 和 showUnselecedLabels 都设置为 false。 However this will remove all the labels, but i only want to remove the label of the add button.
但是,这将删除所有标签,但我只想删除添加按钮的 label。 If I just use a placeholder "" for label, my add button is off centred horizontally...
如果我只为 label 使用占位符“”,我的添加按钮不在水平居中...
button off centered horizontally按钮关闭水平居中
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: tabs[_selectedIndex],
),
bottomNavigationBar: BottomNavigationBar(
elevation: 10,
backgroundColor: Colors.white,
type: BottomNavigationBarType.fixed,
selectedIconTheme: IconThemeData(color: kPrimaryMagentaColor),
selectedLabelStyle: TextStyle(fontWeight: FontWeight.w500),
selectedItemColor: Colors.black,
showSelectedLabels: true,
showUnselectedLabels: true,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Container(
padding: kBottomNavIconLabelSpace,
child: Icon(
FeatherIcons.map,
size: 26.5,
),
),
label: 'Map',
),
BottomNavigationBarItem(
icon: Container(
padding: kBottomNavIconLabelSpace,
child: Icon(
FeatherIcons.compass,
size: 28,
),
),
label: 'Discover',
),
BottomNavigationBarItem(
icon: Container(
decoration: BoxDecoration(
color: kPrimaryMagentaColor,
shape: BoxShape.circle,
),
padding: EdgeInsets.all(10),
child: Icon(
FeatherIcons.plus,
color: Colors.white,
),
),
label: "",
),
BottomNavigationBarItem(
icon: Container(
padding: kBottomNavIconLabelSpace,
child: Transform(
alignment: Alignment.center,
transform: Matrix4.rotationY(math.pi),
child: Icon(
FeatherIcons.messageSquare,
size: 28,
),
),
),
label: 'Inbox',
),
BottomNavigationBarItem(
icon: Container(
padding: kBottomNavIconLabelSpace,
child: Icon(
FeatherIcons.calendar,
size: 28,
),
),
label: 'My Activity',
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
);
Add this to the BottomNavigationBar properties将此添加到 BottomNavigationBar 属性
showSelectedLabels: false,
showUnselectedLabels: false,
Ok, so this is kinda possible by manipulating the Text
's fontSize
.好的,所以这可以通过操纵
Text
的fontSize
来实现。
First, change all the label
s you have used for each of the BottomNavigationBarItem
to use title
parameter.首先,将您用于每个
BottomNavigationBarItem
的所有label
更改为使用title
参数。 Like this,像这样,
Change label: 'Map'
to title: Text('Map')
. label: 'Map'
更改为title: Text('Map')
。 Similarly change it with all your BottomNavigationBarItem
.同样用你所有的
BottomNavigationBarItem
改变它。 Since this is not possible using label
parameter.因为使用
label
参数是不可能的。
Now, for your center BottomNavigationBarItem
use it like this,现在,对于您的中心
BottomNavigationBarItem
像这样使用它,
BottomNavigationBarItem(
icon: Align(
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(color: Colors.deepPurple, shape: BoxShape.circle),
padding: EdgeInsets.all(14),
child: Icon(Icons.add, color: Colors.white),
),
),
title: Text("", style: TextStyle(fontSize: 0)),
),
So, you are changing two things.所以,你正在改变两件事。
padding
of your Container
to EdgeInsets.all(14)
to make the button look bigger.Container
的padding
增加到EdgeInsets.all(14)
以使按钮看起来更大。fontSize
using style: TextStyle(fontSize: 0)
, this make the view invisible.fontSize
style: TextStyle(fontSize: 0)
,这会使视图不可见。 Now, you have something like this, change the color to whatever you want.现在,你有这样的东西,将颜色更改为你想要的任何颜色。
If you use 2 params with如果您使用 2 个参数
showSelectedLabels: false, showUnselectedLabels: false,
with label != ""
与
label != ""
You can get this issue .你可以得到这个问题。
If you are using showSelectedLabels:true
on BottomNavigationBar the icons doesnot be on center so try to avoid showSelectedLabels:true so remove showSelectedLabels:true
如果您在 BottomNavigationBar 上使用
showSelectedLabels:true
图标不在中心所以尽量避免 showSelectedLabels:true 所以删除showSelectedLabels:true
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.