不管是微信还是QQ，淘宝，支付宝等国内知名APP都有底部导航菜单（BottomNavigationBar），因此Flutter也提供了这一个BottomNavigationBar类，可以让我们快速轻松的创建APP底部导航，比Android的BottomNavigationView真的简单好用很多！

main.dart基本代码如下所示：

  Widget build(BuildContext context) {
    return Scaffold(
      body: Text("Hello World"),
        bottomNavigationBar: BottomNavigationBar(
          items: [ //导航菜单元素
          BottomNavigationBarItem(title: Text('首页'), icon: Icon(Icons.home),),
          BottomNavigationBarItem(title: Text('新闻'), icon: Icon(Icons.remove_from_queue),),
          BottomNavigationBarItem(title: Text('网评'), icon: Icon(Icons.chat_bubble_outline),),
          BottomNavigationBarItem(title: Text('历史'), icon: Icon(Icons.update),),
          BottomNavigationBarItem(title: Text('我的'), icon: Icon(Icons.person_outline),),
        ],
          //被选择item的颜色
          selectedItemColor: Colors.amber[800],
          //未选择item的颜色 
          unselectedItemColor: Colors.blue, 
          //当前页 
          currentIndex: 0, 
          //item点击事件
          onTap: (){},  
          //默认为shifting风格
          type: BottomNavigationBarType.shifting, 
          //设置导航菜单背景颜色，如果type为shifting风格时，此设置无效为默认白色背景
          //在type为fixed风格时，则导航背景为设置的该背景颜色
          backgroundColor: Colors.blue, 
          showSelectedLabels: true, 导航是否显示文字说明，默认为true显示
        ),
    );
  }

效果如图所示：

在BottomNavigationBar类中有一个非常重要的属性“type”，它的值是一个枚举类型，分别是“BottomNavigationBarType.fixed”和“BottomNavigationBarType.shifting”，设置这两个值会让你APP底部导航呈现出不一样的效果。

例如“type:BottomNavigationBarType.fixed”这样设值，就有如下效果，显示所有的菜单label文字标识：

而“type:BottomNavigationBarType.shifting”这样设值则会隐藏菜单文字说明，当有点击导航元素之后才会显示菜单文字信息，如图所示：

注意说明：

要想在这种type为“BottomNavigationBarType.shifting”风格下设置导航菜单的背景颜色（如上述的蓝色），使用“backgroundColor: Colors.blue”这样直接设置是不行的，官方认为只能通过设置item元素的背景颜色，来间接达到设置导航背景颜色的需求，代码如下：

  bottomNavigationBar: BottomNavigationBar(
  items: [
	BottomNavigationBarItem(title: Text('首页'), icon: Icon(Icons.home),backgroundColor: Colors.blue),
	BottomNavigationBarItem(title: Text('新闻'), icon: Icon(Icons.remove_from_queue),backgroundColor: Colors.blue),
	BottomNavigationBarItem(title: Text('网评'), icon: Icon(Icons.chat_bubble_outline),backgroundColor: Colors.blue),
	BottomNavigationBarItem(title: Text('历史'), icon: Icon(Icons.update),backgroundColor: Colors.blue),
	BottomNavigationBarItem(title: Text('我的'), icon: Icon(Icons.person_outline),backgroundColor: Colors.blue),
  ],
  selectedItemColor: Colors.amber[800],
  unselectedItemColor: Colors.white,
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  type: BottomNavigationBarType.shifting,
  showSelectedLabels: true,
  ),

Flutter BottomNavigationBar完整代码，点击菜单选项切换不同页面：

import 'package:flutter/material.dart';
import 'homePage.dart';
import 'commentPage.dart';
import 'newsPage.dart';
import 'historyPage.dart';
import 'minePage.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,

      ),
      home: MyHomePage(title: 'My First Flutter APP'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  //菜单角标初始化为0，	
  int _selectedIndex = 0;

  //菜单点击事件
  void _onItemTapped(int index) {
    setState(() { //每次点击都会改变值
      _selectedIndex = index;

    });
  }

  //页面组件集合
  List<Widget> _widgetOptions = <Widget>[
    HomePage(title: "首页"),
    NewsPage(title: "新闻"),
    CommentPage(title: "评论"),
    HistoryPage(title: "历史"),
    MinePage(title: "我的"),
  ];

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: _widgetOptions.elementAt(_selectedIndex),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(title: Text('首页'), icon: Icon(Icons.home),backgroundColor: Colors.blue),
            BottomNavigationBarItem(title: Text('新闻'), icon: Icon(Icons.remove_from_queue),backgroundColor: Colors.blue),
            BottomNavigationBarItem(title: Text('网评'), icon: Icon(Icons.chat_bubble_outline),backgroundColor: Colors.blue),
            BottomNavigationBarItem(title: Text('历史'), icon: Icon(Icons.update),backgroundColor: Colors.blue),
            BottomNavigationBarItem(title: Text('我的'), icon: Icon(Icons.person_outline),backgroundColor: Colors.blue),
          ],
          selectedItemColor: Colors.amber[800],
          unselectedItemColor: Colors.white,
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
          type: BottomNavigationBarType.shifting,
          showSelectedLabels: true,
        ),
    );
  }
}

点击之后效果如图所示：