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

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

2

Możesz użyć tej biblioteki do renderowania obrazów SVG - https://pub.dev/packages/flutter_svg

Przykład -

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

— Rudzik
źródło