html底部导航栏教程,flutter 主页面底部导航栏实现以及主题风格设置

import 'package:flutter/material.dart';import 'package:flutter_app/pages/AirplayScreen.dart';import 'package:flutter_app/pages/EmailScreen.dart';import 'package:flutter_app/pages/HomeScreen.dart';import 'package:flutter_app/pages/PagesScreen.dart';class BottomNavigationWidget extendsStatefulWidget {

_BottomNavigationWidgetState createState()=>_BottomNavigationWidgetState();

}class _BottomNavigationWidgetState extends State{//final _BottomNavigationColor = Colors.blue;

int _currentIndex = 0;

List list =List();

@overridevoidinitState(){

list

..add(HomeScreen())

..add(EmailScreen())

..add(PagesScreen())

..add(AirplayScreen());super.initState();

}

@override

Widget build(BuildContext context) {returnScaffold(

body: list[_currentIndex],

bottomNavigationBar: BottomNavigationBar(

items: [

BottomNavigationBarItem(

icon:Icon(

Icons.home,//color:_BottomNavigationColor,

),

title:Text('Home',//style:TextStyle(color:_BottomNavigationColor)

)

),

BottomNavigationBarItem(

icon:Icon(

Icons.email,//color:_BottomNavigationColor,

),

title:Text('Email',//style:TextStyle(color:_BottomNavigationColor)

)

),

BottomNavigationBarItem(

icon:Icon(

Icons.pages,//color:_BottomNavigationColor,

),

title:Text('Pages',//style:TextStyle(color:_BottomNavigationColor)

)

),

BottomNavigationBarItem(

icon:Icon(

Icons.airplay,//color:_BottomNavigationColor,

),

title:Text('AipPlay',//style:TextStyle(color:_BottomNavigationColor)

)

),

],

currentIndex:_currentIndex,

onTap:(intindex){

setState((){

_currentIndex=index;

});

},

selectedItemColor: Colors.green,//unselectedItemColor: Colors.grey,

type:BottomNavigationBarType.fixed

),

);

}

}