Flutter底部导航凸起效果

int _selectedIndex = 0;
// 创建数组引入页面
List pglist = [HomePage(), FindPage(), CartPage(), ZonePage(), UcenterPage(),];
…
Scaffold(
body: pglist[_selectedIndex],
// 抽屉菜单
// drawer: new Drawer(),
// 底部凸起凹陷导航栏
bottomNavigationBar: BottomAppBar(
color: Colors.white,
shape: CircularNotchedRectangle(),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon: Icon(Icons.home),
color: _selectedIndex == 0 ? Colors.red : Colors.grey,
onPressed: (){
_onItemTapped(0);
},
),
IconButton(
icon: Icon(Icons.search),
color: _selectedIndex == 1 ? Colors.red : Colors.grey,
onPressed: (){
_onItemTapped(1);
},
),
SizedBox(width: 50,),
IconButton(
icon: Icon(Icons.photo_filter),
color: _selectedIndex == 3 ? Colors.red : Colors.grey,
onPressed: (){
_onItemTapped(3);
},
),
IconButton(
icon: Icon(Icons.face),
color: _selectedIndex == 4 ? Colors.red : Colors.grey,
onPressed: (){
_onItemTapped(4);
},
),
],
),
),
)
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}

int _selectedIndex = 0;
// 创建数组引入页面
List pglist = [HomePage(), FindPage(), CartPage(), ZonePage(), UcenterPage(),];
…
Scaffold(
body: pglist[_selectedIndex],
// 抽屉菜单
// drawer: new Drawer(),
// 普通底部导航栏
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.red,
type: BottomNavigationBarType.fixed,
elevation: 5.0,
unselectedFontSize: 12.0,
selectedFontSize: 18.0,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text(‘Home’)),
BottomNavigationBarItem(icon: Icon(Icons.search), title: Text(‘Find’)),
BottomNavigationBarItem(icon: Icon(null), title: Text(‘Cart’)),
BottomNavigationBarItem(icon: Icon(Icons.photo_filter), title: Text(‘Zone’)),
BottomNavigationBarItem(icon: Icon(Icons.face), title: Text(‘Ucenter’)),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
floatingActionButton: FloatingActionButton(
backgroundColor: _selectedIndex == 2 ? Colors.red : Colors.grey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.add)
]
),
onPressed: (){
setState(() {
_selectedIndex = 2;
});
},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
)
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}