In this article, I'm going to share a simple example of how to get Shimmer effect in your flutter app.
Basically, the shimmer effect is useful as an unobtrusive loading indicator. Initiallu, this was created by facebook to indicate loading status, without progress bar or usual loaders.
Here is how it's going to look.
![](../../Uploads/c3f309d1-24e2-4b5b-a9dc-80e2c33f82b6.gifwidth="50%height="auto](
Inoder to try this example, you need to add below dependencies in pubspec.yaml file.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre-wrap;](color: #569cd6;](shimmer: color: #ce9178;](^1.0.0
And then, here is the code from main.dart file.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre-wrap;](
color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart';color: #569cd6;](import color: #ce9178;]('package:shimmer/shimmer.dart';
color: #569cd6;](void color: #dcdcaa;](main() => color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());
color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #569cd6;](final appTitle = color: #ce9178;]('Shimmer Demo';
color: #c586c0;](return color: #4ec9b0;](MaterialApp( title: appTitle, home: color: #4ec9b0;](Scaffold( appBar: color: #4ec9b0;](AppBar( title: color: #4ec9b0;](Text(appTitle), ), body: color: #4ec9b0;](MyHome(), ), ); }}
color: #569cd6;](class color: #4ec9b0;](MyHome color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #569cd6;](@override color: #4ec9b0;](MyHomeState color: #dcdcaa;](createState() { color: #c586c0;](return color: #4ec9b0;](MyHomeState(); }}
color: #569cd6;](class color: #4ec9b0;](MyHomeState color: #569cd6;](extends color: #4ec9b0;](State { color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](Center( child: color: #4ec9b0;](Shimmer.color: #dcdcaa;](fromColors( baseColor: color: #4ec9b0;](Colors.red, highlightColor: color: #4ec9b0;](Colors.green, child: color: #c586c0;](new color: #4ec9b0;](Center( child: color: #c586c0;](new color: #4ec9b0;](Column( mainAxisAlignment: color: #4ec9b0;](MainAxisAlignment.center, children: [ color: #4ec9b0;](Padding( padding: color: #569cd6;](const color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](symmetric(horizontal: color: #b5cea8;](8.0, vertical: color: #b5cea8;](19.0), child: color: #4ec9b0;](Column(children: [ color: #4ec9b0;](Padding( padding: color: #569cd6;](const color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](symmetric(horizontal: color: #b5cea8;](8.0, vertical: color: #b5cea8;](19.0), child: color: #4ec9b0;](FlutterLogo( size: color: #b5cea8;](70.0,), ), color: #4ec9b0;](Text(color: #ce9178;]('Welcome to Flutter', textAlign: color: #4ec9b0;](TextAlign.center, overflow: color: #4ec9b0;](TextOverflow.ellipsis, style: color: #c586c0;](new color: #4ec9b0;](TextStyle(fontWeight: color: #4ec9b0;](FontWeight.w300), ), ], ), ), ], ), ), ), ); }}
Thanks,Srikanth