Рендеринг SVG Flutter

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

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

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

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

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

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

Я работал над библиотекой для рендеринга 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

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

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

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

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

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)

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

Вы можете использовать вспышку для создания анимации и просто импортировать .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

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

Пример -

Container(
    child: SvgPicture.asset("assets/images/yourImage.svg")
)