Creating shimmer animations using flutter

One of the best user experience in any application is a loading indicator, ever used youtube and saw a loading indicator that tells you some is coming??

One of the best package for shimmer loading is fade_shimmer, and we will be using it in this example.

https://pub.dev/packages/fade_shimmer

Install this package in to your project and let's start right away

Fade shimmer package have a Widget named FadeShimmer which receives the following properties. 👇🏽

height: Height of the single shimmer
width: Width of the single shimmer
radius: defines border radius of the single shimmer
millisecondsDelay: delay time before update the color
fadeTheme: defines the UI mode of the shimmer

Write the following code into your project

import 'package:fade_shimmer/fade_shimmer.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shimmer effect',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

void doStuff() {}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final highlightColor = Color(0xFF696C80);
    final baseColor = Color(0xFF4B4D5C);
    return Scaffold(
      backgroundColor: const Color(0xFF353535),
      body: SafeArea(
        child: ListView.builder(
          padding: EdgeInsets.only(top: 20),
          itemBuilder: (_, i) {
            final delay = (i * 300);
            return ShrimmerCard(
                delay: delay,
                highlightColor: highlightColor,
                baseColor: baseColor);
          },
          itemCount: 20,
        ),
      ),
    );
  }
}

class ShrimmerCard extends StatelessWidget {
  const ShrimmerCard({
    Key? key,
    required this.delay,
    required this.highlightColor,
    required this.baseColor,
  }) : super(key: key);

  final int delay;
  final Color highlightColor;
  final Color baseColor;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20),
      child: FadeShimmer(
        height: 15,
        width: 150,
        radius: 20,
        millisecondsDelay: delay,
        highlightColor: highlightColor,
        baseColor: baseColor,
      ),
    );
  }
}

Save and run this file and you will see the following output