Make Shimmer Effect in Flutter

Last updated Jan 21, 2020

Shimmer 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:
flutter_shimmer: ^1.0.1

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(
// bool isRectBox;
           // bool isDarkMode;
           // bool isPurplishMode;
           // AlignmentGeometry beginAlign;
           // AlignmentGeometry endAlign;
           // bool hasBottomBox;
           // EdgeInsetsGeometry padding;
           // EdgeInsetsGeometry margin;

)

Yotube Effect

YoutubeShimmer(
// bool isRectBox;
// bool isDarkMode;
// bool isPurplishMode;
// AlignmentGeometry beginAlign;
// AlignmentGeometry endAlign;
// bool hasBottomBox;
// EdgeInsetsGeometry padding;
// EdgeInsetsGeometry margin;
),

VideoShimmer Effect

VideoShimmer(
// bool isRectBox;
// bool isDarkMode;
// bool isPurplishMode;
// AlignmentGeometry beginAlign;
// AlignmentGeometry endAlign;
// bool hasBottomBox;
// EdgeInsetsGeometry padding;
// EdgeInsetsGeometry margin;
)

ProfileShimmer Effect

ProfileShimmer(
// bool isRectBox;
// bool isDarkMode;
// bool isPurplishMode;
// AlignmentGeometry beginAlign;
// AlignmentGeometry endAlign;
// bool hasBottomLines;
// EdgeInsetsGeometry padding;
// EdgeInsetsGeometry margin;
)

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 :

1841 Views

Projects By category