• Courses
  • YouTube
  • Dev News
  • Technology
  • Blogs
  • Flutter Jobs
  • Contact
    • About Us
    • RegisterLogin
    Navoki
    • Courses
    • YouTube
    • Dev News
    • Technology
    • Blogs
    • Flutter Jobs
    • Contact
      • About Us
    • RegisterLogin

      Flutter

      • Home
      • Blog
      • Flutter
      • Flutter shimmer animation
      Shimmer

      Flutter shimmer animation

      • Posted by Shivam Srivastava
      • Categories Flutter, Developers
      • Date September 13, 2019
      • Comments 2 comments
      Spread the love

      Introduction

      In this blog, you learn what is shimmer effect and how to run shimmer animation. Until your file is loaded you want to show a shimmer effect on Cards Widget , you can run shimmer continuously if you don’t want to add a placeholder. For better understanding, I will use a network image you can apply shimmer animation on different widgets.

      What is a shimmer effect

      It is useful as an unobtrusive loading indicator that was originally developed for Facebook Home. It is to make UI intuitive for user that image is being loaded. Using shimmer animation you can make your application more attractive and good-looking.

      Begin!

      1. Create a flutter project

      2. Add shimmer: <latest version> from here in pubsec.yaml

      3. Add flutter_advanced_networkimage: <latest version> from here pubsec.yaml

      4. Import package in you main.dart

      import 'package:flutter_advanced_networkimage/provider.dart';
      import 'package:flutter_advanced_networkimage/transition.dart';
      import 'package:shimmer/shimmer.dart';

      5. Add the below code where you want to add a shimmer effect. This code not so tough you can easily understand it. Make sure to add an image for a placeholder in the assets’ folder also mentions in puspec.yaml file. You can read here about how to add assets in flutter project.

      Container(
              child: ListView.builder(itemBuilder: (context,index){
                return Container(
              height: 200,
              width: deviceWidth,
              margin: EdgeInsets.all(10.0),
                child: TransitionToImage(
                  image: AdvancedNetworkImage(
                      "https://images.pexels.com/photos/
                      1308881/pexels-photo-1308881.jpeg?
                      auto=compress&cs=tinysrgb&dpr=1&w=500",
                    timeoutDuration: Duration(minutes: 2)),
                  fit: BoxFit.fill,
                  loadingWidget: Shimmer.fromColors(
                    baseColor: Colors.black12,
                    highlightColor: Colors.white10,
                    child: Container(
                      decoration: BoxDecoration(
                          color: Colors.amberAccent)
                    ),
                  ),
                  placeholder: Container(
                    decoration: BoxDecoration(image: DecorationImage(
                      image: AssetImage("assets/error_placeholder.jpg"),
                      fit: BoxFit.fill)),
                  ),
                  duration: Duration(milliseconds: 300),
                ),
              );
              },itemCount: 10,),
            ),
      

      6. Shimmer.fromColors()is the widget responsible for this effect, while AdvancedNetworkImage will download the image from server and loadingWidget:parameter show whatever widget you put before loading.

      Output

      Shimmer_Effect

      Get complete code click here

      Bookmark(0)

      Please login to bookmark

      Continue with Google
      0

      Tag:flutter animation, flutter loading card, flutter package, shimmer effect

      • Share:
      author avatar
      Shivam Srivastava

      Mobile Solution [email protected], Android and Flutter Dev, Dart ,Founder of @Navoki, Instructor

      Previous post

      Android Studio stop support
      September 13, 2019

      Next post

      Android 10
      September 13, 2019

      You may also like

      everything-about-flutter-3-in-google-i-o-2022 navoki.com
      Everything about Flutter 3 in Google I/O 2022
      12 May, 2022
      Flutter-Web-CORS-Error-SOLVED-Navoki.com
      [SOLVED] Flutter Web CORS Error
      4 May, 2022
      How Video Call works in Flutter
      How Incoming Video Call Notification works in Flutter
      15 April, 2022

        2 Comments

      1. sigma coolbeatz
        January 14, 2021
        Log in to Reply

        lol

      2. sigma coolbeatz
        January 14, 2021
        Log in to Reply

        The package flutter_advanced_networkimage as a dependency compatibility issue with the flutter_svg package,
        It keeps returning this error https://github.com/mchome/flutter_advanced_networkimage/issues/164

        Is there any other alternative to it?

      Leave A Reply Cancel reply

      You must be logged in to post a comment.


      Categories

      • Android
      • Dart
      • Dart Server
      • Dart Web
      • Developers
      • Flutter
      • Flutter Desktop
      • Flutter Mobile
      • Flutter Web
      • Fuchsia
      • Go Lang
      • Technology
      • Uncategorized

      Recent Post

      • Everything-About-Flutter-3-In-Google-I-O-2022 Navoki.comEverything about Flutter 3 in Google I/O 2022
      • Flutter-Web-Cors-Error-Solved-Navoki.com[SOLVED] Flutter Web CORS Error
      • How Video Call Works In FlutterHow Incoming Video Call Notification works in Flutter

      Subscribe Now

       

      Recent Courses

      Single And Multi Selection Listview In Flutter

      Single and Multi Selection ListView in Flutter

      Go Installation And Variables

      Go Installation and Variables

      List In Dart Programming Language

      List in Dart Programming language

      Variables In Dart Programming Language

      Variables in Dart Programming language

      View All

      DON’T MISS
      FLUTTER UPDATES

      Be the first to know when our blog is published.

      flutter-mobile-mockup

      Check your inbox or spam folder to confirm your subscription.

      Contact

      •   Navoki Technologies Pvt. Ltd.
        JMD Megapolis , Sector 48, Gurugram, Haryana 122018

      Company

      • About Us
      • Blogs
      • Contact
      • Privacy policy
      • Terms & Condition

      Useful Links

      • Courses
      • Youtube
      • Dev News

      Mobile

      Click and Get started in seconds

      "Navoki" is a registered trademark of Navoki.com ® 2020–2030 Navoki Technologies Pvt Ltd.

      • Terms & Condition

      Login with your site account

      Continue with Google

      By "Sign in” above to accept Navoki’s Terms of Service & Privacy Policy.

      Not a member yet? Register now

      Register a new account

      Continue with Google

      By "Sign Up” above to accept Navoki’s Terms of Service & Privacy Policy.

      Are you a member? Login now