[Flutter]Tab(タブ)のアイコン(icon)を左(left)に表示するには？

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

Tabのアイコンを左に表示する方法を紹介します。

方法

Tabのアイコンを左に表示するには、Rowウェジェットを使います。

まず、TabのchildにRowウェジェットを指定します。

そして、Rowウェジェットの引数「children」に、Iconウェジェット、Textウェジェットの順に指定します。

Tab(
  child: Row(
    children: [
      Icon(/*アイコン*/),
      Text(/*テキスト*/),
    ],
  ),
),

これでTabのアイコンを左に表示することが出来ます。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: DefaultTabController(
        length: 3,
        child: Scaffold(
          body: TabBar(
            labelColor: Colors.pink,
            unselectedLabelColor: Colors.blue,
            tabs: [
              Tab(
                child: Row(
                  children: [
                    Icon(Icons.person),
                    Text('Person'),
                  ],
                ),
              ),
              Tab(
                child: Row(
                  children: [
                    Icon(Icons.local_activity),
                    Text('Local'),
                  ],
                ),
              ),
              Tab(
                child: Row(
                  children: [
                    Icon(Icons.settings),
                    Text('Settings'),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }