Флаттер SVG рендеринг
Я попытался добавить изображение с исходным SVG-кодом в мое приложение.
new AssetImage("assets/images/candle.svg"))
Но я не получил никакой визуальной обратной связи. Как я могу сделать изображение SVG во флаттере?
15 ответов
Flutter в настоящее время не поддерживает SVG. Следите за выпуском 1831 за обновлениями.
Если вам абсолютно необходимо векторное рисование, вы можете увидеть виджет Flutter Logo в качестве примера того, как рисовать с помощью Canvas API, или растеризуйте свое изображение на нативной стороне и передайте его в Flutter в качестве растрового изображения, но на данный момент лучше всего вставлять растеризованные изображения активов с высоким разрешением.
Шрифты - отличный вариант для многих случаев.
Я работал над библиотекой для визуализации SVG на холсте, доступной здесь: https://github.com/dnfield/flutter_svg
API на данный момент будет выглядеть примерно так
new SvgPicture.asset('asset_name.svg')
отобразить asset_name.svg (по размеру к его родителю, например SizedBox). Вы также можете указать color а также blendMode для тонирования актива..
Теперь он доступен в пабе и работает с минимальной версией Flutter 0.3.6. Он обрабатывает множество случаев, но не все - см. Репозиторий GitHub для получения обновлений и проблем с файлами.
Оригинальная проблема GitHub, на которую ссылается Колин Джексон, на самом деле не предназначена для того, чтобы в первую очередь фокусироваться на SVG во Флаттере. Я открыл еще одну проблему для этого: https://github.com/flutter/flutter/issues/15501
Flutter сделал новую библиотеку flutter_svg: ^0.5.0` для обработки файлов SVG. Мы можем использовать его как
new SvgPicture.asset(
'assets/images/candle.svg',
height: 20.0,
width: 20.0,
allowDrawingOutsideViewBox: true,
),
Обходной путь пока что использует шрифты
fonts:
- family: icomoon
fonts:
- asset: assets/fonts/icomoon.ttf
Useage
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
Шаг 1. добавьте зависимость в свой pubspec.yaml
dependencies:
flutter_svg: any
Преимущество любой версии в том, что ее можно использовать в любой версии SDK.
Шаг 2. импортируйте пакет fluttersvg в свое приложение
import 'package:flutter_svg/flutter_svg.dart';
шаг 3. просто используйте, как показано ниже
SvgPicture.asset(
'assets/images/bm-icon1.svg',
width: 18.0,
height: 18.0,
),
Вы можете использовать эту библиотеку для рендеринга изображений SVG - https://pub.dev/packages/flutter_svg
Пример -
Container(
child: SvgPicture.asset("assets/images/yourImage.svg")
)
Возможный интерес: есть более новая библиотека SVG Flutter под названием jovial_svg. Я написал его для обработки более надежного подмножества SVG, чем то, что мне удалось найти на pub.dev в то время. Пока я этим занимался, я также создал двоичный формат, в который можно компилировать ресурсы SVG. Он немного компактнее и примерно в 10 раз быстрее читается, поэтому это хороший выбор для ресурсов, которые вы упаковываете с приложением.
Библиотека находится по адресу https://pub.dev/packages/jovial_svg.
Я решил аналогичную проблему, преобразовав изображения svg в ttf на fluttericon.com.
Это необходимые шаги.
Храните все ваши файлы svg в папке. Загрузите их все на fluttericon с помощью загрузчика. Вы можете выбрать их все и перетащить в нужное место. Дайте своим значкам имя класса дротика вверху: например, Svgicons.
Выберите все свои значки и нажмите «Загрузить».
Он загрузит zip-файл с файлом dart и папкой шрифтов, которая содержит Svgicons.ttf.
скопируйте папку fonts в папку проекта и укажите ее как актив в pubspec.yaml.
fonts:
- family: Svgicons
fonts:
- asset: fonts/Svgicons.ttf
импортируйте svgicons_icons.dart, где вы собираетесь использовать изображения. Образец:
import '../svgicons_icons.dart';
import 'social_media.dart';
class SocialMediaRepository {
List<SocialMedia> getSocialMedia = [
SocialMedia(id: 1, title: "Facebook", iconAsset:Svgicons.facebook, isFavorite: false),
SocialMedia(id: 2, title: "Instagram", iconAsset: Svgicons.instagram, isFavorite: false),
SocialMedia(id: 3, title: "LinkedIn", iconAsset: Svgicons.linkedin, isFavorite: false),
....
Здесь iconAsset имеет тип IconData, который изначально был строкой, относящейся к изображению svg.
Отобразите ttf с помощью
...
Icon(item.iconAsset),
SizedBox(width: 10),
Text(item.title),
],
),
где элемент — это объект, содержащий IconData. Теперь вы можете удалить ссылку на изображения svg из проекта.
поддержка флаттера специального типа svg
если есть тег стиля, тогда не загружать изображение svg во флаттер флаттер поддерживает встроенный стиль в svg
Вы можете использовать вспышку для создания анимации и просто импортировать.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
Шаг 1:
flutter_svg: ^0.12.4
Шаг 2:
import 'package:flutter_svg/flutter_svg.dart';
Шаг 3:
SizedBox.fromSize(
child: SvgPicture.asset(
'assets/empty.svg',
),
size: Size(300.0, 400.0),
),
pubspeck.yaml
dependencies:
flutter_svg: ^0.12.4
Код: стек и позиционируется, чтобы установить абсолютную позицию SVG
Stack(
children: <Widget>[
Positioned(
right: 0,
child: IconButton(
icon: SvgPicture.asset('assets/profileView/iconAjustes.svg',
height: 30,
width: 30,
color: Colors.white,
semanticsLabel: 'Ajustes Logo'
),
onPressed: _onPrefsButtonPressed,
)
),
],
)
SVG во флаттере https://pub.dev/packages/flutter_svg
добавить пакет в pubspec.yaml
зависимости: flutter_svg: любой
активы:
-активы/изображения/вставить svg.
SvgPicture.asset('assets/images/password-icon.svg', ширина: 24, высота: 29,2),
Привет , вы можете использовать плагин "flutter_svg": https://pub.dartlang.org/packages/flutter_svg
Просто и легко, а вы можете изменить цвет SVG.
final String assetName = 'assets/up_arrow.svg';
final Widget svgIcon = new SvgPicture.asset(
assetName,
color: Colors.red,
semanticsLabel: 'A red up arrow'
);