0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

FlutterでIconButton内のsvgを拡大する方法

Posted at

詰まったのでメモしておきます。
ある時、IconButtonicon を 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

参考記事

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?