Flutter - Fancy Circular Progress Indicators WITHOUT Custom Paint | Flutter UI Tutorial

Поделиться
HTML-код
  • Опубликовано: 10 дек 2024
  • #flutter #flutterui #mobileapp
    In this video we will be taking a look at Alternative Way to create Fancy Progress or Percentage Indicators without Using Custom Paint. We will be using ShaderMask Widget and using its power to create Quick and Less Complex Indicators!
    Github: github.com/ret...
    Medium (Article): / lpp3kkmiu9
    Flutter Widget Essentials Series:
    • Flutter Widget Essenti...
    If you find this video useful consider Supporting RetroPortal Studio:
    ✓ Buy Me a Coffee: www.buymeacoff...
    ✓ Patreon: / retroportalstudio
    Social Links:
    ✓ Twitter: / theretroportal
    ✓ Instagram: / retroportalstudio
    ✓ Patreon: / retroportalstudio
    If you like the tutorial, please hit the LIKE and Subscribe button and also consider supporting me on Patreon for More Flutter Tutorial on RetroPortal Studio.
    Thank you for Watching! Happy Coding :)

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

  • @RetroPortalStudio
    @RetroPortalStudio  4 года назад +1

    If you find this video useful, consider Following me on:
    Twitter: twitter.com/theretroportal
    Instagram: instagram.com/retroportalstudio
    LinkedIn: www.linkedin.com/in/parasjainrps
    Happy Coding! ✌️😁

  • @mercysparks1403
    @mercysparks1403 4 года назад +20

    There are thousands of tutorial videos online but to find video like this one with such explicit content explanation is extremely difficult ! best tutorial video i have ever watched on youtube .

  • @kirill4531
    @kirill4531 4 года назад +3

    Thank you for not just coding out the solution but for explaining everything in-depth.
    How it will look like in production, what are the other options for values, how do they affect the appearance.
    Excellent!

  • @freakinawesome2210
    @freakinawesome2210 3 года назад +2

    To be frank, everything i learned till now, you contribute 95 percent. love your videos. I wished just one thing, if you can just a bit more explain the topics, by a just more, i swear there would be no any doubts after completing your videos.

  • @raphaeldantalian2321
    @raphaeldantalian2321 4 года назад +1

    Welcome back and thanks for the video!!

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

    Welcome back, it's been awhile.
    Thank you for this amazing tutorial video.

  • @fuadall8961
    @fuadall8961 4 года назад +1

    Thanks for tutorial.
    This is the rear channel with usefull solutions.
    Waitinh for article with more examples.

  • @saranyapadmanaban729
    @saranyapadmanaban729 4 года назад +1

    Good to see u back bro, daily I will check your channel for new videos , today it happened. Share this progress indicator trick with real world implement.

  • @hasankemalturk4416
    @hasankemalturk4416 4 года назад +1

    Your tutorials and samples make me willing to write codes. Thanks

  • @lucasdiogomelo520
    @lucasdiogomelo520 3 года назад +1

    simply great, awesome
    wish i can give thousands of likes

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

    man you are amazing. Thank you for this.

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

    THE RETURN OF THE KING

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

    Very useful...... Please make videos regularly on flutter............ After 2 month's

    • @RetroPortalStudio
      @RetroPortalStudio  4 года назад +1

      Glad you found this useful 💙 I am trying my best mate! Will try keeping up with regular uploads!

  • @CreativeBracket
    @CreativeBracket 4 года назад +1

    That was a great tutorial! Clear and concise, thank you.

  • @mruduladdipalli5417
    @mruduladdipalli5417 3 года назад +1

    Awesome Explaination !!!

  • @Andi199656
    @Andi199656 3 года назад +1

    Awesome tutorial! Thanks a lot

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

    Totally worth it to show how to create progress indicator in this video thanks a lot.
    A question if i want to start from a different angle do i have just to change the value of startAngle in the sweepGradient widget ?

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

      Excuse me, did you figure out how to change the start from a different angle?

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

    Really nice!

  • @LeagueRandomPlayer
    @LeagueRandomPlayer 9 месяцев назад +1

    Excellent video

  • @ahmadelshafee1105
    @ahmadelshafee1105 4 года назад +1

    Really thank you for your video it’s a very useful video

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

    I want to give one more like 😊

  • @danielaraujo5857
    @danielaraujo5857 3 года назад

    Thank you very much i needed this tutorial (:

  • @_birdy_birdy
    @_birdy_birdy 4 года назад +1

    You don't need to wrap Scaffold inside SafeArea()
    unless you aren't using AppBar() then you need to wrap the Scaffold body inside SafeArea().
    AppBar() by default wraped inside SafeArea()
    By the way keep making such videos on flutter.

  • @maheshgvelly
    @maheshgvelly 4 года назад +1

    Such a wonderful Tutorial very useful. How can we put multiple circular bars in a screen?

  • @DexterTalha
    @DexterTalha 4 года назад +5

    Missed u bro🥺

  • @sadhlife
    @sadhlife 4 года назад +1

    absolute legend

  • @rahulb.4223
    @rahulb.4223 4 года назад +1

    Can you make a video on TypeHeadField (Autocomplete TextField)?

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

    Nice explanation and gud tutorial.. How to pause/play in this??

  • @collinsattafuah2947
    @collinsattafuah2947 Год назад +1

    Very useful

  • @josemanuelromero4138
    @josemanuelromero4138 4 года назад +1

    Thanks very useful the vídeo !!!!!

  • @hatodge
    @hatodge 3 года назад +1

    I'm a beginner dev. Why do you use the SweepGradient when in the end you dont see any of that gradient. I mean the progress indicator is only filling up in blue. The transparent is unnecessary. Right?

    • @RetroPortalStudio
      @RetroPortalStudio  3 года назад

      I think this cannot be well explained in this comment. There is an article linked in the description of this video. That will help and consider learning about masking... what it is and how it is done 😁

  • @hoggish
    @hoggish 4 года назад +1

    Come on dude i am waiting more advanced topics from you)

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

      I have a lot to teach, scripting and creating quality content takes a lot of time. And because i currently have a lot on my plate i am trying to balance things as best as it can be possible for me.! I hope i'll be able to prepare some mode advanced stuff soon! ✌😁 Anyways i hope you enjoyed the tutorial mate!

    • @leonvanrijswijk8409
      @leonvanrijswijk8409 4 года назад +1

      @@RetroPortalStudio Keeping the balance is good. Don't let them rush you.

  • @BrYarDJ
    @BrYarDJ 4 года назад +1

    great tutorial

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

    thank you for the tutorial, but is there a way to add +10 sec function as a button that allows you to add some seconds to the timer while its counting down

  • @darth1
    @darth1 4 года назад +1

    How can I show seconds with this indicator? I couldn't do it. I am beginer. :/

  • @archangeltactics3802
    @archangeltactics3802 4 года назад +1

    OMG THANK YOU!

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

    It's great. ❤❤❤❤❤

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

    ShaderMask is not working properly on my image. It creates colors in circular image but not only on visible area but it applied on overall picture

  • @BenSmith-et9fv
    @BenSmith-et9fv 4 года назад +1

    GREAT!

  • @alejosandu
    @alejosandu 4 года назад +1

    Pretty dope

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

    nice!

  • @ibnomer7038
    @ibnomer7038 4 года назад +1

    Greet job sir

  • @schmoogen
    @schmoogen 4 года назад +1

    Is there a drastic performance difference between this and a custom painter?

    • @RetroPortalStudio
      @RetroPortalStudio  4 года назад +1

      Well, the difference in complexity is much more than performance in this case but there are certain use cases like Audio Waverforms and other progress indications where this method is really convenient in comparisom to Custom Painter

  • @vijayprajapati7484
    @vijayprajapati7484 4 года назад +1

    Sir please help me..... whenever i build apk of my flutter project and send to someone else and install then the app is crashing
    .....what the reason and how i can solve it... please tell me....it project of my last year....so i hope you understand....

  • @masoudh6856
    @masoudh6856 4 года назад +1

    so amazing

  • @sandikharahardi7702
    @sandikharahardi7702 3 года назад

    I like it !

  • @Adnankhan545
    @Adnankhan545 3 года назад +1

    awesome..

  • @7mada89
    @7mada89 4 года назад +1

    Nice trick

  • @muhammadharis1923
    @muhammadharis1923 3 года назад

    Sir really appreciated But i am getting an error please help me to solve

  • @dimasmaulana8227
    @dimasmaulana8227 3 года назад +1

    sir i want to ask, i get an error when i add a value to the stops, the error is like this, The element type 'Object?' can't be assigned to the list type 'double'. any suggestions ?, thank you sir

    • @saifmoh7193
      @saifmoh7193 3 года назад

      same problem

    • @saifmoh7193
      @saifmoh7193 3 года назад +1

      (context,double value,child)
      write that inside builder

    • @akanshasen2986
      @akanshasen2986 3 года назад +1

      @@saifmoh7193 Ohh thanks heaps mate!! I was actually looking for the solution!

  • @darth1
    @darth1 4 года назад

    How to use this as a home screeen widget?

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

    how to restart again

  • @Zeeshankhan-fg6hi
    @Zeeshankhan-fg6hi 4 года назад +1

    Great

  • @iGhostr
    @iGhostr 4 года назад

    This is waay too complicated, use Rive instead

  • @ГеоргийБербат
    @ГеоргийБербат 3 года назад

    Trash. Work with shaders greatly affects performance