Рендеринг SVG Flutter

90

Я попытался добавить изображение с источником SVG в свое приложение для флаттера.

new AssetImage("assets/images/candle.svg"))

Но визуальной обратной связи я не получил. Как я могу визуализировать изображение SVG во Flutter?

dart flutter Сыпь
источник
4
попробуйте использовать простой в использовании flutter_svg 0.14.0 пакет, он работает как шарм подробнее здесь pub.dev/packages/flutter_svg , все благодаря этому парню github.com/dnfield, который портировал логику рендеринга svg хрома на dart
maheshmnj

Ответы:

63

В настоящее время Flutter не поддерживает SVG. Следите за обновлениями в выпуске 1831 .

Если вам абсолютно необходим векторный рисунок, вы можете увидеть виджет Flutter Logo в качестве примера того, как рисовать с помощью CanvasAPI, или растеризовать свое изображение на нативной стороне и передать его во Flutter в виде растрового изображения, но на данный момент лучше всего вставлять растеризованные изображения активов с высоким разрешением.

Коллин Джексон
источник
Также, если вам не нужен цвет, вы всегда можете выбрать шрифт, как это делает пакет Icons.
prodaea 01
ну, в конце концов, ему нужно просто визуализировать изображение svg, которое могла бы сделать любая библиотека svg, подобная этой pub.dev/packages/flutter_svg
maheshmnj
вопрос открыт с 13 февраля 2016 года. сколько нам нужно ждать?
BloodLoss
71

Шрифты - отличный вариант во многих случаях.

Я работал над библиотекой для рендеринга SVG на холсте, доступной здесь: https://github.com/dnfield/flutter_svg

API на данный момент будет выглядеть примерно так

new SvgPicture.asset('asset_name.svg')

для рендеринга asset_name.svg (размером с его родительским, например a SizedBox). Вы также можете указать colorи blendModeдля тонировки актива.

Теперь он доступен в пабе и работает как минимум с Flutter версии 0.3.6. Он обрабатывает множество случаев, но не все - см. Репозиторий GitHub для получения обновлений и проблем с файлами.

Исходная проблема GitHub, на которую ссылается Колин Джексон, на самом деле не предназначена для того, чтобы в первую очередь ориентироваться на SVG во Flutter. Я открыл здесь еще одну проблему: https://github.com/flutter/flutter/issues/15501

Дэн Филд
источник
Немного не по теме, но есть ли у него поддержка iOS? Насколько мне известно, iOS поддерживает векторы в формате PDF, поэтому мне просто любопытно, можно ли это использовать для рендеринга векторов и на iOS
MRainzo
3
Он должен работать на любой платформе, поддерживаемой Flutter. Все это написано на Dart с использованием Canvasметодов.
Дэн Филд,
1
почему он не поддерживает последнюю
версию
Привет, Дэн! Можете ли вы добавить поддержку - dart: svg library - api.dart.dev/stable/2.9.2/dart-svg/dart-svg-library.html ? у flutter есть поддержка dart2? Я хочу объединить несколько элементов SVGE в одну большую сериализованную строку, а затем использовать вашу библиотеку для рендеринга SVG
abhijat_saxena
dart: svg используется с HTML и dart2js. Это совсем не так.
Дэн Филд,
25

Разработчики из сообщества Flutter создали библиотеку для обработки файлов SVG. Мы можем использовать это как

new SvgPicture.asset(
  'assets/images/candle.svg',
  height: 20.0,
  width: 20.0,
  allowDrawingOutsideViewBox: true,
),

Я нашел здесь небольшой пример реализации SVG .

Сунил
источник
5
Просто к сведению - это не официальный плагин. Тем не менее, он должен поддерживать множество распространенных вариантов использования.
Дэн Филд
21

На данный момент решение проблемы - использовать шрифты.

https://icomoon.io/

  fonts:
   - family: icomoon
     fonts:
       - asset: assets/fonts/icomoon.ttf

Использование

  static const IconData TabBarHome= const IconData(0xe906, fontFamily: 'icomoon');
  static const IconData TabBarExplore= const IconData(0xe902, fontFamily: 'icomoon');

Замените ### например (906)

Виктор Тонг
источник
9

Вы можете выполнить следующие шаги
- посетите http://fluttericon.com
- загрузите свои SVG-иконки
- нажмите кнопку загрузки
- вы получите два файла
1. iconname.dart
2. iconname.ttf файл шрифта
- используйте этот файл во флаттере и импортировать iconname.dart

Нандакишор Валакунде
источник
3

Вы можете использовать вспышку для создания анимации и просто импортировать .flr как актив

import 'package:flare_flutter/flare_actor.dart';
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new FlareActor("assets/Filip.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"idle");
  }
}

посетите flare_flutter https://pub.dev/packages/flare_flutter

PrimeChandi
источник
2

Вы можете использовать эту библиотеку для рендеринга изображений SVG - https://pub.dev/packages/flutter_svg

Пример -

Container(
    child: SvgPicture.asset("assets/images/yourImage.svg")
)
Робин
источник