【Flutter】 CupertinoTabBarに余白を入れたい

Question

アイコンがキツキツになってしまっているので、上に余白を設けたいのですが、何か方法はありますか。

    return CupertinoTabScaffold(
            tabBar: CupertinoTabBar(
              items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(icon: Icon(Icons.face), title: Text('タレント')),
                BottomNavigationBarItem(icon: Icon(Icons.message), title: Text('リクエスト')),
                BottomNavigationBarItem(icon: Icon(Icons.settings), title: Text('設定')),
              ],
            ),
            tabBuilder: (context, index) {
              switch (index) {
                case 0: // 1番左のタブが選ばれた時の画面
                  return CupertinoTabView(builder: (context) {
                    return CupertinoPageScaffold(child: MyPageTabController());
                  });
                case 1: // 1番左のタブが選ばれた時の画面
                  return CupertinoTabView(builder: (context) {
                    return CupertinoPageScaffold(child: RequestListTabController());
                  });
                case 2: // 1番左のタブが選ばれた時の画面
                  return CupertinoTabView(builder: (context) {
                    return CupertinoPageScaffold(
                      child: SettingTabController(),
                    );
                  });
              }
            });
  }
}

Answer 1

CupertinoTabBarの高さは、内部的にSizedBoxで指定されているので、
アイコンにPaddingをつけるなどの方法では、簡単には変えられないみたいです。

個人的には、余白を作るのであれば、アイコンサイズの方を小さくするという方法もアリだと思います。

tabBar: CustomCupertinoTabBar(
  iconSize: 26,
  items: ...

Answer 2

アイコンをPaddingで囲って、余白を設定してみたらどうでしょうか。

https://api.flutter.dev/flutter/widgets/Padding-class.html

Comments

[smilax]

すみません、コードを載せるのを忘れておりました。
上記の通り、プロパティとして設定しているので、他のWIdgetでラップすることはできなさそうです

[satokei]

Icon を 他のWidgetでラップすることは可能です。

[smilax]

Iconには効いたのですが、テキストのほうには効かないようです。
上に寄りすぎているので、全体的に下に下げたいのですが、何か施策はあるでしょうか

[satokei]

Text もラップするしかないそうですかね。

[smilax]

なぜかTextはpaddingが効かないんですよね、、、

[satokei]

なるほど....????
Paddingだと限界の領域なのだろうと思います。

無理やり動かすなら、Transform とか使えそうですが、
正直もっといい方法があることを願います。
--------------------
Transform(
transform: Matrix4.translationValues(0, 10, 0),
child: Text('タレント'),
)