Explore Shimmer Animation Effect In Flutter
Loading times are unavoidable in application improvement. From a user experience (UX) viewpoint, the main thing is to show your users that loading is occurring. One mainstream way to deal with imparting to users that information is loading is to show a chrome tone with a shimmer animation over the shapes that inexact the sort of substance that is loading.
In this blog, we will Explore Shimmer Animation Effect In Flutter. We will see how to implement a demo program of the shimmer animation effect and show a loading animation effect using the shimmer package in your flutter applications.
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Contents::
What is the shimmer animation effect?
What is the shimmer animation effect?:
Shimmer is utilized to add wonderful animations while content is loading from the servers in an application. This makes the UI look more responsive and gets users from leaving a sluggish internet collaboration. It very well may be utilized rather than traditional ProgressBar or usual loaders accessible in the Flutter structure.
Typically at whatever point we open an application then we see a loading impact with decent animation. It demonstrates that the application loading the information either from the server or the local database. There are numerous approaches to show this loading impact. In this, we generally animate the widget which precisely resembles the first widget in the wake of loading the information.
Demo Module :
This demo video shows how to create a shimmer animation effect in a flutter. It shows how the shimmer animation effect will work using the shimmer package in your flutter applications. It shows when code successfully runs, then shows content is loading from dummy data is shimmer animation effect with duration and then loading is complete then content will be shown on your devices.
Properties:
There are some properties of shimmer animation effect:
- > baseColor: Base Color of the Shimmer that gets displayed on the Widget. This color is essential as the child widget will be of this color as it were.
- > highlightColor: Highlight Color is the color that delivers the shimmer-like impact. This color continues to wave across the child widget and it makes the Shimmer impact.
- > child: The Child holds whatever widget needs to create the ShimmerEffect. Could be a Text Widget or an intricate design and the ShimmerEffect is created with no issue.
- > direction: You can adjust the direction of the shimmer highlight color from left to right, right to left, start to finish, or base to top, to do so you simply need to pass ShimmerDirection with a determined direction.
- > period: It controls the speed of the shimmer effect. The default value is 1500 milliseconds.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
shimmer: ^3.0.0Step 2: Import
import 'package:shimmer/shimmer.dart';Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called movie_model.dart inside the lib folder.
class MovieModel {
final String urlImg;
final String title;
final String detail;
const MovieModel({required this.urlImg,
required this.title,
required this.detail});
}We will create a class MovieModel. In this class, we will create three final strings was urlImg, title, and detail. We also create a constructor of all strings items.
Create a new dart file called movie_data.dart inside the lib folder.
import 'package:flutter_shimmer_animation/model/movie_model.dart';
List<MovieModel> allMovies =[
MovieModel(
urlImg:'https://gumlet.assettype.com/bloombergquint%2F2019-04%2F4c894d41-181f-4c8c-8630-4604a6d51d05%2Favengers_infinity_war_and_endgame_poster_w7_1600x900.jpg?rect=0%2C0%2C1250%2C900&auto=format%2Ccompress&w=480&dpr=2.6',
title:'Avengers: Endgame',
detail:'It s a 2019 American superhero film based '
),
MovieModel(
urlImg:'https://townsquare.media/site/442/files/2014/08/The-Expendables.jpg?w=980&q=75',
title:'The Expendables 3',
detail:'The Expendables 3 is a 2014 American action '
),
MovieModel(
urlImg:'https://img.etimg.com/thumb/msid-71454408,width-650,imgsize-242226,,resizemode-4,quality-100/war-1.jpg',
title:'War',
detail:'War is a 2019 Indian Hindi-language action '
),
MovieModel(
urlImg:'https://iadsb.tmgrup.com.tr/de9f7e/1200/627/0/0/1000/522?u=https://idsb.tmgrup.com.tr/2019/12/22/1577016105167.jpg',
title:'Jumanji: The Next Level',
detail:'Jumanji: The Next Level is a 2019 American '
),
MovieModel(
urlImg:'https://evertise.net/wp-content/uploads/2021/06/image-366.png',
title:'Fast & Furious 9',
detail:'Dom Toretto`s peaceful life off the grid.'
)];
In this dart file, we will create a list of movies. We will add five dummy data of MovieModel. We add five different data of urlImg, title, and detail.
Create a new dart file called custom_widget.dart inside the lib folder.
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
class CustomWidget extends StatelessWidget {
final double width;
final double height;
final ShapeBorder shapeBorder;
const CustomWidget.rectangular({
this.width = double.infinity,
required this.height
}): this.shapeBorder = const RoundedRectangleBorder();
const CustomWidget.circular({
this.width = double.infinity,
required this.height,
this.shapeBorder = const CircleBorder()
});
@override
Widget build(BuildContext context) => Shimmer.fromColors(
baseColor: Colors.red,
highlightColor: Colors.grey[300]!,
period: Duration(seconds: 2),
child: Container(
width: width,
height: height,
decoration: ShapeDecoration(
color: Colors.grey[400]!,
shape: shapeBorder,
),
),
);
}In CustomWidget will extend with StatelessWidget. Inside, we will add three final constructors was double width, double height, and shapeBorder. Create two custom widgets for rectangular() and circular(). In the build method, we will add Shimmer.fromColors(). Inside, we will add the base color was red, highlightColor was grey, and also add period. In child property, we will add Container. Inside, we will add width, height and add ShapeDecoration().
Create a new dart file called my_home_page.dart inside the lib folder.
First, we will create a List <MovieModel> movies is equal to bracket and bool isLoading is equal to false,
List<MovieModel> movies = [];
bool isLoading = false;We will create an initState() method. In this method, we will add the loadData() method.
@override
void initState() {
// TODO: implement initState
super.initState();
loadData();
}We will define loadData() method.
We will create a Future loadData() method. In this method, we will add setState() function. In this function, we will add isLoading is equal to true. Add an await future delay duration for loading and movies is equal to the list of (allMovies). Again, we will add setState() function. In this function, we will add isLoading is equal to false.
Future loadData() async {
setState(() {
isLoading = true;
});
await Future.delayed(Duration(seconds: 2));
movies = List.of(allMovies);
setState(() {
isLoading = false;
});
}We will create a buildMovieList(). In this method, we will add ListTile() widget. In this widget, we will add leading. In this leading, we will create CircleAvatar with a radius is 30 and add backgroundImage as NetworkImage from MovieModel. Add a title, subtitle from the MovieModel list.
Widget buildMovieList(MovieModel model) =>
ListTile(
leading: CircleAvatar(
radius: 30,
backgroundImage: NetworkImage(model.urlImg),
),
title: Text(model.title, style: TextStyle(fontSize: 16),),
subtitle: Text(
model.detail, style: TextStyle(fontSize: 14), maxLines: 1,),
)We will create one more widget that was buildMovieShimmer(). In this method, we will add ListTile() widget. In this widget, we will add leading, title, subtitle from CustomWidget().
Widget buildMovieShimmer() =>
ListTile(
leading: CustomWidget.circular(height: 64, width: 64),
title: Align(
alignment: Alignment.centerLeft,
child: CustomWidget.rectangular(height: 16,
width: MediaQuery.of(context).size.width*0.3,),
),
subtitle: CustomWidget.rectangular(height: 14),
);In the body part, we will add ListView.builder(). Inside, add itemCount and itemBuilder. In itemBuilder, we will add condition if isLoading then return buildMovieShimmer() widget else we will return final movie is equal to the movies[index] and return buildMovieList (movie);
ListView.builder(
itemCount: isLoading? 5: movies.length,
itemBuilder: (context, index) {
if (isLoading) {
return buildMovieShimmer();
} else {
final movie = movies[index];
return buildMovieList(movie);
}
}
),When we run the code, first will show a shimmer effect when the data was loaded, we ought to get the screen’s output like the underneath screen capture.
When data successfully load, then shimmer was stopped and all data will show on your screen. We will also add a refresh button on an appBar() for the shimmer effect.actions:
[
IconButton(
icon: Icon(Icons.refresh),
onPressed: loadData)
],When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_shimmer_animation/custom_widget.dart';
import 'package:flutter_shimmer_animation/data/movie_data.dart';
import 'package:flutter_shimmer_animation/model/movie_model.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<MovieModel> movies = [];
bool isLoading = false;
@override
void initState() {
// TODO: implement initState
super.initState();
loadData();
}
Future loadData() async {
setState(() {
isLoading = true;
});
await Future.delayed(Duration(seconds: 2));
movies = List.of(allMovies);
setState(() {
isLoading = false;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.teal,
title: Text("Shimmer Animation Effect"),
actions: [
IconButton(
icon: Icon(Icons.refresh),
onPressed: loadData)
],
),
body: ListView.builder(
itemCount: isLoading? 5: movies.length,
itemBuilder: (context, index) {
if (isLoading) {
return buildMovieShimmer();
} else {
final movie = movies[index];
return buildMovieList(movie);
}
}
),
);
}
Widget buildMovieList(MovieModel model) =>
ListTile(
leading: CircleAvatar(
radius: 30,
backgroundImage: NetworkImage(model.urlImg),
),
title: Text(model.title, style: TextStyle(fontSize: 16),),
subtitle: Text(
model.detail, style: TextStyle(fontSize: 14), maxLines: 1,),
);
Widget buildMovieShimmer() =>
ListTile(
leading: CustomWidget.circular(height: 64, width: 64),
title: Align(
alignment: Alignment.centerLeft,
child: CustomWidget.rectangular(height: 16,
width: MediaQuery.of(context).size.width*0.3,),
),
subtitle: CustomWidget.rectangular(height: 14),
);
}Conclusion:
In the article, I have explained the Shimmer Animation Effect basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Shimmer Animation Effect On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Shimmer Animation Effect in your flutter projects. We will show you what the Shimmer Animation Effect is?. Some shimmer animation effects properties, make a demo program for working Shimmer Animation Effect and It shows when code successfully runs, then shows content is loading from dummy data is shimmer animation effect with duration and then loading is complete then content will be shown on your devices. Show a loading animation effect using the shimmer package in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
