Flutter Clip Path Tutorial | Custom Shape | Design Challenge 2023

Welcome to this exciting Flutter tutorial, where you'll unlock the power of Clip Path to create custom shapes in your Flutter app.
► Flutter eCommerce App Course: • Professional Flutter E...
🎊 E-COMMERCE APP
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🎁 DOWNLOAD SOURCE CODE: codingwitht.com/product/flutt...
❤️ FLUTTER E-COMMERCE APP PLAYLISTS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► Complete E-Commerce App : • Professional Flutter E...
► Section - 1 Configuration : • Professional Flutter P...
► Section - 2 Login App : • Professional Flutter P...
► Section - 3 eCommerce UI : • Flutter Complete Ecomm...
► Section - 4 Login Backend: • Flutter Firebase Cours...
► Section - 5 eCommerce Backend: • Flutter E-Commerce App...
❤️ SUBSCRIPTIONS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► Join Patreon to Access Premium Content: / membership
COURSES
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► FLUTTER CRASH COURSE • Flutter Crash Course f...
► LOGIN APP FIREBASE • Flutter Login App - UI...
🧑‍💻 RELATED VIDEOS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► Custom App Bar: • Flutter Custom AppBar ...
► Custom Shape: • Flutter Clip Path Tuto...
► Circular image: • Search Bar and Horizon...
► Grid Layout & Product Design : • Gridview in Flutter wi...
► All Products Page Design • Flutter All Products P...
FOLLOW US ON SOCIAL MEDIA
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 Facebook | / codingwithtea
💻 Instagram | / coding_with_tea
❤️ Subscribe | kzbin.info...
CHAPTERS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
00:00 Introduction
01:15 Playlist Overview
01:54 Design Circular Container
07:26 Make Circular Container Reusable
10:44 Align Custom Shapes in Stack
12:58 Custom Shape using Clip path
23:45 Make Custom Clip Path Shape Reusable
DETAILS
Consider this your design challenge, as we'll equip you with the skills to craft virtually any custom shape you can imagine.
In this Flutter ecommerce App tutorial, we'll delve into the world of Bezier Curves, using their elegant geometry to bring your design ideas to life. By the end of this tutorial, you'll have the expertise to create unique and captivating custom shapes, opening up a world of design possibilities in Flutter. Let's get started on this creative journey!
#tstore #codingwitht #ecommerceapp

[@ThePilli41]

the king is back!

[@CodingwithT]

So nice of you 💕💖

[@vuongqtvn]

Thank you for the very detailed tutorial, I'm looking forward to your flutter ecommece product

[@CodingwithT]

I'm glad it was helpful ☺️

[@muhendis_]

I should learn more about ClipPath

[@kb047_ff7]

you could have easily achieved thiss using stack and then positioned or alignment widget which child is white container theh have given border radius.only at top left and top right ie.ciruclar

[@kyungsooswifeu8240]

Definitely a savior! Thanks a lot!

[@CodingwithT]

Glad it's helpful 😁

[@mohamedalhamri9714]

These are of the best flutter tutorials if not the best. Thank you brother

[@CodingwithT]

You welcome

[@scottfarestrand2364]

I am wondering if there is another option to get the curves. Could we use a stack to have a container (the blue one) followed by another container that has the curves and position it overlaying the bottom 20 pixels of the first container?

[@aswinsubhash7581]

I have a doubt , when we are navigating the getx controllers are not getting disposed, all controllers are in intialized state , so is it a good thing? because getx advantage is there route system, it will dispose the controllers automatically

[@kyungsooswifeu8240]

The other widgets placed after this curve are not positioned directly after it there's some extra space on top. I have no extra padding added in any widget is there a way to display them directly in the top of the white space ? Thank you.

[@GAMEBEST23]

Merci. Le code est bon mais rien ne s'affiche sur mon emulateur. C'est seulement la bottom navigation bar qui apparaît. Pouvez vous m'aider svp ?

[@anisurrehman4274]

sir hm log background mai picture laga kr ke bi ya designee archive kr sakte hai na???

[@zakariaelaaliji7747]

please I want to create a logo for my application so I can use it in the splash screen, any recommandations ?

[@LotOFfactories]

I learnt 50% of knowledge from this video and I being learning flutter for 2 years..

[@CodingwithT]

That’s huge buddy. I am really glad you like this and it’s helpful.

[@flutterIgnite]

Master T as always . awesome

[@CodingwithT]

Thank you so much for your appreciation! Keep up the great work!

[@aouadicharaf1038]

❤❤❤

[@activegoogle4501]

😊

[@gridzzle]

why u removed the sizedbox with 400 height inside primaryheadercontainer after u extracted it ? and how come we still can see the shapes after you removed it ? after i removed the sizedbox, nothing is showing , only full white background.... thanks in advance

[@gridzzle]

i can see in the next video you inserted the sizedbox back, sorry for the misunderstanding

[@ryansumbele3552]

please how did you solve this problem i am facing thesame issue

[@gridzzle]

insert the sizedbox again @@ryansumbele3552

[@FelipeCampelo0]

this is a whole calculus class 😃

[@CodingwithT]

😂🤣 This is...

[@mhsmartgaming2708]

How to solve this problem Failed assertion: line 599 pos 12: 'size.isFinite': is not true.

[@elncart]

very nice. can you explain riverpod with one small project.

[@CodingwithT]

Yes sure, I will try to make a playlist on that along with other State Managements 💕

[@noumankarim92]

Very nice and informative... thanks

[@CodingwithT]

You welcome 🤗

[@dhalle]

Its amazing tutorial and understandably sir but i want to tell you and requested you to make your editor to zoom because its var away to see nicely plz zoom sir 🎉

[@CodingwithT]

I tried to zoom but in upcoming videos I'll increase the zoom. Thankyou 💖

[@dhalle]

@CodingwithT Sir Thankfully 💥🙏🤩

[@pjagannadham2540]

Which state management you are using

[@CodingwithT]

GetX 🤗

[@mr.saurabhpatil]

Although I have purchased a kit... I'm still waiting for your videos... Please upload every part as fast as you can... Please....

[@CodingwithT]

Thank you 😊. I'm on it.

[@adamilham_]

Sir, in primary_header_container.dart, can you tell me the code for background custom shape? I can't see the code because of the emulator

[@CodingwithT]

Which one?

[@berkantyurtsever41]

Hello friend, I did everything as it is. However, when I put the container position in the stack, I cannot see the container. If you have email I can show you the code and what it looks like.

[@CodingwithT]

Hi, You have to use positioned widget while using stack. api.flutter.dev/flutter/widgets/Positioned-class.html

[@AmiringPRO]

class HomeScreen extends StatelessWidget { const HomeScreen({super.key}); @override Widget build(BuildContext context) { return Scaffold( body: SingleChildScrollView( child: Column( children: [ TPrimaryHeaderContainer( child: Container(), ), ], ), ) ); } } it is not working it doesn't show me a custom shape help me please?

[@fanocs]

Give the container a height property of 400.

[@user-cn5rw5qf9l]

what extension did u used to get the small box of colors near the line number, can you tell

[@CodingwithT]

Which one?

[@user-cn5rw5qf9l]

when u are using a color in the code, u r getting a small box near the line number which shows which color is used , how do u get that? @@CodingwithT

[@manishmg3994]

if possible make source code free

[@goodview360]

He needs the support to keep giving us current tutorials, lets support

[@hunterxx6744]

Like for you salam

[@CodingwithT]

W.Salam Thank you for your support.

[@user-ot7fn4cz7d]

Source code please 🥺😢

[@CodingwithT]

Link to download source code is available in the description 🎉

[@FelipeCampelo0]

I made a Path Element class so we can name properly the edges and the horizontal line: class PathElement { PathElement(this.curveBeginning, this.curveEnding, this.path); final Offset curveBeginning; final Offset curveEnding; final Path path; void quadraticBezierTo() { path.quadraticBezierTo( curveBeginning.dx, curveBeginning.dy, curveEnding.dx, curveEnding.dy, ); } } FULL: curved_edges.dart import 'package:flutter/material.dart'; class TCustomCurvedEdges extends CustomClipper { @override Path getClip(Size size) { var path = Path(); path.lineTo(0, size.height); PathElement firstEdge = PathElement( Offset(0, size.height - 20), Offset(30, size.height - 20), path, ); firstEdge.quadraticBezierTo(); PathElement horizontalLine = PathElement( Offset(0, size.height - 20), Offset(size.width - 30, size.height - 20), path, ); horizontalLine.quadraticBezierTo(); PathElement lastEdge = PathElement( Offset(size.width, size.height - 20), Offset(size.width, size.height), path, ); lastEdge.quadraticBezierTo(); path.lineTo(size.width, 0); path.close(); return path; } @override bool shouldReclip(covariant CustomClipper oldClipper) { return true; } } class PathElement { PathElement(this.curveBeginning, this.curveEnding, this.path); final Offset curveBeginning; final Offset curveEnding; final Path path; void quadraticBezierTo() { path.quadraticBezierTo( curveBeginning.dx, curveBeginning.dy, curveEnding.dx, curveEnding.dy, ); } }