Flutter Tutorial - Shimmer Loading Animation | Shimmer Effect

Поділитися
Вставка
  • Опубліковано 23 лип 2024
  • Create the Flutter Shimmer Effect with a Shimmer Loading Animation while loading data from the server in Flutter.
    Click here to Subscribe to Johannes Milke: ua-cam.com/users/JohannesMilke...
    👉 12 Week Flutter Training | heyflutter.com
    👉 Flutter Masterclass Courses | heyflutter.com/masterclass
    Source Code | github.com/JohannesMilke/shim...
    My Courses | heyflutter.com
    Follow Newsletter | johannesmilke.com/#/newsletter
    SUBSCRIBE HERE
    bit.ly/JohannesMilke
    SUPPORT & SPONSOR ME
    github.com/sponsors/JohannesM...
    RESOURCES
    Precache Images Tutorial: • Flutter Tutorial - Pre...
    Cached Network Image Tutorial: • Flutter Tutorial - Cac...
    Image Tutorial: • Flutter Tutorial - Flu...
    Image Advanced Tutorial: • Flutter Tutorial - Flu...
    FadeInImage Tutorial: • Flutter Tutorial - Fad...
    Basic Image Filter Tutorial: • Flutter Tutorial - Pho...
    Advanced Image Filter Tutorial: • Flutter Tutorial - Pho...
    SQFlite SQL Database Tutorial: • Flutter Tutorial - SQL...
    Hive NoSQL Database Tutorial: • Flutter Tutorial - Hiv...
    Reduce Video Size By Compressing Tutorial: • Flutter Tutorial - Com...
    Pick & Crop Images Tutorial: • Flutter Tutorial - Ima...
    Create PDF With Images Tutorial: • Flutter Tutorial - Cre...
    Stacked Images Tutorial: • Flutter Tutorial - How...
    Fitness UI App Tutorial: • Flutter Tutorial - 1/2...
    Onboarding UI Screen Tutorial: • Flutter Tutorial - Onb...
    Download Files From Firebase Storage Tutorial: • Flutter Tutorial - Dow...
    Upload Files To Firebase Storage Tutorial: • Flutter Tutorial - Upl...
    TIMELINE
    0:00 Introduction Shimmer Loading Animation
    0:27 Introduction Shimmer Package
    1:00 Create List View For Shimmer Effect
    1:45 Create Shimmer Effect Widget
    3:18 Create Rounded Shimmer Effect / Circular Shimmer Effect
    4:58 Create Loaded ListView
    7:33 Switch Between Shimmer Loading Animation & Loaded ListView
    9:02 Refresh ListView
    9:29 Change Animation Speed Of Shimmer Effect
    9:53 Change Width Of Shimmer Effect / Shimmer Effect Width Not Working?
    SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
    *********
    SOCIAL MEDIA: Follow Us :-)
    Twitter | / heyflutter_
    Linkedin | / heyflutter
    LEARN MORE
    SOURCE CODE | github.com/JohannesMilke
    ARTICLES | / johannesmilke
    PLAYLISTS
    All Flutter Videos | • Flutter Tutorial - Flu...
    Widgets - Flutter | • Flutter Tutorial - Flu...
    Plugins - Flutter | • Flutter Tutorial - Flu...
    Animations - Flutter | • Flutter Tutorial - Tra...
    Designs - Flutter | • Flutter Tutorial - Flu...
    Firebase - Flutter | • Flutter Tutorial - Pag...
    State Management - Flutter | • Flutter Tutorial - Riv...
    CREDITS
    Copyright song "Corporate Technology" by scottholmesmusic.com
    #Flutter #Tutorial #JohannesMilke
    LIKE & SHARE & ACTIVATE THE BELL
    Thanks For Watching :-)
    bit.ly/JohannesMilke
  • Наука та технологія

КОМЕНТАРІ • 48

  • @HeyFlutter
    @HeyFlutter  2 роки тому

    This might help you :)
    👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com
    Source Code: github.com/JohannesMilke/shimmer_loading_effect_example
    Precache Images Tutorial: ua-cam.com/video/R9md60dIwd0/v-deo.html
    Cached Network Image Tutorial: ua-cam.com/video/6wvD-Z-9ZRM/v-deo.html
    Image Tutorial: ua-cam.com/video/JDDoN2THwug/v-deo.html
    Image Advanced Tutorial: ua-cam.com/video/7HoEsLvvRPg/v-deo.html
    FadeInImage Tutorial: ua-cam.com/video/P4xkAEOsQRI/v-deo.html
    Basic Image Filter Tutorial: ua-cam.com/video/v3doTuJF-lE/v-deo.html
    Advanced Image Filter Tutorial: ua-cam.com/video/81wOJsmFKU4/v-deo.html
    SQFlite SQL Database Tutorial: ua-cam.com/video/UpKrhZ0Hppk/v-deo.html
    Hive NoSQL Database Tutorial: ua-cam.com/video/w8cZKm9s228/v-deo.html
    Reduce Video Size By Compressing Tutorial: ua-cam.com/video/JUeWeZXn71M/v-deo.html
    Pick & Crop Images Tutorial: ua-cam.com/video/pXbBTJt7frM/v-deo.html
    Create PDF With Images Tutorial: ua-cam.com/video/8j6GKtpRkow/v-deo.html
    Stacked Images Tutorial: ua-cam.com/video/ut9CeTQRax0/v-deo.html
    Fitness UI App Tutorial: ua-cam.com/video/4KQ-f_6Y7p8/v-deo.html
    Onboarding UI Screen Tutorial: ua-cam.com/video/CQlA2p--oEg/v-deo.html
    Download Files From Firebase Storage Tutorial: ua-cam.com/video/YA_fHCF_EYc/v-deo.html
    Upload Files To Firebase Storage Tutorial: ua-cam.com/video/dmZ9Tg9k13U/v-deo.html

  • @startswithzed
    @startswithzed 2 роки тому +2

    The quality of your content is very good and consistent. Thank you for these videos.

  • @riyatyagi9031
    @riyatyagi9031 2 роки тому

    I really appreciate your videos. Very informative and definite. Watch your all videos

  • @SunGkd123
    @SunGkd123 3 роки тому +1

    Very informative I'll definitely use it in my app . Thanks for this tutorial 👍😁

  • @DENCODER0000
    @DENCODER0000 3 роки тому +1

    this video is really very helpful sir thank you for making this I was finding this stuff since long time

  • @mohammadshahid9820
    @mohammadshahid9820 2 роки тому +1

    Great video and it was really helpful..Thank u so much bro 😊

  • @darul-asar381
    @darul-asar381 3 роки тому +1

    Great job 👍 I'll try it soon in my project

  • @dannycastro1710
    @dannycastro1710 3 роки тому

    Awesome video... very easy to learn with your explanation

  • @shyamgurunath5876
    @shyamgurunath5876 3 роки тому +2

    Johannes really helpful, I’m going to try this in my to do app...

  • @KrastyoKrastev
    @KrastyoKrastev 3 роки тому +1

    Great video as always! You deserve a lot more subs :)

  • @emir7345
    @emir7345 3 роки тому +1

    you are a great developer ❤️

  • @hashankannangara8723
    @hashankannangara8723 3 роки тому

    Thats awesome 🤩

  • @MdSiam-kw5ox
    @MdSiam-kw5ox 2 роки тому

    Thanks for sharing this tutorial.

  • @programingtales7514
    @programingtales7514 2 роки тому

    Always the best thank you ❤

  • @aryanchauhan2124
    @aryanchauhan2124 3 роки тому

    Bro u r so awesome. Thanks a lot for video!

  • @pierremarais7669
    @pierremarais7669 3 роки тому

    Thanks Johannes I am a sponsor from now on, this video was great again

  • @ricard458
    @ricard458 3 роки тому

    Beautiful

  • @wahyualfandi611
    @wahyualfandi611 3 роки тому

    Amazing!

  • @officialismailshah
    @officialismailshah 3 роки тому

    Love your content ❤️❤️❤️❤️❤️

  • @excellencemichel4875
    @excellencemichel4875 3 роки тому

    Good job, thank you

  • @mehmethankaya9974
    @mehmethankaya9974 3 роки тому

    Awesome!

  • @abdelilahbouhou5297
    @abdelilahbouhou5297 2 роки тому

    number one ❤️❤️❤️

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

    thank you so much for the wonderful video sir it is helpful for me and my team

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

      You are welcome, @pravinprince3221 😊

  • @mohammedhamimed1161
    @mohammedhamimed1161 11 місяців тому

    Excellent 👍

    • @HeyFlutter
      @HeyFlutter  11 місяців тому

      Thank you, @mohammedhamimed1161! 🙂

  • @rv9570
    @rv9570 3 роки тому +2

    Can you please create a video of full in detail process of app deployment from flutter to google app store, including configuration , icon set up, manifest file and everything. It will be really helpful. thanks in advance

  • @mayur16
    @mayur16 2 роки тому

    Quality content....

  • @shohruhmasharipov8524
    @shohruhmasharipov8524 3 роки тому

    Thanks master

  • @farhanahmad-bv1mx
    @farhanahmad-bv1mx 10 місяців тому

    one of the good example of namedConstructor 👍

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

      Glad to hear that, Thank you @farhanahmad-bv1mx! 😊

  • @jamesugwuoke7074
    @jamesugwuoke7074 2 роки тому

    A wonderful video. Keep on firing

    • @HeyFlutter
      @HeyFlutter  2 роки тому

      Thank you, JAMES UGWUOKE! 🙂

  • @darshaanaghicha8023
    @darshaanaghicha8023 3 роки тому

    thank you

  • @eNONO-ot4zh
    @eNONO-ot4zh 3 роки тому

    Thank u👍👍

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

    nice video

  • @muhammadrasul1581
    @muhammadrasul1581 3 роки тому

    ohh nice, also can you do a video about audio controller like what u have in 0:17 i know it was just a video but how can i do it to my flutter application also let the audio be played once user locked his phone? thanks

    • @muhammadrasul1581
      @muhammadrasul1581 3 роки тому

      @@HeyFlutter omg nice dude, glad you thinking about it 😊

  • @ionkhan
    @ionkhan 3 роки тому +1

    Amazing video. I wanted to ask how can we use animations package right after Shimmer effect? and please can you please make a video on animations package?
    I created to animations for my listview builder
    both of them are SlideTransitions.
    But they load only at init state. I want it to be like If the index %2 ==0 then the slide transition comes from left and if its not equal then transition comes from right.
    I have already achieved this. But I want the animation to be on scroll and as soon as I start scrolling the animations starts running so we save more ram rather than using animation in init state

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

    Greetings bro, how can I manage the time it takes to download the resources to be displayed in the application (images), taking into account that it depends on the speed of the internet.
    Thank u’

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

      Thank you, Alejandro Israel! 🙂. It depends on the speed of internet.

  • @zakblacki
    @zakblacki 3 роки тому

    How to load shimmer with firestore example please

    • @zakblacki
      @zakblacki 3 роки тому

      @@HeyFlutter if possible using getX package not stream

  • @allintamilvideos6005
    @allintamilvideos6005 3 роки тому +1

    Make facebook Auth 2021 firebase 😉

  • @MohammadAli-vj4sr
    @MohammadAli-vj4sr 3 роки тому

    as usual, couldn't satisfied from your video spliting . please 🙏 don't spilt video..😔😔