Make Shimmer Effect in Flutter
Last updated Jan 21, 2020Shimmer Effect is a very famous loading animation effect introduced in mobile application develomnet. In this article, we will look at how to bring that to the Flutter Application
To start with, we will make use of this Awesome Flutter Plugin flutter_shimmer
Let's start
pubspec.yaml
add shimmer plugin in pubspe.yaml file under dependencies
dependencies: |
Now import shimmer package in widget class
import 'package:flutter_shimmer/flutter_shimmer.dart'; |
The Shimmer effect has 3 types of color modes
- Light Mode
- Dark Mode
- Purplish Mode
ListTile Effect
By using ListTileShimmer() we can achieve the effect for Listview with ListTile
ListTileShimmer( ) |
Yotube Effect
YoutubeShimmer( |
VideoShimmer Effect
VideoShimmer( |
ProfileShimmer Effect
ProfileShimmer( |
Example
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyShrimmer(),
);
}
}
class MyShrimmer extends StatefulWidget {
@override
_MyShrimmerState createState() => _MyShrimmerState();
}
class _MyShrimmerState extends State{
bool isDarkMode = false;
bool isPurplishMode = true;
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: "Flutter Shimmer ",
theme: ThemeData(
primaryColor: Colors.pink,
textTheme: TextTheme(
body1: TextStyle(color: Colors.white,fontSize: 20),
)
),
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.brown,
appBar: AppBar(
title: Text("Flutter Shimmer Effect",),
),
body: ListView(
children: [
Container(
padding: EdgeInsets.all(16.0),
child: Text(
"ListTileShimmer",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
ListTileShimmer(
// isPurplishMode: true,
isRectBox: false,
),
divider(),
Container(
padding: EdgeInsets.all(16.0),
child: Text(
"YoutubeShimmer",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
YoutubeShimmer(
// isPurplishMode: true,
// isDarkMode: true,
isPurplishMode: isPurplishMode,
),
divider(),
Container(
padding: EdgeInsets.all(16.0),
child: Text(
"VideoShimmer",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
VideoShimmer(
isPurplishMode: isPurplishMode,
// isPurplishMode: true,
// isDarkMode: true,
),
divider(),
Container(
padding: EdgeInsets.all(16.0),
child: Text(
"ProfileShimmer",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
ProfileShimmer(
// isPurplishMode: true,
// isDarkMode: true,
),
divider(),
Container(
padding: EdgeInsets.all(16.0),
child: Text(
"YoutubeShimmer(With Bottom Lines)",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
ProfileShimmer(
// isPurplishMode: true,
hasBottomLines: true,
// isDarkMode: true,
),
divider(),
Container(
padding: EdgeInsets.all(16.0),
child: Text(
"ProfilePageShimmer",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
ProfilePageShimmer(),
divider(),
Container(
padding: EdgeInsets.all(16.0),
child: Text(
"ProfilePageShimmer(With Bottom Box)",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
ProfilePageShimmer(
// isPurplishMode: true,
hasBottomBox: true,
// isDarkMode: true,
),
],
),
),
);
}
divider()
{
return Divider(color: Colors.white,);
}
}
|
Article Contributed By :
|
|
|
|
2049 Views |