Как изменить размер изображения svg в флаттере?

Редактировать: Вы можете использовать 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

Вы можете обернуть виджет SvgPicture с помощью IconButton.

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

Я нашел решение для этого :)

Шаги

1. Оберните значок svg внутри контейнера. (Контейнер должен быть дочерним виджетом)
2. Установите цвет контейнера на прозрачный.
3. Измените размер контейнера. (Значок Svg наследует размер родительского виджета.)

Примечание. Вы также можете использовать виджет IconButton. Контейнер работает лучше в моем случае :)

Пример

Оберните его в виджет Container, так как SvgPicture.asset() всегда будет принимать полную доступную высоту или ширину родителя. вы можете изменить высоту и ширину виджета Container, чтобы получить желаемый размер для вашего SVG.

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

вам просто нужно использовать свойства width и height изображения svg.

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

Ключевой совет — использовать атрибут fit следующим образом:

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

Вы можете использовать параметры height и width файла SvgPicture.asset:

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

Я нашел решение случайно. Оберните SvgPicture виджетом Container и добавьте выравнивание.

Таким образом, вы можете свободно изменять ширину и высоту 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,
  ),
),

Надеюсь, это сработает в вашем случае

Вы можете обернуть виджет SvgPicture.asset с помощью IconButton. Это свойство имеет поведение, позволяющее перезаписать эту проблему. пример кода приведен ниже.

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