Flutter　Tabのアイコンを左に表示する方法

2023年9月11日

環境
Windows11 pro 64bit
Flutter 3.3.7

概要

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

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

使用例

@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('tokyo'),
                ],
              ),
            ),
            Tab(
              child: Row(
                children: [
                  Icon(Icons.local_activity),
                  Text('oosaka'),
                ],
              ),
            ),
            Tab(
              child: Row(
                children: [
                  Icon(Icons.settings),
                  Text('fukuoka'),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}