Флеттер SVG-рендерінг

Я спробував додати зображення з джерелом SVG до мого додатку, що флаттер.

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

Але візуального зворотного зв’язку я не отримав. Як я можу зробити зображення SVG у Flutter?

На даний момент Flutter не підтримує SVG. Слідкуйте за номером 1831, щоб отримати оновлення.

Якщо вам абсолютно потрібне векторне малювання, ви можете побачити віджет Логотипу Flutter як приклад того, як малювати за допомогою CanvasAPI, або растеризувати своє зображення на рідній стороні та передати його Flutter як растрове зображення, але наразі найкращим варіантом є, мабуть, вбудовувати растрові зображення активів із високою роздільною здатністю.

Шрифти - чудовий варіант для багатьох випадків.

Я працював над бібліотекою для відтворення SVG на полотні, доступне тут: https://github.com/dnfield/flutter_svg

Зараз API виглядатиме приблизно так

new SvgPicture.asset('asset_name.svg')

візуалізувати ім'я_активу.svg (розмір його батьківського, наприклад, а SizedBox). Ви також можете вказати colorі blendModeдля тонування об’єкта.

Тепер він доступний у пабі та працює з мінімальною версією Flutter 0.3.6. Він обробляє купу випадків, але не все - див. Репозитарій GitHub, щоб отримати оновлення та виправити проблеми.

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

Розробники із спільноти Flutter створили lib для обробки 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

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
- використовуйте цей файл у flutter & імпорт iconname.dart

Ви можете використовувати flare для створення анімації та просто імпортувати .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")
)