main.dart代码：
import 'package:flutter/material.dart';
import 'bottom_navigation_widget.dart';

void main()=> runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title:'Flutter bottomNavigationBar',
theme:ThemeData.light(),
home:BottomNavigationWidget()
);
}.
}

控制导航代码：
import 'package:flutter/material.dart';
import 'Pages/Home.dart';
import 'Pages/email.dart';
import 'Pages/pages.dart';
import 'Pages/air.dart';
class BottomNavgationWidget extends StatefulWidget {
@override
_BottomNavgationWidgetState createState() => _BottomNavgationWidgetState();
}

class _BottomNavgationWidgetState extends State<BottomNavgationWidget> {

final _BottomNavigationColor = Colors.blue;
int _currentIndex = 0;
List<Widget> list = List();
@override
void initState() {
list
..add(Home())
..add(email())
..add(pages())
..add(air());
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: list[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
title: Text(
'home', style: TextStyle(color: _BottomNavigationColor),),
icon: Icon(
Icons.home,
color: _BottomNavigationColor,
)

        ),
        BottomNavigationBarItem(
            title: Text(
              'sec', style: TextStyle(color: _BottomNavigationColor),),
            icon: Icon(
              Icons.pages,
              color: _BottomNavigationColor,
            )

        ),
        BottomNavigationBarItem(
            title: Text(
              'thr', style: TextStyle(color: _BottomNavigationColor),),
            icon: Icon(
              Icons.theaters,
              color: _BottomNavigationColor,
            )

        ),
        BottomNavigationBarItem(
            title: Text(
              'fou', style: TextStyle(color: _BottomNavigationColor),),
            icon: Icon(
              Icons.favorite,
              color: _BottomNavigationColor,
            )

        ),
      ],
    currentIndex: _currentIndex,
    onTap: (int index) {
        setState(() {
          _currentIndex = index;
        });
    },
    type: BottomNavigationBarType.fixed,
  ),
);

}
}

4个页面代码：
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: Text('Home'),
),

);

}
}
其他三个页面类似。

不规则底部导航栏制作：

floatingActionButton Widget

floatingActionButton工作中我们通常简称它为“FAB”，也许只是我们公司这样称呼，从字面理解可以看出，它是“可交互的浮动按钮”,其实在Flutter默认生成的代码中就有这家伙，只是我们没有正式的接触。

一般来说，它是一个圆形，中间放着图标，会优先显示在其他Widget的前面。

下面我们来看看它的常用属性:

onPressed ：点击相应事件，最常用的一个属性。

tooltip：长按显示的提示文字，因为一般只放一个图标在上面，防止用户不知道，当我们点击长按时就会出现一段文字性解释。非常友好，不妨碍整体布局。

child ：放置子元素，一般放置Icon Widget。

写完这些代码已经有了一个悬浮的按钮，但这个悬浮按钮还没有和低栏进行融合，这时候需要一个属性。
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
这时候就可以和底栏进行融合了。

BottomAppBar Widget

BottomAppBar 是 底部工具栏的意思，这个要比BottomNavigationBar widget灵活很多，可以放置文字和图标，当然也可以放置容器。

BottomAppBar的常用属性:

color:这个不用多说，底部工具栏的颜色。
shape：设置底栏的形状，一般使用这个都是为了和floatingActionButton融合，所以使用的值都是CircularNotchedRectangle(),有缺口的圆形矩形。
child ： 里边可以放置大部分Widget，让我们随心所欲的设计底栏。

没有交互的所有代码：
import 'package:flutter/material.dart';

class BottomAppBarDemo extends StatefulWidget {
_BottomAppBarDemoState createState() => _BottomAppBarDemoState();
}

class _BottomAppBarDemoState extends State<BottomAppBarDemo> {

@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: (){

      },
      tooltip: 'Increment',
      child: Icon(
        Icons.add,
        color: Colors.white,
      ),
    ),
   floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
   bottomNavigationBar: BottomAppBar(
     color:Colors.lightBlue,
     shape:CircularNotchedRectangle(),
     child: Row(
       mainAxisSize: MainAxisSize.max,
       mainAxisAlignment: MainAxisAlignment.spaceAround,
       children: <Widget>[
         IconButton(
           icon:Icon(Icons.home),
           color:Colors.white,
           onPressed:(){
            
           }
         ),
         IconButton(
           icon:Icon(Icons.airport_shuttle),
           color:Colors.white,
           onPressed:(){
             
           }
         ),
       ],
     ),
   )
    ,
 );

}
}

点击交互子页面：
上面用了四个页面，现在可以写一个动态的页面即可代替四个页面。
新建一个页面接收title
import 'package:flutter/material.dart';

class EachView extends StatefulWidget {
String _title;
EachView(this._title);
@override
_EachViewState createState() => _EachViewState();
}

class _EachViewState extends State<EachView> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(title:Text(widget._title)),
body: Center(child:Text(widget._title)),
);
}
}

所有代码
import 'package:flutter/material.dart';
import 'each_view.dart';

class BottomAppBarDemo extends StatefulWidget {
_BottomAppBarDemoState createState() => _BottomAppBarDemoState();
}

class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
List<Widget> _eachView; //创建视图数组
int _index = 0; //数组索引，通过改变索引值改变视图

@override
void initState() {
// TODO: implement initState
super.initState();
_eachView = List();
_eachView..add(EachView('Home'))..add(EachView('Me'));
}

@override
Widget build(BuildContext context) {
return Scaffold(
body:_eachView[_index],
floatingActionButton: FloatingActionButton(
onPressed: (){
Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){
return EachView('New Page');
}));
},
tooltip: 'Increment',
child: Icon(
Icons.add,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
color:Colors.lightBlue,
shape:CircularNotchedRectangle(),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon:Icon(Icons.home),
color:Colors.white,
onPressed:(){
setState(() {
_index=0;
});
}
),
IconButton(
icon:Icon(Icons.airport_shuttle),
color:Colors.white,
onPressed:(){
setState(() {
_index=1;
});
}
),
],
),
)
,
);
}
}