Flutter Bezier Curves

this is how to create busier curve in your flutter app i just want to shout out bazoo and learn app code for this documentation thank you and let's start this the first thing we need is to create a file called the custom clippers inside this one we have the import material then we create a class big clipper this one is the orange shape the big clipper will extend a custom clipper with the type but we will also create a class small clipper this one is the red shape and now you can see that we have a problem we need to go over the big clipper quick fix and then create the two missing override and we will do the same thing for the small clipper quick fix create two missing override next we need to create the path get clip for this you will need to open all your shapes in google chrome you see i have the big clipper and the small clipper also you need to make sure that it's a dot svg file with this you can right click and inspect this will give you the path of the svg then you can find online svg converter to flutter code i will link all the resource in the description so what you need is to put the path of the svg i will go back inside the inspect and i will double click copy the path and paste it inside next we need also the translation x and y you can also find this in the inspect this is the x and this is the y so we'll copy both of them and i will click convert this will give us the flutter clipper so you will just take all the override you will copy this and inside your code you will replace the get clip so all of this by what you just copy simple as that next we need to do the same thing but for the small clipper right click inspect copy the path and the translation and click convert again i copy all the override and i replace the override path get clip inside the small clipper this time that's perfect so the small clipper is the shape of the red one and the big clipper is the shape of the orange one now i will create a scaffold i will give a background color red with a body stack inside the list of children we have the clip pad the clipper will be the big clipper and the child will be a container with the orange color and this is what we have i will also make another clip pad with the clipper small clipper this time the child container with a color red that's cool but we have a problem we need to have a shadow on the big clipper and the small clipper for this we have a perfect solution on github by happy aries and thank you a lot your code is now mine i will copy all of this and i will create a new file called the clip shadow path in this one i will copy the code from aris and after some modification to make it work with null safety we can now use the clip shadow path i will add all this code inside the first comment of this video if you want you can read it but this is pretty boring so we will just use it as it is and for this we will replace the clip pad by the clip shadow pad that we have just used this one need to have an argument shadow which will give a bug shadow with the color black the offset the blur radius and the spread radius and this creates a shadow under the big clipper shape we will do the same thing for the other one we change the clip pad for the clip shadow path we add a shadow with the box shadow and you have created too busy your shape inside your flutter app this saturday the 19 i will release my new advanced flutter course it will be straight to the point like these videos and we will talk about clean architecture testing flutter apps performance and widget life cycle the pre-sale of the course will start this saturday the 19th and you will be able to get the course at 38 instead of 69. after the pre-sale the course will never be in discount so this is your only chance to get it at 38 and i'm so sure that it will be the best advanced course that you have ever take that you have a 30-day satisfaction guaranteed or your money back the pre-sale will start this saturday the 19th and if you want to get notified by email when it's ready you can click the link in the description or go on fluttermap.com youtube algorithm think you should watch this video next that's it thank you for watching bye [Music]

Channel: Flutter Mapp

Views: 58,887

Keywords: Flutter, flutter curves, flutter bezier curves, flutter bezier, flutter clippath, flutter clip path, ClipPath, CustomPaint, CustomClipper, CustomPainter, flutter custom clipper, flutter custom painter tutorial, flutter custom paint, flutter custompaint, flutter mapp, mapp, bezier curve, flutter tutorial, flutter course, flutter widgets

Id: P0eZ0XH5FdI

Length: 3min 46sec (226 seconds)

Published: Thu Feb 17 2022