What is a shimmer effect?

Shimmer effects are loading indicators used when fetching data from a data source that can either be local or remote. It paints a view that may be similar to the actual data to be rendered on the screen when the data is available.

Instead of the usual CircularProgressIndicator or LinearProgressIndicator, shimmer effects present a more aesthetically pleasing view to the user and in some cases helps build up some anticipation of the data before it’s rendered on the screen.

Implementing a shimmer effect

Let’s start by creating a new Flutter project.

flutter create flutter_shimmer_effect_app

Import the following dependencies and dev dependencies we need in the app in our pubspec.yaml file:

• shimmer: To make the shimmer effect

dependencies:
 cupertino_icons: ^1.0.2
 flutter:
  sdk: flutter
 shimmer: ^2.0.0

Importing the Dependency:

Use the below line of code in the main.dart file, to import the shimmer dependency :

import 'package:shimmer/shimmer.dart';

Complete Source Code:

Open main.dart file and update code :

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: 'Codesolution',
            routes: {
                'loading': (_) => LoadingListPage(),
            },
            theme: ThemeData(
                primarySwatch: Colors.purple,
            ),
            home: MyHomePage(),
        );
    }
}

class MyHomePage extends StatefulWidget {
    @override
    _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State < MyHomePage > {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text('Shimmer'),
                    backgroundColor: Colors.purple,
            ),
            body: Column(
                children: [
                    ListTile(
                        title: const Text('Show Loading List'),
                            onTap: () => Navigator.of(context).pushNamed('loading'),
                    ),
                ],
            ),
        );
    }
}

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

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

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text('Loading List'),
            ),
            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] !,
                                    enabled: _enabled,
                                    child: ListView.builder(
                                        itemBuilder: (_, __) => Padding(
                                            padding: const EdgeInsets.only(bottom: 8.0),
                                                child: Row(
                                                    crossAxisAlignment: CrossAxisAlignment.start,
                                                    children: [
                                                        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: 20,
                                    ),
                                ),
                            ),
                        ],
                    ),
            ),
        );
    }
}