Zenn
🤖

convex_bottom_barのアイコンサイズ変更【Flutter】

2023/10/29に公開
Flutter
Dart
#
icon
#
convexbottombar
#
customize
tech

ゴール：パッケージのアイコンサイズをカスタマイズしたい！！

flutterでアプリ開発をしていると、便利なパッケージがたくさんありますよね。
そのようなパッケージのプロパティでサイズを変更できない時に使えるアイデアです！

結論

Containerを作って、Paddingを変更するだけ。

具体的なコード例

paddingの値を変えるだけで、アイコンサイズを変えることができます。

TabItem(
	icon: Container(
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: const Color.fromARGB(255, 254, 23, 23),
              ),
              padding: EdgeInsets.all(8),
              child: SvgPicture.asset(Assets.bottomPlus),
	),
)

補足(デメリット)

このままだとボタンのすぐ周りをタップしてもタップアクションが反応します。自分は妥協しました！！もっと良い方法があればコメントで教えていただきたいです〜🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️

Discussion