Flutter Bezier Curves

[@FlutterMapp]

This is the code of the Clip Shadow Path 👇 . . . import 'package:flutter/material.dart'; @immutable class ClipShadowPath extends StatelessWidget { final BoxShadow shadow; final CustomClipper clipper; final Widget child; const ClipShadowPath({ Key? key, required this.shadow, required this.clipper, required this.child, }) : super(key: key); @override Widget build(BuildContext context) { return CustomPaint( painter: _ClipShadowShadowPainter( clipper: clipper, shadow: shadow, ), child: ClipPath(child: child, clipper: clipper), ); } } class _ClipShadowShadowPainter extends CustomPainter { final BoxShadow shadow; final CustomClipper clipper; _ClipShadowShadowPainter({required this.shadow, required this.clipper}); @override void paint(Canvas canvas, Size size) { var paint = shadow.toPaint() ..maskFilter = MaskFilter.blur( BlurStyle.normal, shadow.spreadRadius, ); var clipPath = clipper.getClip(size).shift(shadow.offset); canvas.drawPath(clipPath, paint); } @override bool shouldRepaint(CustomPainter oldDelegate) { return true; } }

[@soulreaver7802]

Thnx this code is now mine

[@FlutterMapp]

@@soulreaver7802 😂😂😂😂😂

[@sigma_z]

I'm gonna buy your course, I like your teaching style!

[@FlutterMapp]

Thank you so much 🔥🔥👏👏👏

[@ganeshbhat5761]

I just bought the course!! If anyone needs an example of best marketing strategy? This video is it !! One video, less than 4 mins and you sold it to me! Looking forward for the course and more of your content!

[@FlutterMapp]

Damnnnn! Thank you very much Ganesh!!! I really hope you like the course, the module 1 is now completed ⚡⚡⚡ Thanks so much!

[@redingtonramos8791]

Thank you a lot your code is now mine😅

[@FlutterMapp]

loooool, classic developers habits 😂😂😂

[@sigma_z]

I'm a mobile dev, developing in Xamarin Forms RxUI and PRISM. I've always been interested in Flutter, so I'm going to buy your course. In this short video, you sold me with your use of language, you're easy to understand and direct to the point. No messing around. Your teaching style clicks with me. Thank you MAPP!

[@FlutterMapp]

Thank you sooo much! Also this is an advance Flutter course. If you dont know about widgets, state management or the basics of dart/flutter, this will be pretty hard to follow. I just want to be 100% honest with you! If you already purchase and realize the stuff is too advanced, feel free to ask a refund. Thank you so much for the interest ⚡ You satisfaction is the n.1 priority, period 🔥⚡

[@sigma_z]

@@FlutterMapp I already bought your course bro. I'll have a look to find other resources out online to get me up to speed in no time 🙂

[@md.ismailalamkhan]

thats a great video, never knew there was this easy way to make bezier curves. Thanks a lot for this man.

[@FlutterMapp]

Pleasure, thanks a lot for the comment Ismail, sorry for the late answer, currently little late on all reply 🤣 Thanks again!

[@md.ismailalamkhan]

@@FlutterMapp Thats not a problem, thanks for the reply.

[@juliajeehyunkim]

Thinking that I'm the luckiest person in the world.. cuz i found this channel just by chance.. accidentally.. hope you stay safe and healthy Thanks for nice video!! well explanation and good examples, always..😎😎👍👍👍👍👍

[@FlutterMapp]

Thanks a lot Julia! I wish you the best, I appreciate it and Welcome to Flutter Mapp 🔥🔥🔥

[@markIRL]

Your editing is top notch! Well done mate!

[@FlutterMapp]

Thank you very much Mark, I appreciate it 👏

[@markIRL]

@@FlutterMapp I also want to add that the content is also excellent 💜

[@Opeyemi.sanusi]

Love the energy!

[@FlutterMapp]

Thanks Sanusi! 🔥🔥🔥🔥🔥

[@pranav-kale]

i Wished that creating something new was this simple in futter 😂..... Nice video 👍

[@FlutterMapp]

lol, thank you Pranav 🔥

[@1RRaider]

Way easier than actually drawing.. thank you so much

[@FlutterMapp]

Pleasure Raider! Yeah thats actually fire! 🔥🔥🔥

[@trungtrankim294]

"Thank you a lot, your code now is mine". Brooo :))))))

[@FlutterMapp]

looool, classic programmer skills 😂😂😂

[@kirilllapshev]

Another amazing tutorial! 🙏🏼🚀

[@FlutterMapp]

Thanks a lot Kirill 🔥👏

[@jorgeramosarellano8795]

CRAAAAACKKK 🙏🏼🇨🇴

[@FlutterMapp]

🔥🔥🔥⚡️⚡️ Thanks Jorge!

[@abrarlasebai405]

Thanks alot your code is now mine 🤣 True story 😂😂😂

[@FlutterMapp]

loool 😂😂😂 always like this. (Boss: hey can you add this feature. Employee: Copy+paste) 😂😂😂😂

[@abrarlasebai405]

@@FlutterMapp soo trueee 🤣🤣🤣

[@Apenschi]

VERY useful! Thanks!

[@thunderinvader9031]

It would be cool to see a tutorial about animating curves

[@FlutterMapp]

🧐🧐🧐 Seems possible 🎉🎉🎉 Thanks for the idea, a lot of likes alot 🧐🧐

[@edenassos]

You could easily do it with Rive.

[@diegobernal334]

great video, waiting 19th 👍🏻

[@FlutterMapp]

Thank you very much Diego! 🔥🔥👏👏 Link in now available if you want: courses.fluttermapp.com/p/the-complete-flutter-course-hero-to-pro?coupon_code=PRESALE 🔥🔥🔥

[@Juliapak]

Thank you sir!

[@FlutterMapp]

Pleasure Julia! 🔥👏👏

[@erperejildo]

Any tip for ads? I tried all the packages and found problem with all of them: the official one has a horrible performance, the Facebook one sometimes doesn't show any ads...

[@FlutterMapp]

for ads I use google_mobile_ads packages, and yes the documentation is trash 🤣🤣🤣

[@mmazurovsky_r]

Amazing content, thank you

[@FlutterMapp]

Thank you very much!⚡️👏

[@moazahmed5388]

Keep it up bro ♥

[@FlutterMapp]

Thanks Moaz! 👏⚡️⚡️⚡️

[@nafeewalee]

Now,... the code is mine.. tyvm

[@FlutterMapp]

loooool 😂😂😂 classic 😂

[@bijayaadhikari442]

Time the course available? In Australia its already 4pm.

[@FlutterMapp]

It will be available the 19th in the evening. Easter Time 👏🔥⚡️⚡️⚡️⚡️

[@FlutterMapp]

I will do a community post about it. And a video also eventually 🔥

[@bijayaadhikari442]

@@FlutterMapp Nice, thanks

[@tarunspandit]

How would you recommend someone who has experience with xamarin to start learning flutter?

[@FlutterMapp]

You can learn flutter in like 10 steps to be honest. The 10 steps are on my website course. You can either take the 10 steps and search all of them on youtube for free, or join the course, it's really up to you. If you follow the 10 steps you will be all set to build any flutter apps 🔥🔥🔥 Here are the 10 steps on my website course: fluttermapp.teachable.com/p/zero-to-hero

[@emirhan2070]

Amazing tip

[@FlutterMapp]

Thanks ⚡️🎉

[@SandwichMitGurke]

looks cool

[@FlutterMapp]

Thanks Dippa!

[@melomanzer5508]

Excellent

[@FlutterMapp]

Thanks Meloman!! ⚡

[@rahul1024]

I made a hole in the screen with custom clipper. Used it to highlight view for coachmark with original click listener working for view. 🎊

[@FlutterMapp]

Letsgoooo! The possibility are endless 👏👏

[@URIXMX]

LOL this is i just lookin for, what a coincidense

[@FlutterMapp]

Letsgoo! Thanks for the comment Urix!🔥

[@oleksandrleskiv]

And how exactly is this different from SVG background?

[@FlutterMapp]

Thats a really good question actually!!! Ok so imagine you want to animate the curve. You could could do it like this since we only work with data 👏👏👏 Hope this help? Let me know 🔥⚡️

[@oleksandrleskiv]

@@FlutterMapp I understand that, but you haven't mentioned that nor demonstrated it, so it's unclear whether this is possible, or are we just doing this to replace SVG 1 to 1 with no visible gains

[@FlutterMapp]

@@oleksandrleskiv Thats a good point! My mistake on this one 👋 I will remember next time 🙏

[@Apenschi]

Flutter doesn't support SVG natively. That means you would need to add an additional external package just for that. And there is no advantage in using SVG instead, apart from not having to convert it. Also, you are not able to change the path to adapt a widget to certain situations when you are using SVG.

[@AbirHasnat95]

Thank you soo much, this video is a Gem

[@FlutterMapp]

Thank you Abeer 👏👏⚡️⚡️⚡️⚡️

[@vladventura1928]

I'll experiment to find a way to animate these, thanks for the video :)

[@FlutterMapp]

That would be awesome! Let me know if you find it (new comment so I can see it) 🔥⚡️⚡️

[@rafykurniawan3411]

Any idea for making a flipping book to next page like a story book? It may be cool

[@FlutterMapp]

hummmmm, that seems pretty complex.. Maybe there is a pluggin? 🔥

[@rafykurniawan3411]

@@FlutterMapp it maybe hard to explain because i dont know much about flutter but maybe some thing like this tarot flip video but more smooth animation like you feeling flip a book page by page, sorry not helping so much kzbin.info/www/bejne/gJWaead4j7dpnMk

[@nathanzabaldo1054]

Are the bezier curves responsive? E.g. if you are in landscape will they adjust to the new width? If not, can this be done with bezier curves?

[@FlutterMapp]

Sure you could create a code for this! This is why it's pretty cool since it can be animated also 👏

[@rvb6516]

I bought your course to show support 👍😄 i don’t think i’ll need it though - i’m so good 😁😝

[@rvb6516]

You should redo all the good videos of Johannes Mike - I hate his voice & he makes people pay to access his Github Source Code

[@FlutterMapp]

First thank you soooo much !!!! ⚡⚡⚡🔥🔥🔥🔥🔥🔥

[@FlutterMapp]

Second, I can redo all his most popular video maybe 🤣🤣 For the viewwws 📈📈📈 loool Thanks again for the support 🔥🔥

[@atahaneser8863]

UR amazing bro

[@FlutterMapp]

Thanks a lot Atahan! 👏👏👏

[@dinesh4654]

how you make the curve as svg??

[@ripudamansharma5990]

This is OUR code now. *Plays Russian Anthem in background*

[@FlutterMapp]

loool 😂😂😂😂😂😂😂😂😂😂 Thats perfect 😂😂😂😂

[@omzer97]

if my case was to add an svg image i will use SvgPicture and add it as an asset instead of doing the clippath. But this my first time to know that I can convert an svg to a clipath like this! thank you

[@FlutterMapp]

Yeah thats pretty cool! I forgot to mention that you could animate the clipath also, its the main reason you would like to build something like this. Imagine animating all the curves ⚡🔥

[@manuelalejandrodavilacisne456]

Anyone knows a web site or application for create svg curves?

[@FlutterMapp]

I don't know about that, I would probably try to find it on google I guess 👏

[@flaviobarros8305]

neat!

[@FlutterMapp]

🔥🔥🔥👏👏👏

[@letmedoit.]

Bro two things you forgot which could have been better if you have did . 1. Mentioning happy Harris credits in desc. And link to that repo. 2. Link to repo for this design . 🙂

[@FlutterMapp]

Thanks for the comment! I put @learnAppCode is youtube channel in the description (its Happy harris). And for the link to the repo, I dont really post the repo to github since its really small project ..😂 I hope you understand. 👏🔥🔥🔥

[@sushantkumar7630]

Instant of using this , why don’t we use svg picture

[@FlutterMapp]

I forgot to say that you can animated the curves with the method 🙏🙏 That would be the main purpose

[@sushantkumar7630]

@@FlutterMapp that is the most important feature on this. Thanks

[@the1observer]

Criss de tabarnak. En 30 secondes je t'ai pogner hehe. Salut l'ami.

[@FlutterMapp]

looool 😂 je vois pas de quoi tu parle.... L'accent est parfait la.. 😂😂 Salut 🔥👏

[@the1observer]

@@FlutterMapp pour de vrai c'est pratiquement parfait. Faut dire que j'ai l'oreille pour les accents, mais un compatriote c'est facile à spotté in the wild. J'adore flutter, il faudrais que je m'y remette

[@FlutterMapp]

@@the1observer 🤣🤣🤣Tu habite dans quel coin? (Je suis a mtl*)

[@the1observer]

@@FlutterMapp Laval, j'ai utiliser flutter pour un projet en standby faudrais je my remette.

[@adil_elkhallouki]

👍👍👍

[@FlutterMapp]

Thanks Adil ⚡️🔥

[@owaiskhan2264]

It's not show your discount on app

[@FlutterMapp]

The discount/Pre Sale will start Saturday the 19th February 👏 Hope this help Owais

[@owaiskhan2264]

@@FlutterMapp 👍

[@naqeebmaqsood2970]

🤯

[@FlutterMapp]

Thanks 🔥🔥

[@phpstarter]

Unable to subscribe for hero to pro course using gmail address.

[@FlutterMapp]

Thats weird? Is it working now? ⚡ Thanks for the interest David!

[@MdSiam-kw5ox]

That's funny. 🤣

[@FlutterMapp]

looll, thanks Siam! 🔥

[@stanislauspnayenggita9503]

Hello are there other payment methods? I don't have a debit card and a credit card I come from Indonesia

[@FlutterMapp]

Only payment is credit card and Google Pay 🔥👏👏 Thanks for the consideration!

[@ahmadkhudai]

kappied!

[@Mohammad-qg3pj]

Can I buy your course by cryptocurrency ?

[@FlutterMapp]

😂 Sorry Teachable is still in 2005... Teachable is currently my payment system* So its only Google pay and Credit card as for now 😂 Thanks for the consideration Mohammad 🔥

[@Mohammad-qg3pj]

@@FlutterMapp I'm from Iran and I can't pay by google pay or credit card, what can I do ? 🥺

[@FlutterMapp]

You have 3 options. 1. Complain to Teachable. 2. Change country. 3. Hack the course 😂😂😂. All the information is available online for free, just less fun to watch tho. 😂👏

[@Mohammad-qg3pj]

@@FlutterMapp 😂😂😂😂

[@Mohammad-qg3pj]

@@FlutterMapp after buy this course , how can I watch them ? in your website or telegram channel or KZbin ?

[@Mr.Selast]

Francophone ?

[@FlutterMapp]

Yes! Toi aussi? (Je suis de montréal/canada) ⚡⚡

[@Mr.Selast]

@@FlutterMapp Yeeep! Je suis d'allemagne! Très bonne vidéo

[@Inf0rmatix]

Why don’t you explain the code to people? This way nobody will properly learn to code, just copy some other guy on the internet‘s code and still have no clue how it works. Just showing of is easy. Properly teaching people is something different. I am annoyed by the amount of people pretending being able to code but all they are capable of is copy paste and once you show up with tasks that can not be solved by some semi professional KZbin video they are screwed.

[@FlutterMapp]

😂😂😂 I think you are right, 90% I just copy paste when building something. Only after so many copy paste I will remember 😂. Maybe you are right tho. Also if there is to much 'learning/teaching' in a video (not enough entertaining to watch), people will leave the video and youtube will not promote the videos 🧐🤯... I do like your point tho. Let me know if you have any suggestions for the further videos 👏

[@Inf0rmatix]

@@FlutterMapp Honestly, I did not expect you to answer. Moreover, I am very happy to provide you some suggestions: First, I'd like to reference you to the Flutter official channel's videos, though very short, they teach everything important. In my opinion, this is a lot like coding itself. Video feels too long? Maybe it should be two videos or more? Don't want to explain all of Clip and the widgets associated with it in one video? Why not start with something simple, like very basic ClipPath showing how to reproduce round or bezeled corners? Next step could be showing how to add a shadow to a custom clip path (which is fairly simple and fast explained since you just gotta use that same path). So on and so forth. :) If you'd like further input I'll more than happily help you out. I am working as a freelancer with Flutter for almost 3 years now, and most of what I know, I learned by reading to documentation, back in the day when there wasn't a plethora of fancy Flutter Channels ;)

[@FlutterMapp]

@@Inf0rmatix First thanks for the answer Inf0rmatix. Feedback help the channel to grow 🙏. I think it could be a good idea to create 2 videos to explain the bezier like you said. I just worry if people will actually click on the part 2 🤔. (If people don't click on the part 2, this will lower the CTR of the channel and youtube will less likely promote further videos, Its the only worry) But I think you are right tho, I was a little bit lazy to explain the shadow part of the bezier so I decided to not explain it 🤣 Next time I will not be lazzy, at least I will try 🤣 Thank you very much for the comment, if you have more suggestions feel free to tell me in a new comment please (I answer all new comments on the channel and old comment get lost pretty quick with the notification system of youtube) 🙏

[@AswanathCK]

No, I am not Subscribe. I am Aswanath😅

[@FlutterMapp]

looool 🤣🤣

[@AswanathCK]

@@FlutterMapp 😁😁

[@jiankian]

牛逼 666

[@FlutterMapp]

Thanks! 👏🔥

[@itsTrito]

tellement quebecois

[@FlutterMapp]

loooool 🤣🤣🤣 noooooonnnnnn.... merde