0

Edite esta pregunta, estoy cargando imágenes SVG en flutter con la librería svg_path_parser, la idea es rellenar de color cada path de la imagen, hasta ahora solo he podido cambiar el color de todo el logo al tocarlo, pero lo que quiero saber es como puedo obtener el path que se selecciono para asi poder colorearlo con un color que se haya seleccionado desde alguna paleta de colores, hasta el momento tengo este código que cambia todo el logo de color al tocarlo.

class MyHomePage extends StatefulWidget {

  final paths = [
    ['m48.75 95.97-25.91-25.74 14.32-14.57 40.39 40.31z', Color(0xff02539a)],
    ['m22.52 70.25 25.68-25.68h28.87l-39.95 39.95z', Color(0xd745d1fd)],
    ['m.29 47.85 14.58 14.57 62.2-62.2h-29.02z', Color(0xff45d1fd)]
  ];
  @override
  _MyHomePageState createState() => _MyHomePageState();
}


class _MyHomePageState extends State<MyHomePage> {
  Color colorSelect = Colors.teal;
  bool showBorder = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Transform.scale(
        scale: 2.0,
        child: GestureDetector(
          child: Center(
            child: Container(
              width: 100,
              height: 100,
              child: Stack(
                children: widget.paths.map((e) {
                  return CustomPaint(
                      painter: MyPainter(
                          parseSvgPath(e[0] as String), colorSelect,
                          showPath: showBorder));
                }).toList(),
              ),
            ),
          ),
          behavior: HitTestBehavior.translucent,
          onTap: () {
            setState(() {
              // hide/show border
              showBorder = !showBorder;
              colorSelect = Colors.redAccent;
              //widget.paths[0][1] = Colors.black;

            });
          },
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  final Path path;
  final Color color;
  final bool showPath;
  MyPainter(this.path, this.color, {this.showPath = true});

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = color
      ..strokeWidth = 4.0;
    canvas.drawPath(path, paint);
    if (showPath) {
      var border = Paint()
        ..color = Colors.black
        ..strokeWidth = 1.0
        ..style = PaintingStyle.stroke;
      canvas.drawPath(path, border);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Espero me puedan ayudar con una idea o lo que sea para que pueda continuar este proyecto, asi a groso modo la idea de la app es que un niño seleccione una imagen en blanco y negro y el niño pueda seleccionar de una paleta "X" color e ir haciendo su imagen con los colores que el quiera.

Gracias!!

3
  • Hola, recuerda revisar Cómo preguntar, edita tu pregunta por favor, saludos.
    – Jorgesys
    Commented el 20 sept. 2022 a las 14:53
  • Dudo que se pueda hacer algo así. Si necesitas cambiar el color del svg, tendrás que entrar en el archivo e indicar manualmente los colores. Ya luego lo importar a Flutter.
    – Manuel
    Commented el 22 sept. 2022 a las 10:47
  • si se puede, solo que no se realmente como , igual a ver si checando el código que puse
    – AlexTrejo
    Commented el 22 sept. 2022 a las 16:50

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.