15
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Flutter大学Advent Calendar 2021

Day 9

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

Posted at

##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,非選択時テキストの表示を隠す
          ),

image.png

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

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

image.png

image.png

#終わり
初投稿で気づいた事

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

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

15
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?