Shimmer Effect ListView Flutter
In this article, we are going to integrate shimmer effect placeholder to load listview data in flutter application. We already implemented shimmer effect animation in android platform for recyclerview.
Nowadays shimmer animation is most popular while loading large amount of data from servers in mobile applications. We are using shimmer flutter package to create shimmer placeholder in flutter application. In this flutter example, we are displaying football players info in listview.
shimmer widget has different types of properties. baseColor property is used to set color of shimmer effect in flutter listview. highlightColor property is used to display wave for shimmer animation. direction attribute is used to set direction of shimmer effect in flutter listview from left to right, right to left, top to bottom or bottom to top.
Using child property, we can declare any widget as child to display after shimmer loading animation. We can also control speed of shimmer effect placeholder using period property. Default value of period property is 1500 milliseconds. We can change this value according to our requirement.
Add required package in pubspec.yaml file
Create Model Class to handle list view data
class MyFootballPlayerInfo{
String playerImg;
String playerName;
String playingPosition;
String clubName;
String countryName;
MyFootballPlayerInfo(this.playerImg, this.playerName, this.playingPosition, this.clubName,
this.countryName);
}
Add data in array to display in ListView
List<MyFootballPlayerInfo> footballPlayersData = [
MyFootballPlayerInfo( “https://resources.premierleague.com/premierleague/photos/players/40×40/p14937.png”, “Cristiano Ronaldo”, “Forward”, “Manchester United”, “Portugal”
),
MyFootballPlayerInfo( “https://resources.premierleague.com/premierleague/photos/players/40×40/p61366.png”, “Kevin De Bruyne”, “Midfielder”, “Manchester City”, “Belgium”
),
MyFootballPlayerInfo( “https://resources.premierleague.com/premierleague/photos/players/40×40/p66749.png”, “Romelu Lukaku”, “Forward”, “Chelsea”, “Belgium”
),
MyFootballPlayerInfo( “https://resources.premierleague.com/premierleague/photos/players/40×40/p97032.png”, “Virgil van Dijk”, “Defender”, “Liverpool”, “Netherlands”
),
MyFootballPlayerInfo( “https://resources.premierleague.com/premierleague/photos/players/40×40/p78830.png”, “Harry Kane”, “Forward”, “Tottenham Hotspur”, “England”
),
MyFootballPlayerInfo( “https://resources.premierleague.com/premierleague/photos/players/40×40/p54694.png”, “Pierre-Emerick Aubameyang”, “Forward”, “Arsenal”, “Gabon”
),
MyFootballPlayerInfo( “https://resources.premierleague.com/premierleague/photos/players/40×40/p101668.png”, “Jamie Vardy”, “Forward”, “Leicester City”, “England”
),
MyFootballPlayerInfo( “https://resources.premierleague.com/premierleague/photos/players/40×40/p164511.png”, “Yerry Mina”, “Defender”, “Everton”, “Colombia”
),
MyFootballPlayerInfo( “https://resources.premierleague.com/premierleague/photos/players/40×40/p103192.png”, “Kurt Zouma”, “Defender”, “West Ham United”, “France”
),
];
Create Shimmer Effect UI for Flutter ListView
import ‘package:shimmer/shimmer.dart’;
class MyShimmerEffectUI extends StatelessWidget {
final double width;
final double height;
final ShapeBorder shapeBorder;
const MyShimmerEffectUI.rectangular({
this.width = double.infinity,
@required this.height
}): this.shapeBorder = const RoundedRectangleBorder();
const MyShimmerEffectUI.circular({
this.width = double.infinity,
@required this.height,
this.shapeBorder = const CircleBorder()
});
@override
Widget build(BuildContext context) => Shimmer.fromColors(
baseColor: Colors.grey,
highlightColor: Colors.grey,
period: Duration(seconds: 3),
child: Container(
width: width,
height: height,
decoration: ShapeDecoration(
color: Colors.grey,
shape: shapeBorder,
),
),
);
}
Load Data in ListView Flutter
bool isLoading = false;
@override
void initState() {
super.initState();
loadFootballPlayersData();
}
Future loadFootballPlayersData() async {
setState(() {
isLoading = true;
});
await Future.delayed(Duration(seconds: 2));
listFootballPlayers = List.of(footballPlayersData);
setState(() {
isLoading = false;
});
}
Flutter Shimmer Effect Animation ListView
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Shimmer Effect ListView Sample’)),
body: ListView.builder(
itemCount: isLoading? 7: listFootballPlayers.length,
itemBuilder: (context, index) {
if (isLoading) {
return shimmerEffectUIWidget();
} else {
final footballPlayer = listFootballPlayers[index];
return listViewUI(footballPlayer);
}
}
));
}
Widget shimmerEffectUIWidget() =>
ListTile(
leading: MyShimmerEffectUI.circular(height: 60, width: 60),
title: Align(
alignment: Alignment.centerLeft,
child: MyShimmerEffectUI.rectangular(height: 18,
width: MediaQuery.of(context).size.width*0.35),
),
subtitle: MyShimmerEffectUI.rectangular(height: 16),
);
Widget listViewUI(MyFootballPlayerInfo myFootballPlayerInfo) =>
ListTile(
leading: CircleAvatar(
radius: 25,
backgroundImage: NetworkImage(myFootballPlayerInfo.playerImg),
),
title: Text(myFootballPlayerInfo.playerName, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
subtitle: Text(
myFootballPlayerInfo.playingPosition + ” ” + myFootballPlayerInfo.clubName + ” ” + myFootballPlayerInfo.countryName, style: TextStyle(fontSize: 16), maxLines: 1,),
);
