Shimmer Effect in Flutter

To add a shimmer effect in Flutter, you can use the shimmer package. This package provides a Shimmer widget that you can use to create the shimmer effect.

Add the shimmer package to your project by adding the following line to your pubspec.yaml file:

dependencies:
  shimmer: ^2.0.0

Also Import the package:
import 'package:shimmer/shimmer.dart';

In HomePage, create a bool variable named “isDataFetched” make it false at start.

In the initState, use Timer widget with duration of 3 seconds, in setState make the isDataFetched = true;

In SafeArea, I created

• ShimmerList widget where I show Shimmer loading
• ListView Builder where I was showing my data being fetched

In ShimmerList Stateful widget,

I use Shimmer.fromColors where need to define 3 properties:

• Base Color : A convenient constructor provides an easy and convenient way to create a [Shimmer] which [gradient] is [LinearGradient] made up of baseColor and highlightColor.
• HighLight Color : A convenient constructor provides an easy and convenient way to create a [Shimmer] which [gradient] is [LinearGradient] made up of baseColor and highlightColor.
• Child

In the Child, I created shimmerLayout widget in which I created containers as same shapes as my data is coming

You can customize the shimmer effect by setting properties on the Shimmer widget. For example, you can set the direction property to change the direction of the shimmer effect:

Shimmer(
  direction: ShimmerDirection.rtl,
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.grey[300],
  ),
);

There are many other properties you can set to customize the shimmer effect, such as gradient, duration, and interval. You can find more information on these properties in the shimmer package documentation.

Shimmer

I hope this article was helpful to you. Thank you for taking the time to read it. Your feedback and suggestions are always welcome.

Support Me:

• Instagram
• Facebook
• GitHub
• Medium
• Twitter
• Youtube