Flutterでsvg画像のサイズを指定する

FlutterでSVG画像が意図しない範囲まで広がってしまったという事象に対する対処案です

元々のコード

• タップ領域は24pxの領域がほしい
• でもアイコンはデザイン通り14pxでいい

と思い以下のように実装してみました。

SizedBox(
  height: 24,
  width: 24,
  child: GestureDetector(
    onTap: () {
        // 処理
    },
    child: Assets.icon.front.svg(height: 14),
  ),
),

しかし、実際これで見るとSVGのサイズは24pxに引き延ばされてしまっていました。

対象

AlignでWrapしましょう

SizedBox(
  height: 24,
  width: 24,
  child: GestureDetector(
    onTap: () {
      pageController.previousPage(
        duration: const Duration(milliseconds: 200),
        curve: Curves.easeInOut,
      );
    },
    child: Align(
      child: Assets.icon.front.svg(height: 14),
    ),
  ),
),

こうすれば期待通り14の高さになります。