Flutter Custom Path Tutorial || Part 1 (A Path for Clip)

Welcome to yet another series of Flutter.
In this series we will create flutter application from scratch and complete the app by end of the series.
MCU App | A path for Clip
In this tutorial we will see basics about Path and custom path clipping in flutter.
Path is a generic concept among all drawing frameworks. so, you can learn the whole concept of path on links below:
SVG Path: www.w3schools.com/graphics/sv...
Path in Flutter : / paths-in-flutter-a-vis...
You can find the source on
GitHub : github.com/afzalali15/Flutter...
Dribble UI : dribbble.com/shots/6393964-De...
Other tutorial links:
Flutter Dark Theme | Change Theme Runtime
• Flutter Dark Theme Tut...
Flutter Hero Animation | ListView
• Flutter Hero Animation...
Flutter Animation | Simple scale transition
• Flutter Animation Tuto...

[@anubratsahoo447]

Love the way how u have made ur tutorials more asthetic

[@Thelynxgeek]

that's an awesome video, thank you so much!!!

[@roshanshetty5661]

This is such a good video! I like how you choose to explain how you are coming up with the shape using the SVG site. I think that we should all appreciate the efforts you took to explain it in such detail! Keep up the good work! I'd love to see more of your videos! Could you do a video where you create an app from scratch and deploy it on PlayStore or AppStore? Thanks!

[@CodeXdev]

Thank you so much, it really encourages me to create more of such content.

[@VJKoding]

Awesome sir

[@TheTahmeed]

You are great. Thanks for your awesome videos

[@CodeXdev]

:) my old good videos 😍

[@mcdona22]

very well explained

[@tareqislam8644]

Hello. Thanks for your video. Can you please tell me where to find those marvel's picture that you have used in your app.

[@be_like__prateek]

Made easy ❤️🔥

[@BreegBenjamin]

Gracias por el video

[@renanmendes35]

Thanks from 🇧🇷 🙏

[@CodeXdev]

You are welcome!

[@ruhanahmad1284]

Kindly explain each and every step because this is not much explained as tutorials, its just like presentation

[@CodeXdev]

Thank you for feedback

[@filipenobre1078]

Master

[@CSSuccessGamer]

wow nice!

[@CodeXdev]

Thanks!

[@canh4869]

thank bro

[@-Sergey]

Thank you. Have no idea how I can use it right now, but nevertheless it's a good video.

[@jaxtongunner4731]

you probably dont care but if you are bored like me atm you can stream all the new movies on InstaFlixxer. Have been binge watching with my brother during the lockdown :)

[@marvinnova1553]

@Jaxton Gunner Yup, I have been watching on Instaflixxer for years myself :)

[@heisenberg5873]

@@jaxtongunner4731 this bot sounds like a human to me

[@heisenberg5873]

@@marvinnova1553 another bot to make it look like its real

[@rameetsyu8709]

thank you!!!

[@CodeXdev]

Welcome!

[@donaldoj.zarate.4075]

Gracias!!

[@CodeXdev]

De nada :)

[@The4lexO]

Hi thanks for the tutorial. How can we expand the clipped child to the full width or height of the screen ? Thanks.

[@EaglexOnline]

use hero widget

[@AhmadAshraf-qs7ud]

can you give shadow to the custom clip path ?

[@sayanpaul2083]

can you please tell from where i find that images?

[@tirupatirao7521]

shadows on thus custom shapes plz??

[@filipenobre1078]

Drawable contour from SVG

[@KolorfulME]

but where is the 4th?

[@xaxababa6616]

2 questions, how to make a custom shadow that will fill the whole shape? I know I can use elevation from draw.Shadow with a Custom Painter but I want a uniform shadow over the whole container Second, what was the use of moveTo in your code? I removed it and nothing changed

[@noobinator9854]

I saw your comment and tried to make a shadow. It doesnt work. However, if you think about it, maybe we can use a Stack widget, create two clip paths with the same co-ordinates and position one above the other using the Positioned widget such that it looks like a shadow.

[@xaxababa6616]

Ankush L Yeah sure that could work :)

[@Samkayis]

@@noobinator9854 Or do something like this. Stack a circular container below the clipped container and give shadow to the circle container in a way that it looks good.