如何在 flutter 的底部导航栏中垂直和水平地在中心添加一个按钮?
How do I add a button in the center both vertically and horizontally in a bottom navigation bar in flutter?
我尝试了很多不同的方法并在网上寻找解决方案,但找不到任何方法。有人可以帮我解决这个问题吗?我希望我的按钮位于底部导航栏的中间,如图 1 所示
the button is right in the middle which is what i want
this is a floating action button, however i cannot put it to the place i want
我会做的是 remove/replace 带有 BottomNavigationBarItem 的 FAB(浮动操作按钮)并将其放在 BottomNavigationBar 的中心并为其创建样式
这是一个例子:
bottomNavigationBar: BottomNavigationBar(
onTap: _selectTab,
showSelectedLabels: false,
showUnselectedLabels: false,
backgroundColor: Theme.of(context).primaryColor,
selectedItemColor: Theme.of(context).accentColor,
unselectedItemColor: Colors.black,
currentIndex: _selectedScreenIndex,
//type: BottomNavigationBarType.shifting,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.category,
),
label: 'Categories',
),
BottomNavigationBarItem(
icon: Container(
decoration: BoxDecoration(
color: Colors.yellow,
shape: BoxShape.circle,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.add,
),
iconSize: 40,
)
// Icon(
// Icons.add,
// ),
),
),
label: 'Add',
),
BottomNavigationBarItem(
icon: Icon(
Icons.star,
),
label: 'Favorites',
),
],
),
底部导航也有这个替代选项https://pub.dev/packages/convex_bottom_bar
我尝试了很多不同的方法并在网上寻找解决方案,但找不到任何方法。有人可以帮我解决这个问题吗?我希望我的按钮位于底部导航栏的中间,如图 1 所示
the button is right in the middle which is what i want
this is a floating action button, however i cannot put it to the place i want
我会做的是 remove/replace 带有 BottomNavigationBarItem 的 FAB(浮动操作按钮)并将其放在 BottomNavigationBar 的中心并为其创建样式
这是一个例子:
bottomNavigationBar: BottomNavigationBar(
onTap: _selectTab,
showSelectedLabels: false,
showUnselectedLabels: false,
backgroundColor: Theme.of(context).primaryColor,
selectedItemColor: Theme.of(context).accentColor,
unselectedItemColor: Colors.black,
currentIndex: _selectedScreenIndex,
//type: BottomNavigationBarType.shifting,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.category,
),
label: 'Categories',
),
BottomNavigationBarItem(
icon: Container(
decoration: BoxDecoration(
color: Colors.yellow,
shape: BoxShape.circle,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.add,
),
iconSize: 40,
)
// Icon(
// Icons.add,
// ),
),
),
label: 'Add',
),
BottomNavigationBarItem(
icon: Icon(
Icons.star,
),
label: 'Favorites',
),
],
),
底部导航也有这个替代选项https://pub.dev/packages/convex_bottom_bar