Flutter : Adding Shimmer Effect To Your App

Let’s Start

A shimmer effect is used to enhance the UI of our app while fetching data. A package provides an easy way to add shimmer effect in Flutter project.

Yeah ! …. That’s what I’m looking for.

Let’s create a shimmer,

Add package to your pubspec.yaml

pubspec.yaml

shimmer: ^1.1.2

get dependencies using,

flutter pub get

imports

import 'package:shimmer/shimmer.dart';

Now, let’s apply the shimmer widget.

Shimmer.fromColors(
  baseColor: Colors.grey[300],
  highlightColor: Colors.grey[100],
  enabled: _enabled,
  child: // your child,
);

Use like that for better user. (List)

Shimmer.fromColors(
  baseColor: Colors.grey[300],
  highlightColor: Colors.grey[100],
  enabled: _enabled,
  child: ListView.builder(
    itemBuilder: (_, __) => Padding(
      padding: const EdgeInsets.only(bottom: 10.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,
  ),
)

Just user this instead of loader. Make a widget for better use & apply.

Thanks me later.

For reference click on the link here

If you liked this article, just give me a Clap

Happy Coding !