Skeleton Screen in Flutter

Gagan Bhirangi
Apr 20 · 2 min read

PackageShimmer

Have you ever wonder how do apps like Netflix, Linkedin, etc. show their loading page while fetching data?

Flutter community is very grateful that we have package to do so in few steps.

Below is the Basic Implementation of shimmer package -

Installing steps -

  1. Run this command with Flutter:
$ flutter pub add shimmer

or add this to your package’s pubspec.yaml file:

dependencies:
shimmer: ^2.0.0

2. Install packages from the command line with Flutter:

$ flutter pub get

3. Now in your Dart code, you can use:

import ‘package:shimmer/shimmer.dart’;

Coding Part -

Just wrap custom layout in Shimmer.fromColors()

Then, give base color & highlight color

Basic Implementation

Let's dig in a little bit

It looks great but let's customize more…

We can add duration for animation by which it will look a little realistic

give duration in period : attribute

That’s all for now. Thank you for reading this article.

See you next time 👍.

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Gagan Bhirangi

Written by

Design - Develop - Repeat

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store