Shimmer Effect in Flutter

Deepak Kumar

27 April 2023

What is Shimmer Effect in Flutter?

The Shimmer effect is a wonderful animation effect that we can use when the actual content is loading in the background.

In short, you can use this in the place of traditional progress bars or loaders. It will definitely make your application more attractive and decent.

As a result, it will definitely more satisfy users than any traditional progress bar or loader. It’s very common to show loading impact in applications for hiding the loading data in the background.

Check our Flutter app development company page.

Properties

Some properties of the Shimmer effect :

baseColor-> Base color is the first color that will show over the Shimmer widget and shimmering starts from base color.

highlightColor-> It is the color that shows shimmer animation effect over base color. It continues in the form of waves over the child widget.

child-> Child holds the widget on which the shimmer effect is implemented.

direction-> In this, we can simply manage the direction of the shimmering wave highlightColor from right to left, left to right, bottom to top, or start to end.

period-> Actually period controls the speed of the animation. The default speed is 1500 milliseconds.

Implementation of Shimmer Effect

Let’s see how simply we can implement the shimmer effect in flutter application. First of all, I have to write code for the main class it’s a main thread of the app and does not contain anything related to the shimmering effect. Let’s check the below code.

main.dart

import 'package:flutter/material.dart';
import 'homepage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

import 'package:flutter/material.dart';

import 'homepage.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

home: HomePage(),

);

}

Homepage.dart

And this is my homepage dart file that contains all the code related to the UI part and shimmering animation effect part. In this, as you see I use very simple code to understand and easy to implement. So, in this code, I used an identifier isLoading to change view after a time duration.

And simply use a ListView.builder to show multiple lines of content. As a result see when the app is loaded shimmering effect will start till the time duration and after that, it shows actual data. Let’s see the code.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool isLoading = true;
  @override
  void initState() {
   Future.delayed(Duration(seconds: 5)).then((value) {
     setState(() {
       isLoading = false;
     });
    }
   );
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Shimmer Effect")),
      body: SingleChildScrollView(
          child: isLoading ? Container(
            color: Colors.white,
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: ListView.builder(
              itemCount: 20,
              itemBuilder: (BuildContext context, int index) {
                return Padding(
                  padding: const EdgeInsets.only(
                  top: 8.0, bottom: 8.0, left: 0.0, right: 0.0),
                    child: SizedBox(
                        height: 30,
                        width: MediaQuery.of(context).size.width,
                        child: Shimmer.fromColors(
                          child: Container(color: Colors.white,),
                            baseColor: Colors.black12,

                            highlightColor: Colors.black38)),
              );
           }),
      ) : Container(
            color: Colors.greenAccent,
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: ListView.builder(
                itemCount: 20,
                itemBuilder: (BuildContext context, int index) {
                  return Padding(
                    padding: const EdgeInsets.only(
                    top: 8.0, bottom: 8.0, left: 0.0, right: 0.0),
                    child: SizedBox(
                      height: 30,
                      width: MediaQuery.of(context).size.width,
                      child: Text(
                      "It's not about work it's about lifestyle.",
                          style: TextStyle(fontSize: 16),
                        ),),
                  );
               }),
         ) ),
    );
  }
}

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:shimmer/shimmer.dart';

class HomePage extends StatefulWidget {

@override

_HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {

bool isLoading = true;

@override

void initState() {

Future.delayed(Duration(seconds: 5)).then((value) {

setState(() {

isLoading = false;

});

}

);

super.initState();

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text("Shimmer Effect")),

body: SingleChildScrollView(

child: isLoading ? Container(

color: Colors.white,

height: MediaQuery.of(context).size.height,

width: MediaQuery.of(context).size.width,

child: ListView.builder(

itemCount: 20,

itemBuilder: (BuildContext context, int index) {

return Padding(

padding: const EdgeInsets.only(

top: 8.0, bottom: 8.0, left: 0.0, right: 0.0),

child: SizedBox(

height: 30,

width: MediaQuery.of(context).size.width,

child: Shimmer.fromColors(

child: Container(color: Colors.white,),

baseColor: Colors.black12,

highlightColor: Colors.black38)),

);

}),

) : Container(

color: Colors.greenAccent,

height: MediaQuery.of(context).size.height,

width: MediaQuery.of(context).size.width,

child: ListView.builder(

itemCount: 20,

itemBuilder: (BuildContext context, int index) {

return Padding(

padding: const EdgeInsets.only(

top: 8.0, bottom: 8.0, left: 0.0, right: 0.0),

child: SizedBox(

height: 30,

width: MediaQuery.of(context).size.width,

child: Text(

"It's not about work it's about lifestyle.",

style: TextStyle(fontSize: 16),

),),

);

}),

) ),

);

}

Images using Shimmer Effect

Conclusion

In conclusion, we can make our app more attractive, beautiful, and animated by using shimmering effects.

I hope this blog will help you to learn about Shimmer Effect and you will be able to implement it. And you can also take references from here.

For more blogs click here

Happy Learning ✍️