How to create Content Loading Placeholder in Flutter

Do you want to rendering fake content while data is fetching to provide better UX and lower bounce rate?

A package provides an easy way to add shimmer effect in Flutter project

How to use shimmer package

1. Depend on it
Add this to your package’s pubspec.yaml file:

dependencies:
  shimmer: ^1.0.1

2. Install it
You can install packages from the command line:

with Flutter:

flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it
Now in your Dart code, you can use:

import 'package:shimmer/shimmer.dart';

SizedBox(
  width: 200.0,
  height: 100.0,
  child: Shimmer.fromColors(
    baseColor: Colors.red,
    highlightColor: Colors.yellow,
    child: Text(
      'Shimmer',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 40.0,
        fontWeight:
        FontWeight.bold,
      ),
    ),
  ),
);

#flutter #loading #placeholder