Flutter Clip Path Tutorial | Custom Shape | Design Challenge 2023

Поділитися
Вставка
  • Опубліковано 23 гру 2024

КОМЕНТАРІ • 82

  • @ThePilli41
    @ThePilli41 Рік тому +7

    the king is back!

  • @legardemontcho6739
    @legardemontcho6739 3 місяці тому +1

    Great session Againt ! But one suggestion: Flutter's ClipOval widget should be used for TCiruclarContainer to avoid the radius, padding and decorations params. You can even have just a size and a color if the circle is never oval. Here's the code:
    class TClipOval extends StatelessWidget {
    final double size;
    final Widget? child;
    final Color backgroundColor;
    const TClipOval({
    this.size = 400,
    this.child,
    this.backgroundColor = Colors.white,
    super.key,
    });
    @override
    Widget build(BuildContext context) {
    return ClipOval(
    child: Container(
    height: size,
    width: size,
    color: backgroundColor,
    child: child,
    ),
    );
    }
    }

  • @mohamedalhamri9714
    @mohamedalhamri9714 6 місяців тому +1

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

  • @vuongqtvn
    @vuongqtvn Рік тому +4

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

  • @طالببرمجة-ه2غ
    @طالببرمجة-ه2غ 2 місяці тому

    Thank you, "with a T." My English is poor, but I'm trying to understand. I thank you with all my heart for your valuable efforts, brother.

    • @CodingwithT
      @CodingwithT  Місяць тому

      You're very welcome! Your effort in communicating in English is commendable, and I’m glad to hear that you’re finding the content helpful.Thank you for your kind words, and keep up the great work!

  • @FelipeCampelo0
    @FelipeCampelo0 10 місяців тому +1

    this is a whole calculus class 😃

  • @hridoykhan160
    @hridoykhan160 Місяць тому

    wow this is amazing

  • @kyungsooswifeu8240
    @kyungsooswifeu8240 10 місяців тому

    Definitely a savior! Thanks a lot!

    • @CodingwithT
      @CodingwithT  10 місяців тому +1

      Glad it's helpful 😁

  • @noumankarim92
    @noumankarim92 Рік тому +1

    Very nice and informative... thanks

  • @LotOFfactories
    @LotOFfactories 6 місяців тому

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

    • @CodingwithT
      @CodingwithT  6 місяців тому

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

  • @gridzzle
    @gridzzle Рік тому +3

    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
      @gridzzle Рік тому +2

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

    • @ryansumbele3552
      @ryansumbele3552 Рік тому +1

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

    • @gridzzle
      @gridzzle Рік тому

      insert the sizedbox again @@ryansumbele3552

  • @kb047_ff7
    @kb047_ff7 7 місяців тому +1

    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

  • @scottfarestrand2364
    @scottfarestrand2364 8 місяців тому +1

    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?

    • @Senior302
      @Senior302 3 місяці тому

      import 'package:best_uis/utils/constants/colors.dart';
      import 'package:best_uis/utils/constants/helper_functions.dart';
      import 'package:flutter/material.dart';
      class Home extends StatelessWidget {
      const Home({super.key});
      @override
      Widget build(BuildContext context) {
      return Scaffold(
      body: Stack(
      children: [
      Container(
      color: AppColors.primary,
      ),
      Positioned(
      top: 50,
      left: HelperFunctions.screenWidth(context) * .95,
      child: CustomPaint(
      painter: CircledShape(),
      )),
      Positioned(
      top: 300,
      left: HelperFunctions.screenWidth(context) * .999,
      child: CustomPaint(
      painter: CircledShape(),
      )),
      Positioned(
      left: 1,
      top: HelperFunctions.screenHeight(context) * .5,
      child: Container(
      height: HelperFunctions.screenHeight(context) * .5,
      width: HelperFunctions.screenHeight(context) * .5,
      decoration: BoxDecoration(
      color: AppColors.white,
      borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20),
      topRight: Radius.circular(20),
      )),
      ),
      ),
      ],
      ),
      );
      }
      }
      class CircledShape extends CustomPainter {
      @override
      void paint(Canvas canvas, Size size) {
      canvas.drawCircle(
      Offset(25, 25),
      170,
      Paint()
      ..color = AppColors.white.withOpacity(.1)
      ..style = PaintingStyle.fill);
      }
      @override
      bool shouldRepaint(covariant CustomPainter oldDelegate) {
      return false;
      }
      }

    • @bukor0su368
      @bukor0su368 Місяць тому

      this exactly what i thought of as well

  • @pjagannadham2540
    @pjagannadham2540 Рік тому +2

    Which state management you are using

  • @flutterIgnite
    @flutterIgnite 9 місяців тому

    Master T as always . awesome

    • @CodingwithT
      @CodingwithT  9 місяців тому

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

  • @zakariaelaaliji7747
    @zakariaelaaliji7747 7 місяців тому +1

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

  • @kyungsooswifeu8240
    @kyungsooswifeu8240 7 місяців тому

    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.

  • @MohamedIslamDJOUABLIA
    @MohamedIslamDJOUABLIA 5 місяців тому +1

    AMAZING , but i should try to understand the clippath widget better , thanks

    • @CodingwithT
      @CodingwithT  5 місяців тому +1

      You're welcome! Understanding the ClipPath widget can really enhance your designs.

  • @aswinsubhash7581
    @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

  • @mr.saurabhpatil
    @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....

  • @ishuraa-b
    @ishuraa-b 4 місяці тому

    Why did you take 0 as the offset x of second first curve?

    • @CodingwithT
      @CodingwithT  4 місяці тому

      The 0 offset for the secondFirstCurve is used to maintain the horizontal alignment for the second curve along the x-axis. Since the second curve is intended to start from the same vertical level as the first one, the x-coordinate remains at 0, ensuring that the curve is positioned correctly without any horizontal shift.

    • @ishuraa-b
      @ishuraa-b 4 місяці тому

      @@CodingwithT but if i replace 0 with 100 in the code, then also I amgetting the same result

  • @zumbarto
    @zumbarto 4 місяці тому

    Why not stack with containers? The container on the top will have borderRadius and it will have the same result. Am I missing something?

    • @CodingwithT
      @CodingwithT  4 місяці тому

      Using a CustomClipper allows for more complex shapes and precise control compared to Container with borderRadius. For intricate designs like this, CustomClipper is the better choice.

  • @JustGamingAndD
    @JustGamingAndD Рік тому

    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 ?

  • @SpaceXplorer_2024
    @SpaceXplorer_2024 11 місяців тому +1

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

  • @elncart
    @elncart Рік тому

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

    • @CodingwithT
      @CodingwithT  Рік тому

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

  • @muhendis_
    @muhendis_ 5 місяців тому

    I should learn more about ClipPath

    • @CodingwithT
      @CodingwithT  5 місяців тому

      Learning more about ClipPath can really enhance your design skills! 🎨 It's a powerful widget for creating custom clip shapes in Flutter.

  • @bukor0su368
    @bukor0su368 Місяць тому

    why not putting the blue container and the white one in a stack, then making the top right and left corners of the white container circular? why whoudn't this work?

    • @pintsizedpals
      @pintsizedpals Місяць тому

      You are right. That is the easiest way rather than using clipper

    • @bukor0su368
      @bukor0su368 Місяць тому

      @pintsizedpals I think clip is better, like how would u make the container cover the whole screen?

    • @CodingwithT
      @CodingwithT  11 днів тому

      Using a Stack with a circular top-right and top-left border on the white container should work. Just ensure you use a ClipRRect or Container with BoxDecoration and set borderRadius for the corners.

  • @dhalle
    @dhalle Рік тому +1

    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
      @CodingwithT  Рік тому +1

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

    • @dhalle
      @dhalle Рік тому

      @CodingwithT Sir Thankfully 💥🙏🤩

  • @subhamCoder
    @subhamCoder 4 місяці тому

    Pls solve the problem
    size.isFinite : is not true

  • @AmiringPRO
    @AmiringPRO 10 місяців тому +1

    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
      @fanocs 5 місяців тому

      Give the container a height property of 400.

  • @adamilham_
    @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

  • @taku_and_jesus
    @taku_and_jesus 3 місяці тому

    i finished the whole video till end and when i was done nothing is popping up on my home screen, please help

    • @CodingwithT
      @CodingwithT  3 місяці тому

      Make sure to add child property in your widget

  • @berkantyurtsever41
    @berkantyurtsever41 9 місяців тому

    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
      @CodingwithT  9 місяців тому

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

  • @ANKURTIWARY-l2y
    @ANKURTIWARY-l2y Рік тому

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

    • @CodingwithT
      @CodingwithT  Рік тому

      Which one?

    • @ANKURTIWARY-l2y
      @ANKURTIWARY-l2y Рік тому

      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

  • @aouadicharaf1038
    @aouadicharaf1038 Рік тому

    ❤❤❤

  • @manishmg3994
    @manishmg3994 Рік тому +2

    if possible make source code free

    • @goodview360
      @goodview360 Рік тому

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

  • @activegoogle4501
    @activegoogle4501 7 місяців тому

    😊

  • @JalalTech-i2g
    @JalalTech-i2g Рік тому

    Source code please 🥺😢

    • @CodingwithT
      @CodingwithT  Рік тому

      Link to download source code is available in the description 🎉

  • @abdelouahebbenouar6157
    @abdelouahebbenouar6157 5 місяців тому

    I understand that you want to keep a clean code , but factoring everything to a custom widget became annoying, it's not clean code anymore and trying to find a specific widget in a pile of widgets is kinda annoying, i like your videos , but i hope you change this part

  • @hunterxx6744
    @hunterxx6744 7 місяців тому

    Like for you salam

    • @CodingwithT
      @CodingwithT  7 місяців тому

      W.Salam Thank you for your support.

  • @FelipeCampelo0
    @FelipeCampelo0 10 місяців тому

    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,
    );
    }
    }