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.
Inoder to try this example, you need to add below dependencies in pubspec.yaml file.
shimmer: ^1.0.0
And then, here is the code from main.dart file.
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appTitle = 'Shimmer Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: Text(appTitle),
),
body: MyHome(),
),
);
}
}
class MyHome extends StatefulWidget {
@override
MyHomeState createState() {
return MyHomeState();
}
}
class MyHomeState extends State<MyHome> {
@override
Widget build(BuildContext context) {
return Center(
child: Shimmer.fromColors(
baseColor: Colors.red,
highlightColor: Colors.green,
child: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 19.0),
child: Column(children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 19.0),
child: FlutterLogo( size: 70.0,),
),
Text('Welcome to Flutter',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: new TextStyle(fontWeight: FontWeight.w300),
),
],
),
),
],
),
),
),
);
}
}
Thanks,
Srikanth