Shimmer Effect in Flutter | List Loading Effect

Shimmer Effect in Flutter – Awesome Flutter Plugins

Shimmer Effect is a very famous Text effect introduced as part of the IOS environment. In this article, we will look at how to bring that to the Flutter Application.

To begin with, we will make use of this Awesome Flutter Plugin – Shimmer 1.0.0

Add the following to the dependency –

dependencies: 
 shimmer: ^1.0.0

Once done, time to import the following line into the main.dart file.

import 'package:shimmer/shimmer.dart';

Shimmer – Basics

The shimmer effect is fairly straight forward. Make use of only one class in your Widget tree and the work is done. If you do not know how the shimmer effect actually works, check the below GIF to understand.

"<yoastmark

To perform the same effect as above, we will jump into the Widget definition. Make use of the class,

shimmer in your Widget tree! There is one option to do this like given below,

Shimmer.fromColors

Once this is done, we will have to fill out the properties to finalize the application.

Shimmer.fromColors – Properties

The Shimmer.fromColors consist of the following properties.

  • baseColor – Base Color of the Shimmer that gets shown on the Widget. This color is primary as the child widget will be of this color only.
  • highlightColor – Highlight Color is the color that produces the shimmer like effect. This color keeps waving across the child widget and it creates the Shimmer like effect. To find more about this check out the example program in the next section.
  • child – The Child holds whatever widget has to produce the ShimmerEffect. Could be a Text Widget or any complex structure and the ShimmerEffect is produced without any problem! Check out the next section to see more about this attribute and how to use it across complex Widgets

Shimmer – Example App

The code below produces the ShimmerEffect for two important widgets, the Text Widget and the Column of ListView Widget. To know how the app looks do not forget to check the next section for the app output.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

void main() => runApp(ShimmerEffectApp());

class ShimmerEffectApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample ShimmerEffect Widget',
home: ShimmerWidget(),
);
}
}

class ShimmerWidget extends StatefulWidget {
ShimmerWidget({Key key}) : super(key: key);

@override
_ShimmerWidgetState createState() => _ShimmerWidgetState();
}

class _ShimmerWidgetState extends State {

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Shimmer effect"),),
body: Container(
padding: EdgeInsets.all(25.0),
child:Center(
child: Shimmer.fromColors(
direction: ShimmerDirection.rtl,
period: Duration(seconds:5),
child: Column(
children: [0, 1, 2, 3]
.map((_) => Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 48.0,
height: 48.0,
color: Colors.white,
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 8.0),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: double.infinity,
height: 8.0,
color: Colors.white,
),
Padding(
padding:
const EdgeInsets.symmetric(vertical: 2.0),
),
Container(
width: double.infinity,
height: 8.0,
color: Colors.white,
),
Padding(
padding:
const EdgeInsets.symmetric(vertical: 2.0),
),
Container(
width: 40.0,
height: 8.0,
color: Colors.white,
),
],
),
)
],
),
))
.toList(),
),
baseColor: Colors.grey[700],
highlightColor: Colors.grey[100]),
)
),
);
}
}

 

shimmer_effect
shimmer_effect

"<yoastmark

Shimmer Effect – Conclusion

The above two screens are examples only and a lot more can be performed by merely changing the child Widget alone. Drop any comments in the section below!

“Learn and Be Curious”  

Leave a Comment

Your email address will not be published. Required fields are marked *