Renderowanie Flutter SVG

89

Próbowałem dodać obraz ze źródłem SVG do mojej aplikacji flutter.

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

Ale nie otrzymałem żadnych wizualnych informacji zwrotnych. Jak mogę renderować obraz SVG we Flutter?

dart flutter Wysypka
źródło
4
spróbuj użyć prostego w użyciu flutter_svg 0.14.0 pakietu, który działa jak urok więcej informacji tutaj pub.dev/packages/flutter_svg , wszystko dzięki temu facetowi github.com/dnfield, który przeniósł logikę renderowania svg chrome do darta
maheshmnj

Odpowiedzi:

63

Flutter obecnie nie obsługuje formatu SVG. Śledź wydanie 1831, aby uzyskać aktualizacje.

Jeśli absolutnie potrzebujesz rysowania wektorowego, możesz zobaczyć widżet Flutter Logo jako przykład rysowania za pomocą Canvasinterfejsu API lub rasteryzować obraz po stronie natywnej i przekazać go Flutterowi jako bitmapę, ale na razie najlepszym rozwiązaniem jest prawdopodobnie osadzać rasteryzowane obrazy zasobów o wysokiej rozdzielczości.

Collin Jackson
źródło
Jeśli nie potrzebujesz koloru, zawsze możesz wybrać trasę czcionek tak, jak robi to pakiet ikon.
prodaea
cóż, w końcu musi po prostu wyrenderować obraz svg, który każda biblioteka svg mogłaby zrobić tak jak ten pub.dev/packages/flutter_svg
maheshmnj
numer jest otwarty od 13 lutego 2016 r. jak długo musimy czekać?
BloodLoss
70

Czcionki są świetną opcją w wielu przypadkach.

Pracowałem nad biblioteką do renderowania SVG na płótnie, dostępną tutaj: https://github.com/dnfield/flutter_svg

API w tej chwili wyglądałoby mniej więcej tak

new SvgPicture.asset('asset_name.svg')

do renderowania nazwa_zasobu.svg (dopasowana do jego rodzica, np. a SizedBox). Możesz również określić a colori blendModedla zabarwienia zasobu.

Jest teraz dostępny w pubie i działa z minimum Flutter w wersji 0.3.6. Obsługuje wiele przypadków, ale nie wszystko - zobacz repozytorium GitHub, aby uzyskać aktualizacje i zgłosić problemy.

Oryginalny problem z GitHubem, do którego odwołuje się Colin Jackson, tak naprawdę nie ma skupiać się głównie na SVG we Flutterze. W tym celu otworzyłem kolejny numer: https://github.com/flutter/flutter/issues/15501

Dan Field
źródło
Trochę poza tematem, ale czy to obsługuje iOS? O ile wiem, iOS obsługuje wektory w formacie PDF, więc jestem po prostu ciekawy, czy można tego użyć do renderowania wektorów również na iOS
MRainzo
3
Powinien działać na każdej platformie obsługiwanej przez Flutter. Wszystko jest napisane w Dart przy użyciu Canvasmetod.
Dan Field
1
dlaczego nie obsługuje najnowszej stabilnej flutter zamiast podglądu
minigeek
Cześć Dan, Czy możesz również dodać obsługę - dart: svg library - api.dart.dev/stable/2.9.2/dart-svg/dart-svg-library.html ? czy flutter obsługuje dart2? Chcę mieć wiele elementów SVGE połączonych w jeden duży serializowany ciąg, a następnie użyć Twojej biblioteki do renderowania
pliku
dart: svg jest używany z HTML i dart2js. Jest zupełnie inny niż to.
Dan Field
25

Programiści ze społeczności Flutter stworzyli bibliotekę do obsługi plików svg. Możemy go użyć jako

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

Znalazłem tutaj mały przykład implementacji SVG .

Sunil
źródło
5
Tylko do Twojej wiadomości - to nie jest oficjalna / własna wtyczka. To powiedziawszy, powinno obsługiwać wiele typowych przypadków użycia.
Dan Field
21

Obecnie rozwiązaniem jest używanie czcionek

https://icomoon.io/

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

Użytkowanie

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

Zastąp ###, np. (906)

Victor Tong
źródło
9

Możesz wykonać poniższe kroki
- odwiedź http://fluttericon.com
- prześlij swoje ikony SVG
- kliknij przycisk pobierania
- otrzymasz dwa pliki
1. iconname.dart
2. iconname.ttf plik czcionki
- użyj tego pliku w programie flutter & import iconname.dart

Nandakishor Valakunde
źródło
3

Możesz użyć flary do tworzenia animacji i po prostu zaimportować .flr jako zasób

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");
  }
}

odwiedź stronę flare_flutter https://pub.dev/packages/flare_flutter

primeChandi
źródło