BottomNavigationBarの上部に、太線を表示したい。

Question

各アイコンを選択した際、BottomNavigationBarの上部に、太線を表示したいです。

---

Youtube動画内のエミュレーターでは、BottomAppBarにてcontainerを使用し、太線を作っています。

同様の表示を、BottomNavigationBarでも出来るのでしょうか？

---

また、太線アリで動的な動作ができるのなら、BottomNavigationBarでなくても可です。
もし方法がありましたら、教えて頂けると嬉しいです。

---

bottomNavigationBar: BottomNavigationBar(
        showUnselectedLabels: false,
        unselectedItemColor: Colors.grey,
        type: BottomNavigationBarType.fixed,
        currentIndex: pageIndex,
        onTap: (newIndex) {
          setState(() {
            pageIndex = newIndex;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.location_on),
            title: Text('Location'),

          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite_border),
            title: Text('Favorite'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.open_in_browser),
            title: Text('Explorer'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.calendar_today),
            title: Text('Plan'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person_outline),
            title: Text('Profile'),
          ),
        ],
      )

追記

Answer 1

同様にContainerを使って実装できないですか？

bottomNavigationBar: Container(
  child: BottomNavigationBar(
    ...
  ),
),

Comments

[kazuki_user]

うまくいきませんでした...????

状況をスクリーンショットで追記しました。
ご確認のうえ、認識の誤りがあれば教えて頂きたいです。????

[tepci]

heightとwidth、colorの行を消して、以下を追加するとどうなりますか？

decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: globals.black,
),
],
),

[kazuki_user]

globalsに赤の波線がでて、エラーでした。
因みに、Colors.blackですと普通にナビゲーションバー上部に1本の影ができました。

[tepci]

すみません、ほかのところからコピーしてきたので間違えていました...

[kazuki_user]

了解です。????

[tepci]

あとはそのBoxShadowに
spreadRadius: 2,
を追加すれば太線のようになると思うのですがどうでしょう？
できたらいろいろいじって調整してください。

[kazuki_user]

ご返信ありがとうございます。

BottomNavigationBar自体に直接shadowをかけると、BottomNavigationBar上部全体が一様にshadowに
なってしまい、

選択したアイコン上部のみに表示することは不可能でした????

ーーーーーーーーーーーーー

tepciさんは、ナビゲーションバー各アイコン上部に 太線を追加したい際には
どうなされますか？

[tepci]

こちら認識が間違っておりました????
てっきりボトムバー全体の上に表示されればいいのかと思っていましたすみません...
選択したアイコンのみの上部に表示するのですね。

ほかの手段を考えてみますね。

[tepci]

ちなみに、動画内と同じようにBottomAppBarではなく、BottomNavigationBarを使いたい理由などありますか？
私ならば、pub.devで探せばいい感じのボトムナビゲーションバーはたくさんあるのでそこから選びますが...

[kazuki_user]

pub.devで探せばいい感じのボトムナビゲーションバーはたくさんあるのでそこから選びますが...＞＞

ご返信ありがとうございます。

そうなのですね???? 親身になって考えて下さり、どうもありがとうございました。
強い理由はないのですが、純粋に知りたかったからです。

これからはpub.devをもっとよく探してみようと思います????

[tepci]

純粋に知りたくなることはありますよね！
BottomNavigationBarだとやはりカスタマイズ性が低いので、難しそうですね...
BottomNavigationBarItemの中のIconを何らかのウィジェットでラップして位置を変更してとかすればなんとかなりそうですが無理やりになってしまう気がします...

ちなみに僕が採用したボトムバーのパッケージは「curved_navigation_bar」です！

[kazuki_user]

「curved_navigation_bar」おもしろいですね！
試してみます????