Flutter SVG to Custom Paint Converter | Flutter Shape Maker | Flutter UI Design Tutorial
HTML-код
- Опубликовано: 8 сен 2024
- #flutter #custompaint #shapemaker
In this Flutter UI Design Tutorial, I am Introducing a new Flutter SVG Converter Tool to convert SVGs to Custom Paint Code in a matter of seconds. Custom Paint code can be dynamically altered from within the Flutter apps and hence can be considered an improvement over using SVGs. Plus the support for SVGs is not quite there yet!
🔥 SVG Converter Tool: fluttershapema...
Note: There are many SVG Standards today. If for some reason your SVG doesn't give a proper result please use the form on the website to report/submit that SVG! I am working on improving this tool regularly!
This has taken a lot of work and your support for Flutter Shape Maker has motivated me to come up with this Tool! Thank you for all your love and support! 💙
🔥 Auto-Generate Flutter Custom Paint Code TRY THIS FREE TOOL👇:
👉 Flutter Shape Maker: fluttershapema...
🔥 Learn About the MOST IMPORTANT WIDGETS in Flutter 👇:
👉 Widget Essentials Series: bit.ly/3GpfiYw
👉🏻 Product Hunt: www.producthun...
(Your UPVOTE Means a lot! 🙌)
If you find this video useful consider Supporting @RetroPortal Studio :
👉 Buy Me a Coffee: www.buymeacoff...
👉 Patreon: / retroportalstudio
Social Links @RetroPortal Studio :
👉 Twitter: / theretroportal
👉 Medium: / retroportalstudio
👉 Instagram: / retroportalstudio
👉 GitHub: github.com/ret...
If you like the tutorial, please hit the LIKE and Subscribe button and also consider supporting me on Patreon or Buy Me a Coffee for More Flutter Tutorial on RetroPortal Studio.
Thank you for Watching! Happy Coding :)
If you find this video useful, consider Following me on:
Twitter: twitter.com/theretroportal
Instagram: instagram.com/retroportalstudio
LinkedIn: www.linkedin.com/in/parasjainrps
Git: github.com/retroportalstudio
Happy Coding! ✌️😁
I'm a big fan of FSM, with SVG support Paras you just made it even more amazing. Thanks
Used today. Very good tool. Another advantage: you don't need any further 3rd party dependencies for your SVG
Another extraordinary work, you don't stop to amaze me ! Well done brother, well done.
Thank you so much for this amazing tool.
you saved so much of my time. Thanks Again !!!
All of your tools are amazing.
I am truly inspiried and motivated from your efforts
This is a game changer 💙.
Thank you🙏
Great work❤
Thanks Brother🙏🏼🙏🏼🙏🏼🙏🏼
Your tool is just AMAZING bro, thank you so much for it
damn.... that's amazing!! Thank you for this tool !!
Woooow - hats off great tool - I gona use this in my next project was planung earth map as a background- this solution will help me byild color manipulation - thank you budy 😉
Wonderful. Thanks for this video.👏
thank you very much bro. your video so helpfull for me. thanks a lot
Wow, can't wait to try it
👏👏👏Yrr Paras.... Loved this FSM
Wow, nice tools, well done
You are Amazing. Wonderful
Just amazing 👍🏻
So curious for this!
Wooow! Super cool! It would be great if we also could do a batch conversion and if we could edit the custom painter in the other tool (the one that generates it) automatically
A Great idea! Will work on it soon 😁
simply amazing
Thank you, this is useful and amazing. Please regularly update your LinkedIn profile, many of us active on that platform
Thank you, I will👨💻
so great!!!
what is the difference between using SVG directly in your app rather than convert it to dart code with custom paint ??
Dynamic Code manipulation, Rendering on Flutter Web. you'll know when you need it! I use it translate Figma Designs to Custom Paint!😁
@@RetroPortalStudio no doubt it is very useful but i mean by using custom paint is there any space or performance advantage over SVG
@@alifarhadali5580
- at least i think you don't need to preload it and parse runtime, which is by the way still done of main thread on the app in flutter (there's a PR that fixes that but it's not merged yet). complex paths will still jank i guess, because of skia shader compilation
- this code can be optimized by the compiler, which is impossible with svg which always ends up being bundled in production full size. yes, svg maybe gzipped, but still, custom paint version has this additional optimization stage from compiler
- flutter_svg has some limitations, it doesn't support fully the svg standard which this tool (i guess) does
@@nt4f04und thanks appreciated
Dude u can outrun google's flutter improvement team single-handedly 👍👍
Also incorporate this to flutter shape maker windows app and release an update!
They are just so, so much better than me! 😅 Thanks for the compliment man! Will be adding this to the FSM tool soon 😁
Amazing
Wow!!!
That's swell friend! Did you do performance comparisons of FSM vs SVG? Super curious about the impact (might be obvious the result would be one way or another, my knowledge is limited!)
There are instances where Converter performs much better (Since Converter gives a responsive version of code, an svg with dimentions of 10000 x 10000 would take a lot of load but with responsive custom paint code you can simply render 500x500 if you want.
But for regular sized SVGs performance averages out to be equal. Bigger benifit is, it helps you use SVGs on Flutter Web and Most importantly Dynamically change the code on runtime. It is one of those things..you'll know when you need it 😁
Bug: The supposed to be TRANSPARENT background is turning BLACK.
Thank you! This has been noted and will be potentially fixed in future update releasing soon 👨💻
how to make custom painted shapes gesture detectable for example i want to maake a button that has a weird shape how can i add ontap?
how to change the shape size sir? like first image eye i want to increase.
nce work. but with advanced svg files like shadows gradients result incorrect.
Work in Progress! Will be updated soon :)
This is super cool. In my use case, I have so many SVGs required in different screens in my app. Is there a way to create a .json output for each svg from this tool. Then I can load specific SVG.json from backend into one dynamic CustomPainter dart file in my project and is capable of reading the .json and render the svg.
Hello friend again you are making an awesome video I want to ask you question can svg tool accept svg file from vector software like photo shop or inkspace ? Again you are a gift from the sky keep the good work bro
Thanks man! And i insist you to try SVGs and if they do not work or give an unexpected result for some reason. Feel free to submit them via the report form😁 consistantly updating tool for more support
Thank you so much !
i'm new in flutter , i just want to ask you can i change paint_num_fill.color to color picker ? inside app
Not working properly
There can be some SVGs with Transforms and other uncommon properties since SVG has many standards.this will not translate well to Custom Paint. Please use the form below to report them 😅
Hi I understood that think...
But I have svg string code of image.... inside svg code....I have some the text ...which I want to change runtime...how it's possible?
I had trying to change text inside the svg code and it's done....
But inside the svg code...one 64base image string occur and I want to replace it with my 64 base image string.....
How can I do?
Great tool though will custom painter has more performance when compared to svg in the same app?. but again what is the use like if my app has multiple svg and I generate it through code any if I try to manipulate I will first understand the from which pointer I have to change then go through the code... Vs I can change svg file ... Sorry but can u tell m the use cases so that I can utilise if possible in my app... Thanks for making such tool❤️
You won't have to add SVG's to the assets and the package for rendering SVGs properly plus you can change the code in dart itself. Well, this is one of those things... when you need it... you'll know 😁
@@RetroPortalStudio thanks I am unaware of concept of svg ... I thought I it an image just like jpg and png...😅 Thanks learned something new .. thanks man
My windows 10 pc do not let me to run the exe
The windows and macos version of shape maker are not signed. On the installation window there will be an option to "Allow" installation from unidentified developer.
Is it similiar with how figma plugin does?
How does this tool convert the XML to Custom Paint Code?
If it works offline in Windows Version...?
Not yet!
waiting......
does it support the svg standard 100%?
Support for SVG Transforms is not yet there but works well other than that! Working regularly to update bug fixes submitted by users!😁
@@RetroPortalStudio make it open source maybe? and this will help to manage issues/feature requests
Is your shape maker developed using flutter for windows and Mac?
Yes 👨💻
@@RetroPortalStudio great ❤️
Also your web program doesn’t install
Why would you need to install a web program? Although, For Windows and MacOS apps you will need to give special permissions since the apps are not signed.
@@RetroPortalStudio by web program I meant the windows install from your website and could you make tutorial on it please ?
I wanted to use your builder because I had a school project but I kept getting a buy me coffee alert do you want people to buy you because they love your work or you wanna force them. I am very disappointed a big thumbs down from me 👎🏻
Well, that bit of code was a mistake where i forgot to comment it and it never came to my attention on debug mode. It was removed yesterday night while pushing the update. And if you're are still seeing that, refresh the site once or twice.
not working properly
There can be some SVGs with Transforms and other uncommon properties since SVG has many standards.this will not translate well to Custom Paint. Please use the form below to report them 😅