【Flutter】 Svgのサイズが変わらない時の対処法を解説

Flutter

今回は、FlutterでSvg画像を表示しているときに画像のサイズが変わらない時の対処方法を解説します。

SvgPicture」の「width」や「height」を指定しているにも関わらずサイズが変わらなくて困っている方必見です。

スポンサーリンク

原因

サイズが変わらない原因は「Container」などのサイズを決定づけるWidgetでラップしていることです。

「SvgPicture」のみで使用している時は問題なくサイズ変更ができるのですが、このようなWidgetでラップをするとサイズの変更ができなくなってしまいます。

svgのサイズが変わらない時の対処法

具体的な解決策を紹介していきます。

その方法は、「SvgPicture」を「FittedBox」でラップすることです。

そして、「FittedBox」の「fit」プロパティに「BoxFit.scaleDown」を設定します。

これで「SvgPicture」のサイズを「width」や「height」で設定することができるようになります。

実際のコードは以下です。

Container(
  width: 40, height: 40,
  decoration: BoxDecoration(
    color: Colors.lightBlueAccent,
  ),
  child: FittedBox( //こちらを追加
    fit: BoxFit.scaleDown, //こちらを追加
    child: SvgPicture.asset(
      path,
      width: 20,
      height: 20
    ),
  )
)

おわりに

今回は、FlutterでSvg画像を表示しているときに画像のサイズが変わらない時の対処方法を解説させていただきました。

開発しているときにContainerでの外枠のデザインをしながらその中にSvgの画像を表示したいと思ったときにうまくサイズの調節ができずに困ったことがあったので記事にしました。

同じようなことで悩んでいる方の参考になれば幸いです。

今回参考にさせていただいたgithubのissueを掲載しておきます。

興味がある方はこちらも合わせてご覧ください。

SvgPicture ignores hieght/width when contained. · Issue #196 · dnfield/flutter_svg
I'm trying to display an svg inside a box. The problem is that the svg is always sizing itself to the size of the container rather than sizing itself based on t...

当プログではプログラミング学習に関する記事を執筆しております。

Flutterに関する記事も書いておりますのでぜひ合わせてご覧ください。

Flutter記事まとめ
FlutterとDartの学習に関する記事をまとめております。Dartの文法に関する記事やFlutterのWidgetの活用、エラーの解決方法などFlutterに関する記事を執筆しております。

最後までご覧いただきありがとうございました。

コメント

タイトルとURLをコピーしました