Flutter 31: 圖解自定義底部狀态欄 ACEBottomNavigationBar (二)

      小菜前兩天剛學習了一下自定義底部狀态欄，現補充固定凸出中間 Item 位的樣式，并生成插件發不到 Pub 中。

補充樣式 (中間位凸出)

      小菜補充一種中間位凸出樣式，item 總數為奇數時中間位才會凸出，而偶數時不會凸出，預設其他 item 為普通 nomal 樣式，支援圖檔或 icon 以及文字變色等效果。

enum ACEBottomNavigationBarType {
  normal,   // 普通類型，選中變色，樣式不變
  zoom,     // 圖檔或icon變大，此時隐藏文字，支援變色
  zoomout,  // 圖檔或icon變大，并凸出顯示，文字顯示，支援變色
  zoomoutonlypic,  // 圖檔或icon變大，并凸出顯示，文字隐藏
  protruding,      // 中間位凸出顯示，其餘位為普通類型
}           

      小菜在前幾種類型中配置效果主要是在 NavigationItem 中實作的，而固定凸出位樣式隻有在中間顯示，是以小菜準備在 ACEBottomNavigationBar 中進行配置，優先判斷 item 總數，再将中間位凸出展示。其中小菜偷個懶，因為隻有在中間位展示，是以在向子 NavigationItem 傳 type 類型是傳遞的是 nomel 類型，隻需判斷中間位是否展示即可。

Widget protrudingWid() {
  Widget proWid;
  if (widget.items.length % 2 == 0) {
    proWid = Container(width: 0.0, height: 0.0);
  } else {
    proWid = Positioned.fill(
        top: -30,
        child: Container(
            child: Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: Stack(alignment: Alignment.center, children: <Widget>[
                  SizedBox(
                      height: 60.0,
                      width: 60.0,
                      child: Container(
                          decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color: widget.protrudingColor != null
                                  ? widget.protrudingColor
                                  : Colors.white),
                          child: Padding(
                              padding: const EdgeInsets.all(0.0),
                              child: protrudingItemWid(
                                  widget.items[protrudingIndex]))))
                ]))));
  }
  return proWid;
}

Widget protrudingItemWid(NavigationItemBean item) {
  Widget itemWidget;

  if (item.image != null) {
    itemWidget = GestureDetector(
        child: Image(image: item.image),
        onTap: () {
          widget.onTabChangedListener(protrudingIndex);
          _setSelected(item.key);
        });
  } else {
    itemWidget = IconButton(
        highlightColor: Colors.transparent,
        splashColor: Colors.transparent,
        alignment: Alignment(0, 0),
        icon: Icon(
          item.icon,
          size: 40.0,
          color: item.iconUnSelectedColor,
        ),
        onPressed: () {
          widget.onTabChangedListener(protrudingIndex);
          _setSelected(item.key);
        });
  }
  return itemWidget;
}           

釋出 Pub 插件

      小菜共整理了五種類型，基本可以實作小菜日常需要，嘗試生成第一版插件并釋出到 Pub 倉庫。

1. 建立插件 plugin

      File -> New -> New Flutter Project... -> Flutter Plugin 實作方式與 Android 無異，主要是在 lib 中實作功能，并在 example 中實作基本的調用，之後雙傳到 git 上；

2. 釋出 Pub 倉庫

      按照官網介紹，其實很友善，但其中有很多需要注意的地方，前期準備外網環境與谷歌郵箱賬号，小菜接下來詳細介紹遇到的問題。

問題一：完善資訊與包大小

      在執行第一步 flutter packages pub publish --dry-run 遇到的 Warning 是基本資訊不完整以及包大于 100M，于是在 pubspec.yaml 檔案中補充 author/homepage 資訊，注意 author 中建議添加郵箱，之後删除無用的緩存檔案；再次執行即可。

問題二：pub finished with exit code 1

      在執行第二步 flutter packages pub publish 遇到 Failed to upload the package. 因為沒有錯誤提醒，這可愁壞小菜了，不知該從何處入手；

      官網建議從網絡環境入手，但是小菜網絡是正常通路的；之後又請教了一下網上大神，建議在國内先把國内鏡像關掉，再嘗試終于成功了，幸福感油然而生啊！

      小菜第一次嘗試釋出插件，還有很多不完善的地方，會努力維護，有不對的地方請多多指點。

GitHub 源碼 Pub 倉庫