[Flutter]Tab(タブ)のアイコン(icon)に画像（image）を使うには？

どうも、ちょげ(@chogetarou)です。

Tabのアイコンに画像を使う方法を紹介します。

方法

Tabのアイコンに画像を使うには、ImageIconを使います。

まず、Tabの引数「icon」にImageIconを指定します。

そして、ImageIconの引数に「AssetImage」もしくは「NetworkImage」を指定します。

Tab(
  icon: ImageIcon(
    AssetImage('Your Image Path'),
  ),
)

これでTabのアイコンに画像を使うことが出来ます。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: [
              Tab(
                icon: ImageIcon(
                  AssetImage('asset/images/ninja.png'),
                ),
              ),
              Tab(
                icon: ImageIcon(
                  AssetImage('asset/images/person.png'),
                ),
              ),
              Tab(
                icon: ImageIcon(
                  AssetImage('asset/images/akazukin.png'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }