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

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

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

原因
svgのサイズが変わらない時の対処法
おわりに

原因

サイズが変わらない原因は「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
    ),
  )
)