Shimmer effect in the Flutter

Shimmer is a temporary animation that brings awareness when data from the server or database is being loaded. This shimmer effect can be found in a variety of applications, including social networking, eCommerce, and so on. Instead of progress bars and loaders, the shimmer is used as an alternative effect that gives a more pleasant UI to the user. The shimmer effect can be customized to match the actual user interface.

The basic implementation of the shimmer effect in flutter apps is explained in this article. 

Shimmer properties

  Shimmer.fromColors({
    Key? key,
    required this.child,
    required Color baseColor,
    required Color highlightColor,
    this.period = const Duration(milliseconds: 1500),
    this.direction = ShimmerDirection.ltr,
    this.loop = 0,
    this.enabled = true,
  }) 

• Key key: A Widget key is an identifier of the widget.
• Widget child: This property allows declaring a widget, that will be rendered under the Shimmer effect. It can not be null.To avoid the side effect, use the simple and basic widgets [container, Row, Column, ListView…] as a child.
• Color baseColor: The Shimmer’s base colour that appears on the Widget.
• Color highlightColor: To create the Shimmer effect, this highlightColor waves throughout the child widget.
• Duration period: period is adjusts the shimmer effect’s speed, 1500 milliseconds is the default value.
• ShimmerDirection direction: This property allows to control the direction of the shimmer effect; the default direction is [ShimmerDirection.ltr].
• int loop: To set the number of animation loop. Set the value to 0 to make the animation run continuously.
• bool enabled: This attribute allows us to control whether the shimmer effect is on or off. The animation is paused when set to false.

Implementation of the Shimmer effect

Project setup:

1. Create a new flutter project in your favorite IDE, and remove the boilerplate code. Ref link
2. Add the shimmer dependency in pubspec.yaml file, and install it by running pub get.

dependencies:
  flutter:
    sdk: flutter
 shimmer: ^2.0.0

3. Now, add the following code to the main.dart file.

//Flutterant Implementation of the Shimmer effect
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Shimmer Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ShimmerEffectPage(),
    );
  }
}
//Flutterant Implementation of the Shimmer effect
class ShimmerEffectPage extends StatefulWidget {
  @override
  _ShimmerEffectPageState createState() => _ShimmerEffectPageState();
}

class _ShimmerEffectPageState extends State<ShimmerEffectPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Shimmer demo'),
      ),
      body: Container(
        width: double.infinity,
        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Expanded(
              child: Shimmer.fromColors(
                baseColor: Colors.grey[300],
                highlightColor: Colors.grey[100],
                direction: ShimmerDirection.ltr,
                child: ListView.builder(
                  itemBuilder: (_, __) => Padding(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          width: 48.0,
                          height: 48.0,
                          color: Colors.white,
                        ),
                        const Padding(
                          padding: EdgeInsets.symmetric(horizontal: 8.0),
                        ),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Container(
                                width: double.infinity,
                                height: 8.0,
                                color: Colors.white,
                              ),
                              const Padding(
                                padding: EdgeInsets.symmetric(vertical: 2.0),
                              ),
                              Container(
                                width: double.infinity,
                                height: 8.0,
                                color: Colors.white,
                              ),
                              const Padding(
                                padding: EdgeInsets.symmetric(vertical: 2.0),
                              ),
                              Container(
                                width: 40.0,
                                height: 8.0,
                                color: Colors.white,
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                  itemCount: 10,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

4. The implementation phase is now complete. Run the app to the test on the device.