詰まったのでメモしておきます。
ある時、IconButton
の icon
を svg画像にしなければならない事例がありました。
svgの表示には、flutter_svg を使用しています。
普通に書いたらこうなります。
IconButton(
onPressed: () {},
icon: SvgPicture.asset(
'assets/images/arrow_right.svg',
color: Colors.black,
width: 200,
),
),
しかし、これではアイコンが非常に小さく表示されてしまいました。もともとの画像が小さかったのでしょう。
試した(が、効果がなかった)方法
たくさん試しました。
FittedBox に入れる
FittedBox(
fit: BoxFit.scaledown,
IconButton(
onPressed: () {},
icon: SvgPicture.asset(
'assets/images/arrow_right.svg',
color: Colors.black,
),
),
)
だめでした。
SizedBox に入れる
SizedBox(
width: 200,
height: 200,
IconButton(
onPressed: () {},
icon: SvgPicture.asset(
'assets/images/arrow_right.svg',
color: Colors.black,
width: 200,
height: 200,
),
),
)
だめでした。
SizedBox に入れて、IconSizeを指定する
SizedBox(
width: 200,
height: 200,
IconButton(
onPressed: () {},
iconSize: 200,
icon: SvgPicture.asset(
'assets/images/arrow_right.svg',
color: Colors.black,
width: 200,
height: 200,
),
),
)
だめでした。
成功した方法
最終的に、こちらのstackoverflowの記事 を参考にしてsvg画像の拡大に成功しました。
Transform.scale(
scale: 2.5, // 拡大したい倍率(多分)
child: IconButton(
onPressed: () {},
icon: SvgPicture.asset(
'assets/images/arrow_right.svg',
color: Colors.black,
),
),
)
少し無理矢理のような気もしますが…。
何か私の方法が間違っていたりもっと良い方法があったりすれば教えていただければ幸いです。
環境
Flutter 3.3.0
flutter_svg 1.1.5
参考記事