大家好，今天本來要做Series Detail的頁面，但這邊遇到跳轉頁面的時候會讓底部導航欄消失，所以今天先來解決這個問題。今天也是第一次，這個專案要加入plugin。

在跳轉頁面的時候使用的是Navigator，所以為了跳轉頁面不隱藏底部導航欄，按理說應該要新增一個Navigator

新增Navigator還是有點麻煩的，還好看到一個Plugin可以讓我們簡單使用，得到我們要的效果

custom_navigator

第一步 為程式添加依賴

在程式的檔案裡會看到一個pubspec.yaml，跟先前新增圖檔一樣
在dependencies下，加上一行custom_navigator: 0.3.0
有^符號代表會更新到該版本最新

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.3
  custom_navigator: 0.3.0

第二步 安裝

在Terminal執行flutter pub get 或者 Android Studio 上方會看到一個Pub get

$ flutter pub get

Running "flutter pub get" in flutter_neflix_cover...                0.9s
Process finished with exit code 0

第三步 Import使用

安裝完成就可以使用了

import 'package:custom_navigator/custom_navigator.dart';

原本的程式

Scaffold(
      body: pages[currentIndex],
      bottomNavigationBar: BottomNavigationBar(...),
    )

先在MainPage內宣告一個navigatorKey

GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

然後把原本body帶的pages套CutomNavigator,並代入navigatorKey

 Scaffold(
      body: CustomNavigator(
        navigatorKey: navigatorKey,
        home: pages[currentIndex],
        pageRoute: PageRoutes.materialPageRoute,
      ),
      bottomNavigationBar: BottomNavigationBar(...),
    )

我們為列表內的項目添加點擊時跳轉頁面(先隨便複製個頁面來測試)

onTap: (){
Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context)=>SeriesDetailPage()));
},

測試之後會發現我們可以正常進入Detail畫面，但是再去點其他底部導航欄卻沒辦法切換。
要做的是在點擊的時候退回到main page，所以需要在點擊的時候加上一行

   setState(() {
            navigatorKey.currentState.maybePop();  //讓頁面退回來，指定了這一個navigator
            currentIndex = index;  //原本點擊只是換index
          });

最後就可以正常切換頁面了

GitHub連結： flutter-netflix-clone