How To Add Shimmer Effect to Your App (And Why You Should)

in this video I'm going to show you how to do this Shimmer effect this happens when your app is loading some data now this isn't just a pretty or cool effect this is actually important for the user experience and here's why so you've got an app and you've got this first screen here and you want to navigate to the second screen so you might think oh you know you just click the button and you go to it but really what happens is that you've got some time in between here let's say four seconds while this data is being loaded now of course this is only if you're making a network request say from your server or a third-party API and if you don't have anything within those seconds this is what you're going to see it's going to be blank and the problem with blank is that it's ambiguous it could mean many different things it could mean it's broken it could mean it's done and it didn't return any data or it could mean it's still working it's under determined a blank space in your app where there's clearly supposed to be data is unclear well you can make this more clear by adding that Shimmer effect and this does two helpful things for your users and both of these two improvements are moving your user closer to that second screen it's giving you information about the status of the app the system first it gives your users an idea of the final layout so notice with each one of these products they have a height a width a spacing in between a background color and all of those design properties you're able to communicate without having received the data back from your server so you're getting closer to the final layout secondly it provides movement and movement as opposed to just a sort of static white frame communicates that there's something going on there's something working namely processing is going on network requests or something but it's moving you closer to the data it indicates to your users that hey my app is working on something it's not dead it's not broken it's working on something so adding the Shimmer effect gets the users closer in two aspects namely layout and movement to the Final loading of the screen so let me show you how to do this in flutter flow so I've got my page here it's just a template page that I grabbed from our templates right here and I'm grabbing some data from this API called dummy Json that's just giving me some products back and if I come over to my column I've just got the back end query set up for that API call and we're all good now right here is where we'll set up our Shimmer but we haven't created it yet so let's create that Shimmer and we're going to do that by creating a component a component that is just a paired down version of this column right here so let's just copy this column right here Ctrl C and make a new page I'm just going to call this Shimmer component and create a new and we're just going to paste this in here replace it and just so we can see our items let's just change the background color to complete White there we go we can see it so next we want to get rid of everything except for the sort of skeletal structure so if we just look into each one of these items we can see that they're containers and then they have a row image text and so we can just delete all of these rows but before we do that we gotta figure out how the height is determined because if I delete this you see that our container is going to collapse because the height is being set by something inside the container so let's just go back there and the best way to figure out the height is to look at the largest items so if we just move down the hierarchy inside and look at the row and see okay we've got eight pixels of padding on the top and the bottom that we can see that visualized in the editor right here but then we go down to the next largest thing that's our image and if we scroll down we can see ah yeah here's where our height is coming from so we're getting 70 pixels of height from our image and then we just add that padding from the row that's 16 so we get 86 okay now we know it's so let's just in our first one here come over to our container and let's just call this 86 and the height should stay the same because we are just stipulating what was already computed by the other elements inside so now we can just delete our row and nothing should happen beautiful now we can just delete everything else because we're going to create that Shimmer and then once we have that set up then we'll duplicate the elements so let's just delete everything all right great so for that Shimmer you just kind of have this like white blurry thing that moves across and you have a lot of options here because all you want it to be is subtle motion so you can make this match whatever your design system is and but I'm just going to do the most common one you see and that's just a light white Shimmer just like a light white bar and I just made a white image of like 200 by 200 pixels and uploaded into my assets right here and that's what we're going to use for our Shimmer but we want to blur it and we want to rotate it because at an angle so we're going to need three things we're going to need a blur widget a transform widget in the image so first let's add in our blur then a transform widget and then finally let's add in an image beautiful let's come over to the image and change it to assets and select our white Shimmer for the width let's set this to something like 50 pixels next let's come over to our transform and rotate it so let's see what if we put it 30 degrees no let's try something like that make it nice and even that looks good next let's just change the blur a little bit I want a little more blurry maybe six that looks good and I'm going to change the color background on the container just so we can see it a little bit better it's good all right now we're going to set up the animation so let's come over to our image and our animations Tab and on page load we want to slide it now we want our animation to Loop and of course a lot of this is subjective and you can play around with it to make it whatever you like so I just want it to go from here to here and then start over and keep doing that so because we've rotated it some of these numbers are going to be backwards about what you would expect and so I know if I put this at minus 100 and preview it it's going to go that way okay and let's set our initial position over here that's good but I want it to start off screen so let's add this here and then finish off screen as well outside the component so let's do that and let's see how that looks almost there let's just bump it up to 200. that's good and let's add one more thing let's add a fade whenever you're doing animation one of the sort of basic principles of Animation is called secondary action and that is it's a lot better to have multiple animations that complement each other it's more compelling more realistic so it's going to fade in and then fade out so our initial opacity is going to be zero and then it'll kind of fade in as it goes let's see how that looks oh we didn't even see it so the initial opacity let's put it at maybe 50 percent there we go yeah and kind of get that shimmery beautiful this is going a little bit fast so let's just slow it down a little bit maybe to 1200 kind of double that and I don't want this to delay that's good could be a little bit slower maybe one second of course this is in milliseconds yeah that's good so now let's just duplicate each of these and then finally we'll offset those shimmers so they're not all going at the same time because each of those products are different so it's communicating that the system is working on all of these different types of data okay so let's just copy and paste these in and we just want to fill the screen right there beautiful and so finally we're just going to go through these and we're going to offset them so if we come in this is our second one and we're going to say delay this by say 100 milliseconds and as we go down we're going to keep delaying these by an additional 100 milliseconds so this will be 200 and next one will be 300 et cetera Etc great now let's test these animations to see if they all look good together beautiful that looks cool and as they Loop they'll continue to be offset all right so now we can make this into a component and then add it is that background loading widget on our backend query so let's come into our column because that's what we want to make into a component and if you just right click on here you can say convert to component we're going to call this Shimmer comp beautiful so we're in our components right now also make sure to delete any back-end queries on the components that you're using for the Shimmer effect and now we can go back into our page here into our column open up our background loading widget and now we've got one component and so we can select it let's show it and now let's test it out all right so they're loaded but we didn't see that and that's because the data loaded too fast so in order to see that widget in action you need to open up your Chrome Dev tools you can do that by command option I and make sure you're in the network tab right here and under this right here you can set the throttling that is Chrome is going to make your internet slower now if you do slow 3G that's slow enough for you to be able to see it but you can add in custom speeds right here but I'll just show you this okay so now keep that open right there and go back in to your app and reload it beautiful look at that Shimmer I hope this was helpful for you guys let us know if you have any questions below please subscribe if you haven't we're releasing videos every week and we'll see you in the next video

Channel: FlutterFlow

Views: 15,676

Keywords: shimmer effect, flutterflow, flutter, shimmer effect in flutter, shimmer effect flutter, list loading effect in flutter, shammer flutter, flutter shimmer effect, shammer effect, android development tutorial, flutter tutorial, shimmer animation effect, shimmer list loading effect, flutter widget, flutter loading, flutter loading screen, flutter loading shimmer, flutter tutorial for beginners, mobile app, flutter loading tutorial

Id: j4QPZYB3pj8

Length: 11min 14sec (674 seconds)

Published: Mon Jan 16 2023