The tool is great!, but it doesn’t seem to account for the height of the canvas, which leads to the correct shape, but smaller than it should be.

 1class MyPainter extends CustomPainter {
 2    @override
 3    void paint(Canvas canvas, Size size) {
 4      Paint paint = Paint();
 5      Path path = Path();
 6  
 7
 8      // Path number 1
 9  
10
11      paint.color = Color(0xff33455B);
12      path = Path();
13      path.lineTo(size.width * 0.41, -0.62);
14      path.cubicTo(size.width * 0.61, -0.61, size.width * 0.59, -0.4, size.width * 0.69, -0.29);
15      path.cubicTo(size.width * 0.74, -0.23, size.width * 0.83, -0.18, size.width * 0.85, -0.11);
16      path.cubicTo(size.width * 0.86, -0.03, size.width * 0.81, size.height * 0.04, size.width * 0.75, size.height * 0.11);
17      path.cubicTo(size.width * 0.66, size.height / 5, size.width * 0.59, size.height * 0.35, size.width * 0.41, size.height * 0.37);
18      path.cubicTo(size.width * 0.22, size.height * 0.4, 0, size.height * 0.35, -0.11, size.height * 0.24);
19      path.cubicTo(-0.21, size.height * 0.14, -0.11, size.height * 0.01, -0.06, -0.11);
20      path.cubicTo(-0.03, -0.19, size.width * 0.04, -0.24, size.width * 0.1, -0.31);
21      path.cubicTo(size.width / 5, -0.42, size.width * 0.22, -0.63, size.width * 0.41, -0.62);
22      path.cubicTo(size.width * 0.41, -0.62, size.width * 0.41, -0.62, size.width * 0.41, -0.62);
23      canvas.drawPath(path, paint);
24    }
25    @override
26    bool shouldRepaint(CustomPainter oldDelegate) {
27      return true;
28    }
29  }

Doesn’t work for all SVGS. For instance: this simple calendar icon renders completely wrong when converted to Flutter:

svg xmlns=“http://www.w3.org/2000/svg" viewBox=“0 0 512 512” path d=“M446 40h-46V16c0-8.836-7.163-16-16-16s-16 7.164-16 16v24H144V16c0-8.836-7.163-16-16-16s-16 7.164-16 16v24H66C29.607 40 0 69.607 0 106v340c0 36.393 29.607 66 66 66h380c36.393 0 66-29.607 66-66V106c0-36.393-29.607-66-66-66zm34 406c0 18.778-15.222 34-34 34H66c-18.778 0-34-15.222-34-34V181a5 5 0 015-5h438a5 5 0 015 5z” /svg

(removed HTML tags)

Hello Marc,

This looks awesome, though I have issues with it, my black piano button when converted looks fully gray, lost all 3d defects, here is the svg code:

    image/svg+xml

and here how I implemented it in Flutter:

import ‘package:flutter/material.dart’;

class Test extends StatelessWidget { @override Widget build(BuildContext context) { return Stack( children: [ Align( alignment: Alignment.topLeft, child: CustomPaint( painter: HeaderPainter(), child: SizedBox( width: MediaQuery.of(context).size.width, height: 300))), Align( alignment: Alignment.bottomLeft, child: CustomPaint( painter: FooterPainter(), child: SizedBox( width: MediaQuery.of(context).size.width, height: 300))), ], ); } }

class HeaderPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { Paint paint = Paint(); Path path = Path();

// Path number 1

paint.color = Color(0xFFFF5252);
path = Path();
path.lineTo(0, size.height);
path.cubicTo(size.width * 0.09, size.height * 0.93, size.width * 0.11,
    size.height * 0.78, size.width * 0.11, size.height * 0.66);
path.cubicTo(size.width * 0.11, size.height * 0.49, size.width * 0.16,
    size.height * 0.37, size.width / 4, size.height * 0.28);
path.cubicTo(size.width * 0.36, size.height * 0.23, size.width * 0.54,
    size.height * 0.18, size.width * 0.68, size.height * 0.16);
path.cubicTo(size.width * 0.81, size.height * 0.13, size.width * 0.89,
    size.height * 0.07, size.width * 0.98, 0);
path.cubicTo(
    size.width * 0.94, 0, size.width * 0.86, 0, size.width * 0.84, 0);
path.cubicTo(size.width * 0.56, 0, size.width * 0.28, 0, 0, 0);
path.cubicTo(0, 0, 0, size.height, 0, size.height);
canvas.drawPath(path, paint);

}

@override bool shouldRepaint(CustomPainter oldDelegate) { return true; } }

class FooterPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { Paint paint = Paint(); Path path = Path();

paint.color = Color(0xFFFFAB40).withOpacity(1);
path = Path();
path.lineTo(size.width, size.height / 5);
path.cubicTo(size.width, size.height / 5, size.width * 0.94,
    size.height * 0.88, size.width * 0.65, size.height * 0.93);
path.cubicTo(size.width * 0.36, size.height * 0.97, size.width / 5,
    size.height, size.width / 5, size.height);
path.cubicTo(size.width / 5, size.height, size.width, size.height,
    size.width, size.height);
path.cubicTo(size.width, size.height, size.width, size.height / 5,
    size.width, size.height / 5);
canvas.drawPath(path, paint);

}

@override bool shouldRepaint(CustomPainter oldDelegate) { return true; } }

Further more, white piano key that should be easier as it doesn’t have any 3d effects, doesn’t work at all…

Here is the code:

    image/svg+xml

https://imgur.com/a/wKPrlzR On the image you can see keys on right are ones I imported as svg in flutter and one on right is what I get when using your converter

Hope you could help me out figure what is wrong and if it is possible at all to have 3d effects using your tool, I guess maybe your converter works just with one layer? and in order to get 3d effect, your converter should be able to convert svg into multiple layers?

Something like this guy is doing when writing by hand 3d looking buttons? https://www.youtube.com/watch?v=2iMswlPVHFY

Happy holidays

It’s not works. The SVG file is there:

https://pastebin.com/L1arSQ2x

Hi, i don’t understand what i do wrong in svg, could you tell me plz?

Regards

    image/svg+xml

Hi !

Love your work i’d like to support but it seems like it’s not working for even some simple svgs ?

I tried to convert

But it does not seem like it’s working

Hi there, still playing around a bit … why not make the colors const likepaint.color = const Color(0xffffffff); and also giving the class a const constructor?

you also wanted to make this open source¿? what happened to those plans? I’m thinking of integrating this into my buildrunner 🙃

Hi there, Thank you for this great tool! The following snippet however does not generate the correct Dart code it seems.

https://pastebin.com/VWGXHtui

Perhaps some SVG issue?

Thanks for this amazing tool. For me it threw an error in the browser console when I defined the fill tag on a path. It would be nice if that got fixed.

After figuring that out I was able to use the tool normally.

Useful, but I needed to hack it a little.

Great tool, but… What if I want to preserve the position and proportion of my path?

I figured out how to do it with your tool, but I think it’s dumb luck that it worked as I intended.

Let’s say this is the desired outcome: https://i.ibb.co/vVyR1x7/2022-02-11-17-52-00.jpg

1.) I create a CustomPaint widget inside a Container of width:300,height:300,color: Colors.amberAccent, 2.) I create an inkscape drawing with dimensions larger than what I need 3.) I drag guide lines to the 300/300 marks 4.) I draw the path that I need

We are now at this point in inkscape: https://i.ibb.co/Wc1Wy2B/2022-02-11-17-59-22.jpg

If I save that and use your converter I don’t get what I need. But if I..

5.) Add an extra line from top left to bottom right of the 300x300 space I want to reference: https://i.ibb.co/DgW6TP6/2022-02-11-18-02-29.jpg

Now your converter will respect to relative position and relative size of my path: https://i.ibb.co/r5jFLtg/2022-02-11-18-10-06.jpg

All I have to do is change the first part of the generated flutter-path from lineTo to moveTo

As I said: Now it works for me! But maybe you would like to add something to support “relative proportions”/“relative position”

Hi Marc,

Please check your convert.js script. I noticed shapesToFlutterCodeConverter() doesn’t give all mandatory params: width, height, and config. So… the converter at a website not working correctly but locally, after applying these changes everything is fine.