今天學習了底部導航欄，并且實現(xiàn)了功能
image.png
或者是下面效果：
image.png
實現(xiàn)的功能還是比較好看的，代碼如下：
import 'package:flutter/material.dart';
/**
* flutter 入門
*/
void main() {
runApp(myApp());
}
class myApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: 'fade demo',
theme: ThemeData(
primarySwatch: Colors.blue
),
home: homeContent()
);
}
}
class homeContent extends StatefulWidget{
@override
State<StatefulWidget> createState() => _BottomNavigationBar();
}
class _BottomNavigationBar extends State<homeContent>{
int _selectIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.access_alarms,color: Colors.black,),
title: Text("微信"),
activeIcon: Icon(Icons.access_alarms,color: Colors.blue,)
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarms,color: Colors.black,),
title: Text("通訊錄"),
activeIcon: Icon(Icons.access_alarms,color: Colors.blue,)
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarms,color: Colors.black,),
title: Text("發(fā)現(xiàn)"),
activeIcon: Icon(Icons.access_alarms,color: Colors.blue,)
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarms,color: Colors.black,),
title: Text("我"),
activeIcon: Icon(Icons.access_alarms,color: Colors.blue,)
)
],
iconSize: 24,
currentIndex: _selectIndex,
onTap: (index){
setState(() {
_selectIndex = index;
});
},
fixedColor: Colors.green,
type: BottomNavigationBarType.shifting,
),
);
}
}
