Create a Shimmer Loading Effect on Flutter

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/abu...
►For the 3D intro, I'm using Rotato: bit.ly/3heGagj
►Support Us: / theflutterway
► Social Media
GitHub: github.com/abu...
Twitter: / theflutterway
Twitter: / abuanwar072 (my personal profile)
Facebook: / theflutterway
► Timestamps
0:00 Intro
Thanks for watching!
Make sure to like + Subscribe For More!

[@iamnexom]

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]

Fact vro 😂😅

[@wesleysilveira5692]

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

[@Abhicoder]

That's amazing sir! 👏

[@codeVictor]

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

[@TheFlutterWay]

Glad to hear that!

[@taggoeshere]

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

[@TheFlutterWay]

Best wishes for you!

[@johnny200]

Great idea. As always. Thank you.

[@TheFlutterWay]

Thank you! Cheers!

[@juansalcedo6428]

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

[@robertmrobo8954]

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.

[@iam_ya7]

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

[@TheFlutterWay]

Enjoy!

[@mohanpreetsingh716]

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

[@azam2390]

Which extension do you use for that stripped lining?

[@TheFlutterWay]

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

[@MrAwesomeTony]

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

[@TheFlutterWay]

You're welcome

[@imudasirk3]

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

[@blackbeardplay]

Sir please make a full course of Flutter.

[@TheFlutterWay]

I'm planing for that, keep supporting us!

[@blackbeardplay]

Ok sir we are waiting for your course.

[@tranuc2258]

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

[@jhoelccariquispe6998]

Thanks for sharing. It looks great!!

[@TheFlutterWay]

Thanks for watching!

[@bashiruibrahim8443]

Thanks for the good work as always

[@TheFlutterWay]

Our pleasure!

[@robertmrobo8954]

@@TheFlutterWay
Yes we are

[@mindyourbusiness46]

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]

Can use Mediaquery to get device width?

[@prshendra]

Awesome work sir!

[@lo9arithm]

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

[@khangluonguc5187]

Great video

[@rojo8399]

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

[@TheFlutterWay]

Thanks for your suggestion, fixed on next video.

[@sogbeydaniel8074]

I just subscribed . Great content

[@krishkanojia2850]

So simple and easily done.

[@naushadhusain443]

Very nice

[@amirhafizkhan9304]

Much needed one Thank you

[@TheFlutterWay]

You’re welcome 😊

[@EisGlockner]

Awesome video! Thanks!

[@user-wr4yl7tx3w]

Is shimmer the shadow outline that appears while loading?

[@TheFlutterWay]

Yep

[@nirantarlek]

Great video, Thks

[@jacsdev]

nice bro!

[@TheFlutterWay]

Thanks 🔥

[@wesleybarnes5376]

Make it shimmer! Thanks :-)

[@obviousabsurdity3181]

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

[@juanmacias5922]

Very clever, good job!

[@TheFlutterWay]

Thank you! Cheers!

[@biniyamd4709]

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]

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

[@junveld4830]

looks really fine and easy!

[@TheFlutterWay]

Glad you like it!

[@AnoopThiruonam]

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

[@pkumarjunp]

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

[@TheFlutterWay]

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

[@samama-36-0]

A great & helpful video ❤🙌

[@TheFlutterWay]

So glad!

[@hoxorious]

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

[@TheFlutterWay]

I think no!

[@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

[@TheFlutterWay]

Try to remove the padding

[@bhardwaj_abhi3421]

amazing .

[@amir_gh_dev]

Very Goooooooooooood❤👌

[@MohamedGaberMigaber]

Amazing as usual 😍

[@TheFlutterWay]

You're the best!

[@krzysztofk.8842]

Did i miss the shimmer part ?

[@marmikpatel5371]

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

[@TheFlutterWay]

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

[@ashanknimsara]

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

[@bytmitriy5301]

Genius

[@MohammedAlkhatieb92]

Thanks 👍

[@TheFlutterWay]

Welcome 👍

[@patrickwitter4437]

Wonderful video thnx

[@TheFlutterWay]

Glad you liked it

[@PrateekAher]

But the widget isn't shimmering while loading.

[@TheFlutterWay]

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

[@TheChartwhisperers]

What is the need of adding an expanded widget?

[@TheChartwhisperers]

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

[@TheFlutterWay]

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

[@TheChartwhisperers]

@@TheFlutterWay okay 👍

[@benampouala]

Great!

[@TheFlutterWay]

Glad you like it!

[@hasinulhudaenu8098]

❤❤

[@diptenusarkar]

Yes 🥰

[@jxstxn__3958]

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

[@heyoung548]

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

[@radurot7673]

Please stop those popping sounds

[@S-Lomar]

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

[@nazmulrana6503]

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]

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

[@nazmulrana6503]

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

[@RoTheNex]

🙂 joss 👍

[@TheFlutterWay]

✌

[@pokerface4064]

this just color, not include animation

[@TheFlutterWay]

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

[@agamjotsingh7371]

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

[@TheFlutterWay]

😜

[@aniketkasar7842]

That popping sound is very irritating

[@meansnada]

such an annoying sound, :/

[@TheFlutterWay]

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

[@rizkiadisaputra5971]

I thought youre Indonesian

[@TheFlutterWay]

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

[@irjayjay]

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

[@bgdeyam]

Not beautiful

[@CHITUS]

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.

[@philmingo]

Awesome stuff ! thanks.

[@TheFlutterWay]

My pleasure!

[@omartec7964]

Great video

[@TheFlutterWay]

Thanks for watching!