先來看看制作效果：

前置知識--StatefulWidget

StatefulWidget具有可變狀態(state)的窗口組件（widget）。使用時要根據變化狀態，調整State值，

能夠快速初始化，在VSCode中直接使用快捷方式生成代碼（直接在VSCode中輸入stful後回車自動生成結構），如下：

class name extends StatefulWidget {
  _nameState createState() => _nameState();
}
class _nameState extends State<name> {
  @override
  Widget build(BuildContext context) {
    
 
return Container(
       child: child,
    );
  }
}

上面的代碼可以清楚的看到，使用StatefulWidget分為兩個部分，第一個部分是繼承與StatefullWidget，第二個部分是繼承於State.其實State部分才是重點，主要的代碼都會寫在State中。

1.主入口文件的編寫

這裏先搭建一個APP通用結構，其核心為引入自定義的BottomNavigationWidget組件。

代碼如下：

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()
    );
  }.
}

2.BottomNaivgationWidget組件編寫

（1）在lib目錄下，新建一個bottom_navigation_widget.dart文件

使用快捷方式生成基本結構代碼把name修改為BottomNavigationWidget，然後開始編寫底部導航欄，相關代碼如下：

import ‘package:flutter/material.dart‘;
class BottomNavigationWidget extends StatefulWidget {
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}
class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _BottomNavigationColor = Colors.blue;//定義顏色值
  @override
  Widget build(BuildContext context) {
     return Scaffold(
       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)
             )
           ),
         ],
         type:BottomNavigationBarType.fixed
       ),
     );
  }
}

上面代碼中我們直接返回一個Scaffold(腳手架)，然後使用BottomNavigationBar組件進行填充。

此時使用flutter run 來進行查看代碼了，效果已經出現，在APP的頁面上已經出現了一個底部導航欄，只不過現在還點擊還沒有什麽效果。接下來開始制作切換頁面。

3.子頁面的編寫

3.1新建一個pages目錄，裝文件

，然後在目錄下面新建home_screen.dart文件，在裏面寫一個HomeScreen組件，只放入一個AppBar和一個Center，然後用Text Widget表明即可

import ‘package:flutter/material.dart‘;
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text(‘HOME‘),
      ),
      body:Center(
        child: Text(‘HOME‘),
      )
    );
  }
}

同樣地建立如下文件：

（1）email_screen.dart

（2）pages_screen.dart

（2）airplay_screen.dart

參照home_screen.dart文件然後修改少量的代碼來完成了。這些是導航要用的子頁面，有了這些頁面，才能繼續編寫代碼。

3.2 重寫initState()方法

我們要重寫initState()方法，把剛才做好的頁面進行初始化到一個Widget數組中。有了數組就可以根據數組的索引來切換不同的頁面了。

代碼如下：

 List<Widget> list = List();
 @override
 void initState(){
    list
      ..add(HomeScreen())
      ..add(EmailScreen())
      ..add(PagesScreen())
      ..add(AirplayScreen());
    super.initState();
  }

這裏的..add()是Dart語言的..語法，簡單來說就是返回調用者本身。這裏list後用了..add()，還會返回list，然後就一直使用..語法，能一直想list裏增加widget元素。 最後我們調用了一些父類的initState()方法。

4.BottomNavigationBar裏的響應事件

BottomNavigationBar組件裏提供了一個相應事件onTap，這個事件自帶一個索引值index，通過索引值我們就可以和我們list裏的索引值相對應了，currentIndex屬性實現選中當前索引。

currentIndex:_currentIndex,    
onTap:(int index){
           setState((){
             _currentIndex= index;
           });
         },

最後給出bottom_navigation_widget.dart的全部代碼：

import ‘package:flutter/material.dart‘;
import ‘pages/home_screen.dart‘;
import ‘pages/email_screen.dart‘;
import ‘pages/pages_screen.dart‘;
import ‘pages/airplay_screen.dart‘;
class BottomNavigationWidget extends StatefulWidget {
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}
class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _BottomNavigationColor = Colors.blue;
  int _currentIndex = 0;
  List<Widget> list = List();
  @override
  void initState(){
    list
      ..add(HomeScreen())
      ..add(EmailScreen())
      ..add(PagesScreen())
      ..add(AirplayScreen());
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
     return Scaffold(
       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:(int index){
           setState((){
             _currentIndex= index;
           });
         },
         type:BottomNavigationBarType.fixed
       ),
     );
  }
}

此處只是作為學習梳理思路所用，文章參考此鏈接

Flutter實例一--底部規則導航欄制作