Flutter Bezier Curves

Поделиться
HTML-код
  • Опубликовано: 29 сен 2024

Комментарии • 141

  • @FlutterMapp
    @FlutterMapp  2 года назад +18

    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
      @soulreaver7802 2 года назад +5

      Thnx this code is now mine

    • @FlutterMapp
      @FlutterMapp  2 года назад +2

      @@soulreaver7802 😂😂😂😂😂

    • @sigma_z
      @sigma_z 2 года назад +1

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

    • @FlutterMapp
      @FlutterMapp  2 года назад

      Thank you so much 🔥🔥👏👏👏

  • @redingtonramos8791
    @redingtonramos8791 2 года назад +67

    Thank you a lot your code is now mine😅

    • @FlutterMapp
      @FlutterMapp  2 года назад +18

      loooool, classic developers habits 😂😂😂

  • @Inf0rmatix
    @Inf0rmatix 2 года назад +4

    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 RUclips video they are screwed.

    • @FlutterMapp
      @FlutterMapp  2 года назад +1

      😂😂😂 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
      @Inf0rmatix 2 года назад +1

      @@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
      @FlutterMapp  2 года назад +1

      @@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) 🙏

  • @letmedoit.
    @letmedoit. 2 года назад +4

    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
      @FlutterMapp  2 года назад

      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. 👏🔥🔥🔥

  • @thunderinvader9031
    @thunderinvader9031 2 года назад +9

    It would be cool to see a tutorial about animating curves

    • @FlutterMapp
      @FlutterMapp  2 года назад +1

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

    • @edenassos
      @edenassos 2 года назад

      You could easily do it with Rive.

  • @erperejildo
    @erperejildo 2 года назад +1

    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
      @FlutterMapp  2 года назад

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

  • @ripudamansharma5990
    @ripudamansharma5990 2 года назад +1

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

    • @FlutterMapp
      @FlutterMapp  2 года назад

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

  • @URIXMX
    @URIXMX 2 года назад +1

    LOL this is i just lookin for, what a coincidense

    • @FlutterMapp
      @FlutterMapp  2 года назад

      Letsgoo! Thanks for the comment Urix!🔥

  • @manuelalejandrodavilacisne456
    @manuelalejandrodavilacisne456 2 года назад +1

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

    • @FlutterMapp
      @FlutterMapp  2 года назад +1

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

  • @phpstarter
    @phpstarter 2 года назад +1

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

    • @FlutterMapp
      @FlutterMapp  2 года назад

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

  • @tarunspandit
    @tarunspandit 2 года назад +2

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

    • @FlutterMapp
      @FlutterMapp  2 года назад

      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

  • @jorgeramosarellano8795
    @jorgeramosarellano8795 2 года назад +4

    CRAAAAACKKK 🙏🏼🇨🇴

    • @FlutterMapp
      @FlutterMapp  2 года назад

      🔥🔥🔥⚡️⚡️ Thanks Jorge!

  • @AswanathCK
    @AswanathCK 2 года назад +1

    No, I am not Subscribe. I am Aswanath😅

  • @pranav-kale
    @pranav-kale 2 года назад +2

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

    • @FlutterMapp
      @FlutterMapp  2 года назад +1

      lol, thank you Pranav 🔥

  • @bijayaadhikari442
    @bijayaadhikari442 2 года назад +1

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

    • @FlutterMapp
      @FlutterMapp  2 года назад

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

    • @FlutterMapp
      @FlutterMapp  2 года назад +1

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

    • @bijayaadhikari442
      @bijayaadhikari442 2 года назад +1

      @@FlutterMapp Nice, thanks

  • @vladventura1928
    @vladventura1928 2 года назад +2

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

    • @FlutterMapp
      @FlutterMapp  2 года назад

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

  • @sushantkumar7630
    @sushantkumar7630 2 года назад +1

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

    • @FlutterMapp
      @FlutterMapp  2 года назад +1

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

    • @sushantkumar7630
      @sushantkumar7630 2 года назад

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

  • @Juliapak
    @Juliapak 2 года назад +1

    Thank you sir!

    • @FlutterMapp
      @FlutterMapp  2 года назад

      Pleasure Julia! 🔥👏👏

  • @ahmadkhudai
    @ahmadkhudai 2 года назад +1

    kappied!

  • @nafeewalee
    @nafeewalee 2 года назад +1

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

    • @FlutterMapp
      @FlutterMapp  2 года назад

      loooool 😂😂😂 classic 😂

  • @md.ismailalamkhan
    @md.ismailalamkhan 2 года назад +3

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

    • @FlutterMapp
      @FlutterMapp  2 года назад

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

    • @md.ismailalamkhan
      @md.ismailalamkhan 2 года назад

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

  • @the1observer
    @the1observer 2 года назад +1

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

    • @FlutterMapp
      @FlutterMapp  2 года назад

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

    • @the1observer
      @the1observer 2 года назад +1

      @@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
      @FlutterMapp  2 года назад

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

    • @the1observer
      @the1observer 2 года назад +1

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

  • @oleksandrleskiv
    @oleksandrleskiv 2 года назад +2

    And how exactly is this different from SVG background?

    • @FlutterMapp
      @FlutterMapp  2 года назад

      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
      @oleksandrleskiv 2 года назад +2

      @@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
      @FlutterMapp  2 года назад

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

    • @Apenschi
      @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.

  • @juliakim8586
    @juliakim8586 2 года назад +1

    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
      @FlutterMapp  2 года назад

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

  • @nathanzabaldo1054
    @nathanzabaldo1054 2 года назад +1

    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
      @FlutterMapp  2 года назад

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

  • @rafykurniawan3411
    @rafykurniawan3411 2 года назад +2

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

    • @FlutterMapp
      @FlutterMapp  2 года назад

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

    • @rafykurniawan3411
      @rafykurniawan3411 2 года назад

      @@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
      ruclips.net/video/Jd7HtBZR6fg/видео.html

  • @ganeshbhat5761
    @ganeshbhat5761 2 года назад +1

    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
      @FlutterMapp  2 года назад

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

  • @jiankian
    @jiankian 2 года назад +2

    牛逼 666

  • @atahaneser8863
    @atahaneser8863 2 года назад +1

    UR amazing bro

    • @FlutterMapp
      @FlutterMapp  2 года назад

      Thanks a lot Atahan! 👏👏👏

  • @dinesh4654
    @dinesh4654 10 месяцев назад

    how you make the curve as svg??

  • @rahul1024
    @rahul1024 2 года назад +1

    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
      @FlutterMapp  2 года назад

      Letsgoooo! The possibility are endless 👏👏

  • @trungtrankim294
    @trungtrankim294 2 года назад +1

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

    • @FlutterMapp
      @FlutterMapp  2 года назад

      looool, classic programmer skills 😂😂😂

  • @sigma_z
    @sigma_z 2 года назад +8

    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
      @FlutterMapp  2 года назад +2

      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
      @sigma_z 2 года назад

      @@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 🙂

  • @naqeebmaqsood2970
    @naqeebmaqsood2970 2 года назад +1

    🤯

  • @kirilllapshev
    @kirilllapshev 2 года назад +2

    Another amazing tutorial! 🙏🏼🚀

    • @FlutterMapp
      @FlutterMapp  2 года назад

      Thanks a lot Kirill 🔥👏

  • @1RRaider
    @1RRaider 2 года назад +1

    Way easier than actually drawing.. thank you so much

    • @FlutterMapp
      @FlutterMapp  2 года назад

      Pleasure Raider! Yeah thats actually fire! 🔥🔥🔥

  • @mmazurovsky_r
    @mmazurovsky_r 2 года назад +2

    Amazing content, thank you

    • @FlutterMapp
      @FlutterMapp  2 года назад

      Thank you very much!⚡️👏

  • @rvb6516
    @rvb6516 2 года назад +1

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

    • @rvb6516
      @rvb6516 2 года назад +1

      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
      @FlutterMapp  2 года назад +1

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

    • @FlutterMapp
      @FlutterMapp  2 года назад +1

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

  • @markIRL
    @markIRL 2 года назад +2

    Your editing is top notch! Well done mate!

    • @FlutterMapp
      @FlutterMapp  2 года назад +1

      Thank you very much Mark, I appreciate it 👏

    • @markIRL
      @markIRL 2 года назад

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

  • @abrarlasebai405
    @abrarlasebai405 2 года назад +1

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

    • @FlutterMapp
      @FlutterMapp  2 года назад +1

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

    • @abrarlasebai405
      @abrarlasebai405 2 года назад

      @@FlutterMapp soo trueee 🤣🤣🤣

  • @Mohammad-qg3pj
    @Mohammad-qg3pj 2 года назад +1

    Can I buy your course by cryptocurrency ?

    • @FlutterMapp
      @FlutterMapp  2 года назад

      😂 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
      @Mohammad-qg3pj 2 года назад +1

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

    • @FlutterMapp
      @FlutterMapp  2 года назад

      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
      @Mohammad-qg3pj 2 года назад +1

      @@FlutterMapp 😂😂😂😂

    • @Mohammad-qg3pj
      @Mohammad-qg3pj 2 года назад +1

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

  • @Opeyemi.sanusi
    @Opeyemi.sanusi 2 года назад +2

    Love the energy!

    • @FlutterMapp
      @FlutterMapp  2 года назад +1

      Thanks Sanusi! 🔥🔥🔥🔥🔥

  • @Mr.Selast
    @Mr.Selast 2 года назад +1

    Francophone ?

    • @FlutterMapp
      @FlutterMapp  2 года назад +1

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

    • @Mr.Selast
      @Mr.Selast 2 года назад

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

  • @diegobernal334
    @diegobernal334 2 года назад +1

    great video, waiting 19th 👍🏻

    • @FlutterMapp
      @FlutterMapp  2 года назад

      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 🔥🔥🔥

  • @AbirHasnat95
    @AbirHasnat95 2 года назад +1

    Thank you soo much, this video is a Gem

    • @FlutterMapp
      @FlutterMapp  2 года назад +1

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

  • @MdSiam-kw5ox
    @MdSiam-kw5ox 2 года назад +1

    That's funny. 🤣

  • @adil_elkhallouki
    @adil_elkhallouki 2 года назад +2

    👍👍👍

  • @omzer97
    @omzer97 2 года назад

    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
      @FlutterMapp  2 года назад

      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 ⚡🔥

  • @Apenschi
    @Apenschi Год назад

    VERY useful! Thanks!

  • @melomanzer5508
    @melomanzer5508 2 года назад +1

    Excellent

  • @moazahmed5388
    @moazahmed5388 2 года назад +1

    Keep it up bro ♥

    • @FlutterMapp
      @FlutterMapp  2 года назад

      Thanks Moaz! 👏⚡️⚡️⚡️

  • @SandwichMitGurke
    @SandwichMitGurke 2 года назад +1

    looks cool

  • @owaiskhan2264
    @owaiskhan2264 2 года назад +1

    It's not show your discount on app

    • @FlutterMapp
      @FlutterMapp  2 года назад +1

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

    • @owaiskhan2264
      @owaiskhan2264 2 года назад +1

      @@FlutterMapp 👍

  • @emirhan2070
    @emirhan2070 2 года назад +1

    Amazing tip

  • @flaviobarros8305
    @flaviobarros8305 2 года назад +1

    neat!

  • @itsTrito
    @itsTrito 2 года назад

    tellement quebecois

    • @FlutterMapp
      @FlutterMapp  2 года назад

      loooool 🤣🤣🤣 noooooonnnnnn.... merde

  • @stanislauspnayenggita9503
    @stanislauspnayenggita9503 2 года назад

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

    • @FlutterMapp
      @FlutterMapp  2 года назад

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