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 !