Create a Shimmer Loading Effect on Flutter

แชร์
ฝัง
  • เผยแพร่เมื่อ 30 ธ.ค. 2021
  • Loading times are unavoidable in application development. From a user experience (UX) perspective, the most important thing is to show your users that loading is taking place. One popular approach to communicate to users that data is loading is to display a chrome color with a shimmer animation over the shapes that approximate the type of content that is loading. Show you how easily you can make it using flutter.
    ►Source Code: github.com/abuanwar072/Flutte...
    ►For the 3D intro, I'm using Rotato: bit.ly/3heGagj
    ►Support Us: / theflutterway
    ► Social Media
    GitHub: github.com/abuanwar072
    Twitter: / theflutterway
    Twitter: / abuanwar072 (my personal profile)
    Facebook: / theflutterway
    ► Timestamps
    0:00 Intro
    Thanks for watching!
    Make sure to like + Subscribe For More!

ความคิดเห็น • 111

  • @iamnexom
    @iamnexom 2 ปีที่แล้ว +37

    I wasted thousands of dollars in college and learned nothing compared to what i learned here in this channel for free. You guys are amazing . You people deserve a noble prize for what you are doing here.

    • @015dayanidi3
      @015dayanidi3 6 หลายเดือนก่อน

      Fact vro 😂😅

    • @wesleysilveira5692
      @wesleysilveira5692 5 หลายเดือนก่อน

      well, you need to waste dollars in courses. college will just give you the connections you need

  • @codeVictor
    @codeVictor 2 ปีที่แล้ว +1

    Thanks!!!
    hearing your voice makes it easier for me to learn.

  • @johnny200
    @johnny200 2 ปีที่แล้ว +5

    Great idea. As always. Thank you.

  • @prshendra
    @prshendra 2 ปีที่แล้ว

    Awesome work sir!

  • @lo9arithm
    @lo9arithm ปีที่แล้ว

    Amazing.. just what I'm looking for.. thank you ❣️

  • @imudasirk3
    @imudasirk3 9 หลายเดือนก่อน

    Thanks for this informative video. You got a new subscriber today

  • @jhoelccariquispe6998
    @jhoelccariquispe6998 2 ปีที่แล้ว +1

    Thanks for sharing. It looks great!!

  • @krishkanojia2850
    @krishkanojia2850 2 ปีที่แล้ว

    So simple and easily done.

  • @MohamedGaberMigaber
    @MohamedGaberMigaber 2 ปีที่แล้ว

    Amazing as usual 😍

  • @EisGlockner
    @EisGlockner 2 ปีที่แล้ว

    Awesome video! Thanks!

  • @bashiruibrahim8443
    @bashiruibrahim8443 2 ปีที่แล้ว +1

    Thanks for the good work as always

  • @juanmacias5922
    @juanmacias5922 2 ปีที่แล้ว

    Very clever, good job!

  • @samamamajeed9893
    @samamamajeed9893 2 ปีที่แล้ว

    A great & helpful video ❤🙌

  • @sogbeydaniel8074
    @sogbeydaniel8074 2 ปีที่แล้ว

    I just subscribed . Great content

  • @iam_ya7
    @iam_ya7 2 ปีที่แล้ว +2

    okay, now this is really great :) thanks mate...

  • @amirhafizkhan9304
    @amirhafizkhan9304 2 ปีที่แล้ว

    Much needed one Thank you

  • @junveld4830
    @junveld4830 2 ปีที่แล้ว

    looks really fine and easy!

  • @RandomWebDev
    @RandomWebDev 2 ปีที่แล้ว +6

    Inspiring, maybe I should pick up my flutter development course again for fun!

  • @naushadhusain443
    @naushadhusain443 2 หลายเดือนก่อน

    Very nice

  • @philmingo
    @philmingo 2 ปีที่แล้ว

    Awesome stuff ! thanks.

  • @khangluonguc5187
    @khangluonguc5187 ปีที่แล้ว

    Great video

  • @nirantarlek
    @nirantarlek ปีที่แล้ว

    Great video, Thks

  • @jacsdev
    @jacsdev 11 หลายเดือนก่อน +1

    nice bro!

  • @amir_334
    @amir_334 5 หลายเดือนก่อน

    Very Goooooooooooood❤👌

  • @bhardwaj_abhi3421
    @bhardwaj_abhi3421 ปีที่แล้ว

    amazing .

  • @patrickwitter4437
    @patrickwitter4437 2 ปีที่แล้ว

    Wonderful video thnx

  • @mohanpreetsingh716
    @mohanpreetsingh716 2 ปีที่แล้ว +2

    I've usually seen the skeleton container shine while loading, is there a way to achieve that effect

  • @MrAwesomeTony
    @MrAwesomeTony 2 ปีที่แล้ว

    Thankfully there is CC, I really can't follow what he said.
    Easy to understand thought, thanks for sharing.

  • @hoxorious
    @hoxorious 2 ปีที่แล้ว +1

    Great video 👍 BTW isn’t there a skeleton widget (with fading effect) already available as an standard widget in Flutter?

  • @juansalcedo6428
    @juansalcedo6428 2 ปีที่แล้ว +1

    There is a shimmer package that added a cool effect off loading for you container.

    • @robertmrobo8954
      @robertmrobo8954 2 ปีที่แล้ว

      That's what I'm asking myself, if it's worth reinventing the wheel.
      The youtuber here should have mentioned there's a better way of achieving this and this is only for learning purposes.

  • @MohammedAlkhatieb92
    @MohammedAlkhatieb92 2 ปีที่แล้ว

    Thanks 👍

  • @wesleybarnes5376
    @wesleybarnes5376 ปีที่แล้ว

    Make it shimmer! Thanks :-)

  • @bytmitriy5301
    @bytmitriy5301 2 ปีที่แล้ว

    Genius

  • @mindyourbusiness46
    @mindyourbusiness46 2 ปีที่แล้ว +2

    Thank You so much for this. Amazing lecture!!!
    If possible can you also address these queries I have:
    1) Since width is fixed in the skeleton widget, won't the effect look different in a phone that has a broader screen?
    2) I thought of using FittedBox and Expanded but I keep getting Renderflex errors. Can you please make a video on how to deal with these errors while trying to make the UI a bit more responsive ?

    • @iamkartiknayak
      @iamkartiknayak ปีที่แล้ว

      Can use Mediaquery to get device width?

  • @tranuc2258
    @tranuc2258 2 ปีที่แล้ว

    Great chanel ever. Can i have name of extension that colorful your brackets? And the dash in blankspace before the code ?

  • @AnoopThiruonam
    @AnoopThiruonam 2 ปีที่แล้ว

    Hi, nice content! The source code is not working and showing some error with Kotlin. What fonts are you using for the news headline?

  • @blackbeardplay
    @blackbeardplay 2 ปีที่แล้ว +3

    Sir please make a full course of Flutter.

    • @TheFlutterWay
      @TheFlutterWay  2 ปีที่แล้ว +3

      I'm planing for that, keep supporting us!

    • @blackbeardplay
      @blackbeardplay 2 ปีที่แล้ว

      Ok sir we are waiting for your course.

  • @benampouala
    @benampouala 2 ปีที่แล้ว

    Great!

  • @pkumarjunp
    @pkumarjunp 2 ปีที่แล้ว

    Shimmer effect also contains a sliding animation i guess. Just like 'Slide to open' in ios lock screen.

    • @TheFlutterWay
      @TheFlutterWay  2 ปีที่แล้ว +1

      Right now most of the big apps using color only, because it shows small amount of time, apps like TH-cam, LinkedIn

  • @jxstxn__3958
    @jxstxn__3958 2 ปีที่แล้ว

    If you guys want to use a better SizedBox I recommend you the Gap Package 👌
    Nice Video as always

  • @diptenusarkar
    @diptenusarkar 2 ปีที่แล้ว

    Yes 🥰

  • @azam2390
    @azam2390 2 ปีที่แล้ว +5

    Which extension do you use for that stripped lining?

    • @TheFlutterWay
      @TheFlutterWay  2 ปีที่แล้ว +2

      Next I will create a video on that, are you guys ready for that!

  • @ashanknimsara
    @ashanknimsara ปีที่แล้ว

    Anyone know is it a extension, display like dash lines in editor like this?

  • @RoTheNex
    @RoTheNex 2 ปีที่แล้ว

    🙂 joss 👍

  • @rojo8399
    @rojo8399 2 ปีที่แล้ว +1

    Do you NEED the pop sound effect for every single point?

    • @TheFlutterWay
      @TheFlutterWay  2 ปีที่แล้ว +1

      Thanks for your suggestion, fixed on next video.

  • @thoughtsonthis154
    @thoughtsonthis154 ปีที่แล้ว

    When I tried this,I add some much space in between each newcard and I am wondering why that is,I’ve been trying to reduce those spaces but I can’t

  • @biniyamd4709
    @biniyamd4709 2 ปีที่แล้ว +1

    pls less of that pop sound effect...the old video editings were near perfect
    I'm a big fan of this channel...it helped me a lot...much love

    • @TheFlutterWay
      @TheFlutterWay  2 ปีที่แล้ว

      Thanks for your great feedback, next video we will reduce it.

  • @user-wr4yl7tx3w
    @user-wr4yl7tx3w 2 ปีที่แล้ว +1

    Is shimmer the shadow outline that appears while loading?

  • @krzysztofk.8842
    @krzysztofk.8842 2 ปีที่แล้ว

    Did i miss the shimmer part ?

  • @S-Lomar
    @S-Lomar 7 หลายเดือนก่อน +1

    Welcome 😊🥰🥰😊🤣😘🤣😊👋😊😘😘🥰🥰😊

  • @marmikpatel5371
    @marmikpatel5371 2 ปีที่แล้ว

    Please make Flutter UI for LMS(Learning Management System)
    Btw, which Background music do you use?

    • @TheFlutterWay
      @TheFlutterWay  2 ปีที่แล้ว

      Noted!
      Item Title: Ambient Piano
      Item URL: elements.envato.com/ambient-piano-AEC3SH5

  • @heyoung548
    @heyoung548 2 ปีที่แล้ว

    If there is animation, it would be a lot better.

  • @nazmulrana6503
    @nazmulrana6503 2 ปีที่แล้ว

    You are great❤️... Please make an Full Ecommerce or any others apps project with the help of your Awesome/Beautiful UI Design Skilled and best state management approach/ package with RestAPI and Industry Standard+ Best Practice Code.....Sry for bad English...
    I think...I said a lot 😁 ... but I hope you will try to do it...💝💝... Waiting for your response...!

    • @TheFlutterWay
      @TheFlutterWay  2 ปีที่แล้ว +2

      At first thanks for your great suggestion, I'm planing to create a course where I will add those!

    • @nazmulrana6503
      @nazmulrana6503 2 ปีที่แล้ว

      @@TheFlutterWay try to make this course free...!

  • @obviousabsurdity3181
    @obviousabsurdity3181 ปีที่แล้ว

    Did I miss something? Wheres the "Shimmer" part lol

  • @PrateekAher
    @PrateekAher 2 ปีที่แล้ว

    But the widget isn't shimmering while loading.

    • @TheFlutterWay
      @TheFlutterWay  2 ปีที่แล้ว

      Actually it shows for few seconds, and even on TH-cam they are not animated shimmer effect!

  • @TheChartwhisperers
    @TheChartwhisperers 2 ปีที่แล้ว

    What is the need of adding an expanded widget?

    • @TheChartwhisperers
      @TheChartwhisperers 2 ปีที่แล้ว

      I feel like there is no need for the expanded widget since it has already be given a defined height

    • @TheFlutterWay
      @TheFlutterWay  2 ปีที่แล้ว

      I'm adding it so that it takes maximum width.

    • @TheChartwhisperers
      @TheChartwhisperers 2 ปีที่แล้ว

      @@TheFlutterWay okay 👍

  • @agamjotsingh7371
    @agamjotsingh7371 2 ปีที่แล้ว

    was I the only one who saw a type on 0:01

  • @radurot7673
    @radurot7673 2 ปีที่แล้ว +4

    Please stop those popping sounds

  • @pokerface4064
    @pokerface4064 2 ปีที่แล้ว

    this just color, not include animation

    • @TheFlutterWay
      @TheFlutterWay  2 ปีที่แล้ว

      Right now most of the big apps using color only, because it shows small amount of time, apps like TH-cam, LinkedIn

  • @aniketkasar7842
    @aniketkasar7842 14 วันที่ผ่านมา

    That popping sound is very irritating

  • @rizkiadisaputra5971
    @rizkiadisaputra5971 2 ปีที่แล้ว

    I thought youre Indonesian

    • @TheFlutterWay
      @TheFlutterWay  2 ปีที่แล้ว

      😜😜
      I'm from Bangladesh, but I love you guys!❤️

  • @meansnada
    @meansnada 2 ปีที่แล้ว +2

    such an annoying sound, :/

    • @TheFlutterWay
      @TheFlutterWay  2 ปีที่แล้ว

      Thanks for your feedback, we will try to fixe it on our next video!

  • @irjayjay
    @irjayjay ปีที่แล้ว

    That popping sound is so annoying, had to watch with the sound off.

  • @bgdeyam
    @bgdeyam 2 ปีที่แล้ว

    Not beautiful

  • @CHITUS
    @CHITUS 2 ปีที่แล้ว

    I wasted thousands of dollars in college and learned nothing compared to what i learned here in this channel for free. You guys are amazing . You people deserve a noble prize for what you are doing here.

  • @omartec7964
    @omartec7964 2 ปีที่แล้ว

    Great video