Flutter skeleton loader using skeletonizer
What is skeleton loading?
UI skeleton loading is a technique used to enhance user experience during web or app loading. It involves displaying a simplified, static version of the user interface while the actual content is being fetched. This placeholder UI gives the illusion of instant loading and prevents users from perceiving long loading times.
How does skeletonizer work?
As the name suggests, skeletonizer will reduce your already existing layouts into mere skeletons and apply painting effects on them, typically a shimmer effect. It automatically does the job for you, in addition, SkeletonAnnotations can be used to change how some widgets are skeletonized.
The need for fake data
In order for skeletonizer to work it actually needs a layout, but in most cases, the layout would need data to shape it. so if we have no data we have no layout which means we have nothing to skeletonize.
Implementing a simple screen with skeleton loader
To demonstrate how skeletonizer works, we will mimic a real-life scenario of fetching data from a remote end-point where we display a skeleton loader while the data is being fetched.
The state management
For our small example, we’re going to use Riverpod for state management and utilize the new sealed classes and pattern-matching mojo because we’re cool like that.
The following async state implementation should be familiar except for the part where we defined placeholder data in AsyncWaiting state, which will hold our fake data while the real data is being fetched.
again the following state notifier should look familiar except for the part where we pass fake data to our AsynceWaiting state and also the use of the cool switch expression.
Tip: since our skeleton will be the result of the laid out data, you can control how long/short a text bone is by modifying the fake text.
The UI
First, let’s create a simple widget to render our user list…
Since our user model does not have an actual avatar image we will the user’s first initial so we have the following layout
The actual screen implementation should look something like this.
When the async state is AsyncWating we build our list with the fake placeholder data and wrap it with Skeletonizer widget, well.. to skeletonize it, once we have our real data fetched we just display it as normal.
We got our skeletonizer working but that initial skeletonization does not look so good, also by default skeletonizer will keep the original color of any container-like widget unless it has no child or is annotated with Skeleton.leaf so it’s treated as a leaf widget which means it’s going to be shaded.
So now want to tell Skeletonizer not to skeletonize the text inside of the CircleAvatar widget and treat as a leaf widget
That’s all..
