Flutter — Shimmer Effect — How to implement a shimmer effect like Facebook & Instagram

To implement this effect in flutter you need to follow certain steps with in order to make sure that things are correctly setup

Github source code:

GitHub - axiftaj/Flutter-Shimmer-Effect

1. Add this package into you pubspec.yaml this is the link you can checkout the documentation here.

shimmer | Flutter Package

shimmer: ^2.0.0

2. Then run the flutter pub get command inside the terminal to make sure that package has been added in our flutter app.

3. Import the library inside the widget where you want to add this effect.

import 'package:shimmer/shimmer.dart';

Let suppose we are creating the chat application and we want to show the chat list of user. For this we will create the chat list UI using shimmer effects below code snippets is attached.

Here the base color is the color that will be shown when data was not laoded in the chat list. And highlightColor is color of enimation that will move from left to right. This enable property accept bool. If enable is true then shimmer effects is playing and enable is false then it will stop and we will load the data.

Let suppose enable is set to be true, so this effect is playing.

bool _enabled = true;
Shimmer.fromColors(
  baseColor: Colors.grey.shade300,
  highlightColor: Colors.grey.shade100,
  enabled: _enabled,
  child: Column(
    children: [
      ListTile(
        leading: CircleAvatar(
          radius: 28,
          backgroundImage: NetworkImage('https://flutter.dev/docs/cookbook/img-files/effects/split-check/Avatar1.jpg'),
        ),
        title:  Container(
          width: 100,
          height: 8.0,
          color: Colors.white,
        ),
        subtitle:  Container(
          width: double.infinity,
          height: 8.0,
          color: Colors.white,
        ),
      ),

    ],
  ),
)

In initState() function we will create the delay for some seconds for that time shimmer effects will be playing and then set the _enabled to false after when time is pass then this effect will stop working and we will show the real chat list to user.

bool _enabled = true;

@override
void initState() {
  // TODO: implement initState
  super.initState();
  loadData();
}

Future loadData() async {
  await Future.delayed(Duration(seconds: 3));
  setState(() {
    _enabled = false;
  });
}

This is how your screen looks like for three seconds.

If enable property is false then we will show the user the real chatlist.

Padding(
  padding: const EdgeInsets.only(bottom: 8.0),
  child: Column(
    children: [
      ListTile(
        leading: CircleAvatar(
          radius: 28,
          backgroundImage: NetworkImage('https://flutter.dev/docs/cookbook/img-files/effects/split-check/Avatar1.jpg'),
        ),
        title:  Text('John wick'),
        subtitle:  Text("Who kill John's dog "),
      ),
    ],
  ),
)

Complete source code.

Here is the complete source code where i have use listview builder to show the user chat list. Inside the chat list if enable is true we are showing the shimmer effect and once it is false then we are showing real chat list.

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


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shimmer',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
        home: LoadingListPage(),
    );
  }
}


class LoadingListPage extends StatefulWidget {
  @override
  _LoadingListPageState createState() => _LoadingListPageState();
}

class _LoadingListPageState extends State<LoadingListPage> {
  bool _enabled = true;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    loadData();
  }

  Future loadData() async {
    await Future.delayed(Duration(seconds: 3));
    setState(() {
      _enabled = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chat List'),
        centerTitle: true,
      ),
      body: Column(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Expanded(
            child: ListView.builder(
              itemCount: _enabled == true ? 4 : 6,
              itemBuilder: (_, __) {
                if(_enabled){
                  return Shimmer.fromColors(
                    baseColor: Colors.grey.shade300,
                    highlightColor: Colors.grey.shade100,
                    enabled: _enabled,
                    child: Column(
                      children: [
                        ListTile(
                          leading: CircleAvatar(
                            radius: 28,
                            backgroundImage: NetworkImage('https://flutter.dev/docs/cookbook/img-files/effects/split-check/Avatar1.jpg'),
                          ),
                          title:  Container(
                            width: 100,
                            height: 8.0,
                            color: Colors.white,
                          ),
                          subtitle:  Container(
                            width: double.infinity,
                            height: 8.0,
                            color: Colors.white,
                          ),
                        ),

                      ],
                    ),
                  ) ;
                }else {
                  return Padding(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: Column(
                      children: [
                        ListTile(
                          leading: CircleAvatar(
                            radius: 28,
                            backgroundImage: NetworkImage('https://flutter.dev/docs/cookbook/img-files/effects/split-check/Avatar1.jpg'),
                          ),
                          title:  Text('John wick'),
                          subtitle:  Text("Who kill John's dog "),
                        ),
                      ],
                    ),
                  ) ;
                }

              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: FlatButton(
                onPressed: () {
                  setState(() {
                    _enabled = !_enabled;
                  });
                },
                child: Text(
                  _enabled ? 'Stop' : 'Play',
                  style: Theme.of(context).textTheme.button!.copyWith(
                      fontSize: 18.0,
                      color: _enabled ? Colors.redAccent : Colors.green),
                )),
          )

        ],
      ),
    );
  }
}