In this article, we will discuss how to create a shimmer animation effect in a flutter. What shall we do today is to show the list of fruit using ListView.builder and add the Shimmer animation effect on it. At first, we should know what is Shimmer Animation effect in flutter is.

Related Read: Lottie Animations In Flutter

Shimmer is utilized to add wonderful animations while content is loading from the servers in an application that makes the UI look more responsive and gets users from leaving a sluggish internet collaboration. It can be used instead of conventional ProgressBar or usual loaders available in the Flutter framework

Typically at whatever point we open an application then we see a loading impact with decent animation. It demonstrates that the application loads the information either from the server or the local database. There are numerous approaches to show this loading impact. In this, we generally animate the widget which precisely resembles the first widget in the wake of loading the information.

Properties

There are some properties of shimmer animation effect:

baseColor: displayed on the Widget. This color is essential as the child widget will be of this color as it were
highlightColor: delivers the shimmer-like impact. This color continues to wave across the child widget and it makes the Shimmer impact.
child: holds whatever widget needs to create the ShimmerEffect. It Could be a Text Widget or an intricate design.
direction: adjust the direction of the shimmer highlight color from left to right, right to left, start to finish, or base to top.
period: controls the speed of the shimmer effect. The default value is 1500 milliseconds.

Also read: How To Create A Button With Loading Spinner?

For the implementation of the Shimmer effect in our application first, we should install the package and add it to the pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  shimmer: ^2.0.0

or we can install these packages from the command line

 $ flutter pub add shimmer

Now we will create a new model name Fruit that includes the String of name description and the URL of that class name Fruit and store it into a new file inside the lib folder name fruit_model.dart.

class Fruit {
  String name, desc, url;
  Friut({
    required this.name,
    required this.desc,
    required this.url,
  });
}

Now we will again create a new file name as fruit_data.dart that includes the dummy data.

import 'package:vlogpost/model/student.dart';

List<Fruit > fruits= [
  Friut(
      name: 'Apple',
      desc:
          'An apple is an edible fruit produced by an apple tree (Malus domestica). Apple trees are cultivated worldwide and are the most widely grown species in the',
      url:
          'assets/apple.jpg'),
  Fruit (
      name: 'Banana',
      desc:
          'banana is an elongated, edible fruit - botanically a berry - produced by several kinds of large herbaceous flowering plants in the genus Musa.',
      url:
          'assets/banana.jpg'),
  Fruit (
      name: 'Grape',
      desc:
          'The grapefruit (Citrus × paradisi) is a subtropical citrus tree known for its relatively large, sour to semi-sweet, somewhat bitter fruit.',
      url:
          'assets/grape.jpg'),
  Fruit (
      name: 'Mango',
      desc:
          'A mango is an edible stone fruit produced by the tropical tree Mangifera indica which is believed to have originated from the region between northwestern ...',
      url:
          'assets/mango.jpg'),
  Fruit (
      name: 'Orange',
      desc:
          'An orange is a fruit of various citrus species in the family Rutaceae ); it primarily refers to Citrus × sinensis, which is also called sweet orange',
      url:
          'assets/orange.jpg'),
  Fruit (
      name: 'WaterMelon',
      desc:
          'Watermelon is grown in favorable climates from tropical to temperate regions worldwide for its large edible fruit',
      url:
          'assets/watermelon.jpg'),
  Fruit (
      name: 'Papaya',
      desc:
          'Papayas grow in tropical climates and are also known as papaws or pawpaws. Their sweet taste, vibrant color, and the wide variety of health benefits they ',
      url:
          'assets/papaya.jpg'),
  Fruit (
      name: 'Coconut',
      desc:
          'A coconut is the edible fruit of the coconut palm (Cocos nucifera), a tree of the palm family. ',
      url:
          'assets/coconut.jpg'),
  
];

In the above line of code, I have used the local image name as an assets folder to store the image of fruits. for these, I have taken different fruit images which are shown below.

The Next Step is to include the assets folder inside the pubspec. yaml which is shown below

# To add assets to your application, add an assets section, like this:
  assets:
    - assets/
import 'package:flutter/material.dart';
import 'package:vlogpost/Widget/shimmer.dart';
import 'package:vlogpost/data/food_data.dart';
import 'package:vlogpost/model/student.dart';

class ShimmerScreen extends StatefulWidget {
  const ShimmerScreen({Key? key}) : super(key: key);

  @override
  State<ShimmerScreen> createState() => _ShimmerScreenState();
}

class _ShimmerScreenState extends State<ShimmerScreen> {
  List<Fruit > fruit= [];

  @override
  void initState() {
    getFood();
    super.initState();
  }

  Future getFood() async {
    setState(() {
      showEffect = true;
    });
    await Future.delayed(const Duration(seconds: 2), () {});
    friut= List.of(fruits);
    setState(() {
      showEffect = false;
    });
  }

  bool showEffect = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Shimmer Effect'),
        centerTitle: true,
      ),
      body: ListView.builder(
          itemCount: showEffect ? 8 : food.length,
          itemBuilder: (context, index) {
            if (showEffect) {
              return foodShimmerEffect();
            } else {
              final foodData = food[index];
              return showFoodsList(foodData);
            }
          }),
    );
  }

  Widget showFoodsList(Fruit fruit) => Card(
        child: ListTile(
          title: Text(
            fruit.name,
            style: const TextStyle(fontSize: 18),
          ),
          subtitle: Text(
            fruit.desc,
            maxLines: 1,
            style: const TextStyle(fontSize: 14),
          ),
          leading: CircleAvatar(
            radius: 40,
            backgroundImage: AssetImage(
              fruit.url,
            ),
          ),
        ),
      );

  Widget foodShimmerEffect() =>  ListTile(
        title: Align(
          alignment: Alignment.bottomLeft,
          child: ShimmerWidget.rectangular(
            width: MediaQuery.of(context).size.width * 0.3,
            height: 18),
        ),
        subtitle:const  ShimmerWidget.rectangular(height: 14),
        leading: const ShimmerWidget.circular(
          height: 80,
          width: 70,
        ),
      );
}

In the above code, we have used a Custom Shimmer Component i.e ShimmerWidget where we can pass the height and width of its widget. Besides these, we have used a variable called show effect where we checked the condition that if the show effect is true then we show shimmer animation screen otherwise we will show the list of fruit data. The code for the custom Shimmer component is given below

import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

class ShimmerWidget extends StatelessWidget {
  final double height;
  final double width;
  final ShapeBorder shapeBorder;

  // ignore: use_key_in_widget_constructors
  const ShimmerWidget.rectangular({
    required this.height,
    this.width = double.infinity,
  }) : shapeBorder = const RoundedRectangleBorder();
  // ignore: use_key_in_widget_constructors
  const ShimmerWidget.circular(
      {required this.height,
      required this.width,
      this.shapeBorder = const CircleBorder()});

  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      period:const Duration(seconds: 5),
      highlightColor: Colors.grey.shade300,
      baseColor: Colors.grey.shade500,
      child: Container(
        height: height,
        width: width,
        decoration: ShapeDecoration(
          color: Colors.grey,
          shape: shapeBorder)
        
      ),
    );
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

Shimmer Effect

Thanks for reading this article on Shimmer Animation Effect In Flutter.

Also Read: Tween Animation In Flutter

Hero Animation In Flutter