Para deixar o README mais detalhado e preciso, considerando o uso do querySelector e exemplos de animação aplicados, aqui estão os ajustes e exemplos adicionais:

SvgPicEditor #

SvgPicEditor é um widget Flutter que permite carregar e modificar arquivos SVG de várias fontes, como assets locais, strings SVG ou URLs. Ele permite modificar elementos específicos do SVG usando a classe ElementSvg, facilitando a alteração de propriedades como cor, opacidade, transformação, entre outros.

Tabela de Conteúdo #

• Instalação
• Uso
  • Importação
  • Exemplo Simples
  • Construtores
    • SvgPicEditor.asset
    • SvgPicEditor.network
    • SvgPicEditor.string
  • Propriedades
  • Exemplo de Modificação
• Conclusão

Instalação #

Para adicionar SvgPicEditor ao seu projeto Flutter, inclua o seguinte código em seu pubspec.yaml:

dependencies:
  svg_pic_editor: ^1.0.0

Ou use o comando:

flutter pub add svg_pic_editor

Uso #

Importação #

Para usar o SvgPicEditor, importe o pacote no arquivo Dart onde você deseja utilizá-lo:

import 'package:svg_pic_editor/svg_pic_editor.dart';

Exemplo Simples #

Aqui está um exemplo básico de como usar o SvgPicEditor dentro de um widget Flutter:

import 'package:flutter/material.dart';
import 'package:svg_pic_editor/svg_pic_editor.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('SvgPicEditor Exemplo')),
        body: Center(
          child: SvgPicEditor.asset(
            'assets/example.svg',
            modifications: [
              ElementSvg(
                querySelector: '#element1',
                fillColor: Colors.red,
              ),
            ],
            width: 200.0,
            height: 200.0,
            fit: BoxFit.contain,
          ),
        ),
      ),
    );
  }
}

Este exemplo carrega um arquivo SVG de um asset local e altera a cor de um elemento SVG com o ID element1 para vermelho.

Construtores #

SvgPicEditor possui três construtores principais para diferentes fontes SVG:

SvgPicEditor.asset

Carrega um SVG de um asset local:

SvgPicEditor.asset(
  'assets/your_file.svg',
  package: 'your_package',
  modifications: [/* Lista de ElementSvg */],
  width: 100.0,
  height: 100.0,
  fit: BoxFit.contain,
  querySelector: '#seuID',
  color: Colors.red,
);

SvgPicEditor.network

Carrega um SVG de uma URL:

SvgPicEditor.network(
  'https://example.com/your/svg.svg',
  modifications: [/* Lista de ElementSvg */],
  width: 100.0,
  height: 100.0,
  fit: BoxFit.contain,
  querySelector: '.suaClasse',
  color: Colors.red,
);

SvgPicEditor.string

Carrega um SVG de uma string SVG:

SvgPicEditor.string(
  '<svg>...</svg>',
  modifications: [/* Lista de ElementSvg */],
  width: 100.0,
  height: 100.0,
  fit: BoxFit.contain,
  querySelector: '[atributo="valor"]',
  color: Colors.red,
);

Propriedades do Widget SvgPicEditor #

Principais propriedades do SvgPicEditor:

• assetName (String?): Nome do asset contendo o SVG.
• svgString (String?): String representando o conteúdo do SVG.
• svgUrl (String?): URL do SVG a ser carregado.
• package (String?): Nome do pacote contendo o asset.
• modifications (List<ElementSvg>?): Lista de modificações a serem aplicadas ao SVG.
• width (double?): Largura do widget.
• height (double?): Altura do widget.
• fit (BoxFit): Como o SVG deve se ajustar ao espaço disponível.
• querySelector (String?): Um seletor de consulta para escolher elementos específicos.
• color (Color?): Cor a ser aplicada ao SVG.

Exemplo de Modificação #

A classe ElementSvg permite realizar modificações específicas nos elementos SVG, como cor, opacidade e transformação.

class ElementSvg {
  final String? id;
  final Color? fillColor;
  final Color? strokeColor;
  final double? strokeWidth;
  final double? opacity;
  final String? transform;
  final String? querySelector;
  final String? cssInjector;

  ElementSvg({
    this.id,
    this.fillColor,
    this.strokeColor,
    this.strokeWidth,
    this.opacity,
    this.transform,
    this.querySelector,
    this.cssInjector,
  });
}

Exemplos de Modificação Usando querySelector #

Selecionando Elementos Específicos com querySelector

SvgPicEditor.asset(
  'assets/example.svg',
  modifications: [
    ElementSvg(
      querySelector: '#element1',
      fillColor: Colors.red,
    ),
    ElementSvg(
      querySelector: '.class1',
      strokeColor: Colors.blue,
      strokeWidth: 3.0,
    ),
  ],
  width: 200.0,
  height: 200.0,
  fit: BoxFit.contain,
);

Modificando Elementos com Atributos Específicos Usando querySelector

SvgPicEditor.network(
  'https://example.com/your/svg.svg',
  modifications: [
    ElementSvg(
      querySelector: '[data-type="especial"]',
      fillColor: Colors.green,
    ),
    ElementSvg(
      querySelector: '[stroke="black"]',
      strokeColor: Colors.yellow,
    ),
  ],
  width: 300.0,
  height: 300.0,
  fit: BoxFit.cover,
);

Exemplo de Animações com SvgPicEditor #

Abaixo está um exemplo de como usar as animações customizadas para o SvgPicEditor:

SvgPicEditor.asset(
  'assets/example.svg',
  modifications: [
    ElementSvg(
      querySelector: 'rect#retangulo',
      fillColor: Colors.orange,
    ),
  ],
).shake(
  vsync: this,
  duration: Duration(milliseconds: 500),
  offset: 10.0,
  isInfinite: true,
);

Neste exemplo, o elemento selecionado é animado com o efeito de shake, o que adiciona um movimento de oscilação horizontal.