Create a Shimmer Loading Effect on Flutter

we use circular progress indicator while fetching data on our app which is good but you can make the user experience great by using shimmer effect while fetching data today i'm going to show you how easily you can do that by using flutter if you want to follow along with me download the starting project from github you'll find the link on description we have news page which shows all the news on initial listed we assume it takes two seconds to get the data from backhand that's why after two seconds we said is loading to false now if you restart the app it shows circular progress indicator for two seconds human effect is nothing just a container with light gray color the color of our container is black with four percent opacity also we are going to rounded the corner by applying border radius and then i'm gonna add padding so that our container has minimum height which is 16 right now because we apply eight padding all over the container now it's time to give a name to this container click on the container then press ctrl shift r then extract wizard i'm gonna call it skeleton sometimes we may need to define the height and width that's why i'm gonna add a height and which parameter to the skeleton wizard let's create human effect for this new card at first we need to wrap our skeleton wizard into a row for that click on skeleton wizard press ctrl shift r then tap on wrap with row newscard have image on bright and few lines for category title and time [Music] it's time to replace circular's progress indicator with similar effect right now it shows one but we need few more for that we are using list to be separated [Music] thanks for watching if you like to watch more videos like that please let me know on the comment section you

Channel: The Flutter Way

Views: 128,258

Keywords: flutter, Android App, iOS app, mobile app, flutter app design, loading, shimmer animation

Id: -SpAkwgPIHU

Length: 3min 51sec (231 seconds)

Published: Fri Dec 31 2021