Implementando SVG no Flutter com flutter_svg

Gráficos vetoriais escaláveis ​​(SVG) é um dos formatos de imagem de arquivo mais amplamente usados ​​em aplicativos. Como ele oferece várias vantagens sobre os arquivos de bitmap, especialmente quando se trata de reter a qualidade da imagem durante o dimensionamento, é difícil começar a construir um Aplicativo Flutter sem primeiro considerar o uso de SVG.

Neste artigo, você aprenderá como e quando usar arquivos SVG em um aplicativo Flutter.

Usando SVG no Flutter

Skia , uma biblioteca de gráficos 2D e componente principal do Flutter, só pode serializar imagens em Arquivos SVG. Assim, decodificar ou renderizar imagens SVG com Skia é não é possivel. Felizmente, a comunidade vem ao resgate com um fantástico pacote nativo do Dart chamado flutter_svg que renderiza e decodifica SVG rapidamente.

O que é flutter_svg?

O pacote flutter_svg implementou um cache de imagem que armazena uma classe ui: Picture. Este é o wrapper SkPicture do mecanismo gráfico Skia, que registra comandos de renderização SVG específicos em modo binário.

A classe ui.Picture não consome muita memória e é armazenada em cache para evitar a análise repetida de arquivos XML. Vamos dar uma olhada no construtor SvgPicture.asset:

SvgPicture.asset (String assetName, {Key? Key, this.matchTextDirection=false, AssetBundle? Bundle, String? Package, this.width, this.height, this.fit=BoxFit.contain, this.alignment=Alignment.center, this.allowDrawingOutsideViewBox=false, this.placeholderBuilder, Color? color, BlendMode colorBlendMode=BlendMode.srcIn, this.semanticsLabel, this.excludeFromSemantics=false, this. Clip.hardEdge, this.cacheColorFilter=false,}): pictureProvider=ExactAssetPicture (allowDrawingOutsideViewBox==true? SvgStringDecoderOutsideViewBox: svgStringDecoder, assetName, bundle: bundle, pacote: package, colorFilter: svgStringDecoderOutsideViewBox: svgStringDecoder, assetName, bundle: bundle, package: package, colorFilter: svgStringDecoderOutsideViewBox: svgStringDecoder, assetName, bundle: bundle, pacote: package, colorFilter: svgStringDecoderOutsideViewBox: svgStringDecoder, assetName, bundle: bundle, package: package, colorFilter: svgStringDecoderOutside? ): null,), colorFilter=_getColorFilter (color, colorBlendMode), super (chave: chave);

Ao observar a implementação, você notará que as notificações de fluxo de pictureProvider atualizam a imagem de SvgPicture.

void _resolveImage () {final PictureStream newStream=widget.pictureProvider.resolve (createLocalPictureConfiguration (contexto)); assert (newStream!=null);//ignorar: needed_null_comparison _updateSourceStream (newStream); }

Neste bloco de código, o fluxo de pictureProvider é preenchido com ui.Picture por um completer do cache de imagem.

PictureStream resolve (PictureConfiguration picture, {PictureErrorListener? onError}) {//ignore: needed_null_comparison afirmar (imagem!=nulo); stream final de PictureStream=PictureStream (); T? obtidoKey; getKey (picture).then ((T key) {neededKey=key; stream.setCompleter (cache.putIfAbsent (key !, ()=> load (key, onError: onError),),);},).catchError ((exceção de objeto, pilha StackTrace) async {if (onError!=null) {onError (exceção, pilha); retorno;} FlutterError.reportError (FlutterErrorDetails (exceção: exceção, pilha: pilha, biblioteca:’SVG’, contexto: ErrorDescription (‘ao resolver uma imagem’), silencioso: verdadeiro,//pode ser um erro de rede ou outras informaçõesColetor: () sync * {yield DiagnosticsProperty (‘Picture provider’, this); yield DiagnosticsProperty (‘Chave da imagem’, obtidaKey, defaultValue: null);}));}); fluxo de retorno; }

Adicionando o plugin flutter_svg

Para adicionar este pacote às dependências do Flutter, você pode executar:

flutter pub add flutter_svg

Alternativamente, você pode adicionar flutter_svg ao seu pubspec.yaml arquivo:

dependencies: flutter_svg: ^ 0.22.0

Certifique-se de executar flutter pub get em seu terminal ou usando seu editor. Quando a instalação estiver concluída, importe o pacote em seu código Dart onde deseja usar este pacote:

import’package: flutter_svg/flutter_svg.dart’;

Usando flutter_svg em seu aplicativo Flutter

Existem várias maneiras de usar este pacote, mas cobriremos os casos de uso mais comuns.

Uma opção é carregar um SVG de um arquivo SVG interno, que normalmente é armazenado na pasta de ativos:

//exemplo final String assetName=’assets/image.svg’; Widget final svg=SvgPicture.asset (assetName,);

Você também pode carregar um arquivo SVG de um URL, como:

//example final Widget networkSvg=SvgPicture.network (‘https://site-that-takes-a-while.com/image.svg’,);

Finalmente, você pode carregar um SVG a partir de um código SVG:

//example SvgPicture.string (”’”’) ;

Estendendo as funcionalidades SVG no Flutter

Depois de carregar o arquivo SVG, a primeira etapa é alterar a cor ou matiz da imagem:

//exemplo final String assetName=’assets/up_arrow.svg’; Widget final svgIcon=SvgPicture.asset (assetName, color: Colors.red,);

Usar um rótulo semântico ajuda a descrever a finalidade da imagem e melhora a acessibilidade. Para fazer isso, você pode adicionar o parâmetro semanticsLabel. O rótulo semântico não será mostrado na IU.

//exemplo final String assetName=’assets/up_arrow.svg’; Widget final svgIcon=SvgPicture.asset (assetName, color: Colors.red, semanticsLabel:’Uma seta vermelha para cima’);

O pacote flutter_svg renderiza uma caixa vazia, LimitedBox, como o espaço reservado padrão se não houver atribuições de altura ou largura em SvgPicture. No entanto, se uma altura ou largura for especificada no SvgPicture, um SizedBox será renderizado para garantir uma melhor experiência de layout.

O marcador pode ser substituído, no entanto, o que é ótimo para melhorar a experiência do usuário, especialmente ao carregar ativos por meio de uma solicitação de rede onde pode haver um atraso.

//exemplo final Widget networkSvg=SvgPicture.network (‘https://site-that-takes-a-while.com/image.svg’, semanticsLabel:’Um tubarão ?!’, placeholderBuilder: (BuildContext context)=> Container (preenchimento: const EdgeInsets.all (30.0), filho: const CircularProgressIndicator ()),);

Neste exemplo, escolhi CircularProgressIndicator para exibir um indicador de progresso enquanto a imagem está carregando. Você pode adicionar qualquer outro widget que desejar. Por exemplo, você pode usar um widget de carregamento personalizado para substituir CircularProgressIndicator.

Verificando a compatibilidade de SVG com flutter_svg

Você deve saber que a biblioteca flutter_svg não oferece suporte a todos os recursos SVG. O pacote, entretanto, fornece um método auxiliar para garantir que você não renderize uma imagem quebrada devido à falta de recursos suportados.

//example final SvgParser parser=SvgParser (); tente {parser.parse (svgString, warningsAsErrors: true); imprimir (‘SVG é suportado’); } catch (e) {print (‘SVG contém recursos não suportados’); }

Observe que a biblioteca atualmente detecta apenas elementos não suportados como a tag