Bottomナビゲーションバーのiconを透明化したりテキストを隠す方法

3099 ワード

icon Flutter widget Dart Dart テキストリンク

Bottomナビゲーションバーのiconを透明化する方法を書いていきます

東京でニートしてる仕事乞食です
プログラミングも記事投稿も初心者なんで
動物園で動物を憐れむかのように
見守ってください

Bottomナビゲーションバーはiconを入れないとエラーになるんですがiconを使いたくない場面もあると思います

そんな時に使えるのがこれ

bottomNavigationBar: BottomNavigationBar(
            onTap: (index) {},
            //icon　透明化
            //  selectedIconTheme: const IconThemeData(opacity: 0, size: 0),これと
              unselectedIconTheme: const IconThemeData(opacity: 0, size: 0),これ
          ),

これが

こう

非選択時にテキストを隠したい場合

bottomNavigationBar: BottomNavigationBar(
            onTap: (index) {},
            showSelectedLabels: true,選択しているタブのテキストの表示をtrue,falseで変える
            showUnselectedLabels: true,非選択時のタブのテキストの表示をtrue,falseで変える
          ),

非選択時のタブのテキストを消すコードを実際にやってみる

bottomNavigationBar: BottomNavigationBar(
            onTap: (index) {},
            showSelectedLabels: true,
            showUnselectedLabels: false,非選択時テキストの表示を隠す
          ),

最後にiconを隠すコードとテキストを隠すコードを合わして押されたテキストが飛び出てるように見えるようにしてみる

bottomNavigationBar: BottomNavigationBar(
            onTap: (index) {},
            //非選択時icon透明化
              unselectedIconTheme: const IconThemeData(opacity: 0, size: 0),非選択時のiconを透明化してサイズも0にする
            //タブのテキスト
            showSelectedLabels: true,選択時のテキストを表示
            showUnselectedLabels: false,非選択時のテキストを非表示
          ),

終わり

初投稿で気づいた事

多分教えるの向いてない

日常生活においても伝わってると思い込んで説明を省略しがち
まぁ気長に備忘録感覚で投稿励んでいきます

ここまで見ていただいた方に感謝します

Author And Source

この問題について(Bottomナビゲーションバーのiconを透明化したりテキストを隠す方法), 我々は、より多くの情報をここで見つけました https://qiita.com/DaNieL-1evel_17/items/7b343eea21f44497daf9

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .

二分探索 — JS (1 日目)