Renderização SVG oscilante

92

Tentei adicionar uma imagem com uma fonte SVG ao meu aplicativo de flutter.

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

Mas não recebi nenhum feedback visual. Como posso renderizar uma imagem SVG no Flutter?

dart flutter

— Arash
fonte

4

tente usar o flutter_svg 0.14.0 pacote simples de usar funciona como charme mais informações aqui pub.dev/packages/flutter_svg , tudo graças a esse cara github.com/dnfield que portou a lógica de renderização svg do cromo para o dardo

— maheshmnj

65

Flutter atualmente não oferece suporte a SVG. Siga a edição 1831 para atualizações.

Se você realmente precisa de desenho vetorial, pode ver o widget Flutter Logo como um exemplo de como desenhar usando a CanvasAPI ou rasterizar sua imagem no lado nativo e passá-la para o Flutter como um bitmap, mas por agora sua melhor aposta é provavelmente incorporar imagens de ativos rasterizados de alta resolução.

— Collin Jackson
fonte

Além disso, se você não precisa de cores, pode sempre seguir a rota da fonte da mesma forma que o pacote Icons faz.

— prodaea 01 de

afinal, ele precisa simplesmente renderizar uma imagem SVG que qualquer biblioteca SVG poderia fazer como esta pub.dev/packages/flutter_svg

— maheshmnj

o problema está aberto desde 13 de fevereiro de 2016. quanto tempo precisamos esperar?

— BloodLoss de

@BloodLoss olha a resposta de Dan Field. flutter_svgPacote do usuário

— kovalyovi

75

As fontes são uma ótima opção para muitos casos.

Estou trabalhando em uma biblioteca para renderizar SVGs em uma tela, disponível aqui: https://github.com/dnfield/flutter_svg

A API a partir de agora seria algo como

new SvgPicture.asset('asset_name.svg')

para renderizar asset_name.svg (dimensionado para seu pai, por exemplo, a SizedBox). Você também pode especificar um colore blendModepara tingir o ativo.

Agora está disponível no pub e funciona no mínimo com a versão 0.3.6 do Flutter. Ele lida com vários casos, mas não tudo - consulte o repositório do GitHub para atualizações e problemas de arquivo.

O problema original do GitHub referenciado por Colin Jackson realmente não foi feito para se concentrar principalmente em SVG no Flutter. Abri outra edição aqui para isso: https://github.com/flutter/flutter/issues/15501

— Dan Field
fonte

Um pouco fora do assunto, mas isso tem suporte para iOS? Pelo que eu sei, o iOS suporta vetores em formato PDF, então estou curioso se isso pode ser usado para renderizar vetores no iOS também

— MRainzo

3

Ele deve funcionar em qualquer plataforma que suporte Flutter. Está tudo escrito em Dart usando Canvasmétodos.

— Dan Field

1

por que ele não suporta flutter estável mais recente em vez de visualização

— minigeek

Olá Dan, Você também pode adicionar suporte para - dart: svg library - api.dart.dev/stable/2.9.2/dart-svg/dart-svg-library.html ? o flutter tem suporte para dart2? Quero ter vários SVGElements combinados em uma grande string serializada e, em seguida, usar sua biblioteca para renderizar o SVG

— abhijat_saxena

dart: svg é usado com HTML e dart2js. É muito diferente disso.

— Dan Field

25

Os desenvolvedores da comunidade Flutter criaram uma biblioteca para lidar com arquivos svg. Podemos usá-lo como

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

Encontrei um pequeno exemplo de implementação SVG aqui .

— Sunil
fonte

5

Apenas para sua informação - este não é um plugin oficial / original. Dito isso, ele deve oferecer suporte a muitos casos de uso comuns.

— Dan Field

21

A solução agora é usar fontes

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');

Substitua o ### por exemplo (906)

— Victor Tong
fonte

Como posso usar isso? Digamos que eu tenha um arquivo svg em asset / svg / mysvg.svg Não consigo substituir o hexadecimal pelo caminho. O primeiro argumento é um int.

— FrontMobe

9

Você pode seguir os passos abaixo
- visite http://fluttericon.com
- carregue seus ícones SVG
- clique no botão de download
- você obterá dois arquivos
1. iconname.dart
2. arquivo de fonte iconname.ttf
- use este arquivo em flutter & import iconname.dart

— Nandakishor Valakunde
fonte

3

Você pode usar o flare para criar animações e apenas importar .flr como um ativo

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

visite flare_flutter https://pub.dev/packages/flare_flutter

— primeChandi
fonte

2

Você pode usar esta biblioteca para renderizar imagens SVG - https://pub.dev/packages/flutter_svg

Exemplo -

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

— Robin
fonte