如何更改flutter中svg图像的大小？

Question

我使用flutter_svg: ^0.18.0在我的项目中使用 svg 图像。 但是我找不到合适的方法来改变它的大小。

这是我的代码

body: SafeArea(
    child: Center(
      child: SvgPicture.asset('assets/images/morelights.svg'),
    ),
  ),

Answer 1

您可以使用 IconButton 包装您的 SvgPicture 小部件

IconButton(
  onPressed: (){},
  icon: SvgPicture.asset(
      icDate,
      height: 24,
      width: 24,
  ),
),

Answer 2

我找到了一个解决方案:)

脚步

1. 将 svg 图标包裹在容器内。 （容器应该是一个子部件）
2. 将容器的颜色设置为透明。
3. 更改容器的大小。 （Svg 图标继承父窗口小部件的大小。）

注意：您也可以使用 IconButton 小部件。 容器在我的情况下效果更好:)

例子

Answer 3

您只需要使用 svg 图片的宽度和高度属性。

SvgPicture.asset(
        'assets/images/bm-icon1.svg',
         width: 18.0,
         height: 18.0,
      ),

Answer 4

编辑：您可以使用SizedBox轻松实现此目的：

SizedBox(
  width: 100.0,
  height: 150.0,
  child: SvgPicture.asset('assets/images/morelights.svg',),
)

原答案：

您可以在资产构造函数本身中指定高度和宽度：

SvgPicture.asset('assets/images/morelights.svg', height: 100, width: 150)

阅读本文档中所有可用的属性： SvgPicture.asset

Answer 5

将其包装在 Container 小部件中，因为 SvgPicture.asset() 将始终采用父级的完整可用高度或宽度。 您可以调整容器小部件的高度和宽度，以获得 SVG 所需的大小。

Container(
                  child: SvgPicture.asset('assets/images/morelights.svg'),
                  height: 100,
                ),

Answer 6

关键提示是使用fit属性，如下所示：

SvgPicture.asset(
      'assets/svg/notification.svg',
      height: 5, width: 5,
      fit: BoxFit.scaleDown
        )

Answer 7

您可以使用SvgPicture.asset的height和width参数：

Center(child: SvgPicture.asset(icon, height: 20, width: 20))

Answer 8

我偶然找到了解决方案。 用Container小部件包装SvgPicture并添加alignment 。

这样您就可以自由更改 SvgPicture 的宽度和高度。

Container(
  height: 100,
  width: 100,
  alignment: Alignment.center, // <---- The magic
  padding: const EdgeInsets.all(12),
  child: SvgPicture.asset(
     'assets/icons/svg-image.svg',
     semanticsLabel: 'Image',
     height: 50,
     width: 50,
  ),
),

希望这适用于您的情况

Answer 9

您可以用IconButton包装SvgPicture.asset小部件，此属性具有覆盖此问题的行为。 示例代码如下。

IconButton(
           icon: SvgPicture.asset('assets/svg_images/ic_plane.svg',
              color:  const Color(0xffFF5D2A),
              height: 20,
              width: 20,
            ), onPressed: () {  },
           ),