• 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

      Developers

      • Home
      • Blog
      • Developers
      • Shimmer Animation Using Flutter
      Shimmer Effect 700X350

      Shimmer Animation Using Flutter

      • Posted by Shivam Srivastava
      • Categories Developers, Flutter
      • Date March 14, 2020
      Spread the love

      Shimmer With Flutter

      Introduction

      The shimmer animation is a few animation effects just like the movement of a gradient in some specific direction. Used in Flutter Apps. Like “Swipe to unlock” on your mobile. The shimmer animation is very useful as an unobtrusive loading indicator that was originally developed by Facebook to indicate loading status, without progress bar or usual loaders.


      Lets Begin | Shimmer Animation Using Flutter

      Steps

      • Add shimmer: <Latest version> dependency in your flutter project. In my case, the latest version is ^1.1.0
      dependencies:
        shimmer: ^1.1.0

      • Import shimmer.dart
      import 'package:shimmer/shimmer.dart';

      Now we are ready for component code.

      Flutter Logo with Shimmer effect.


          Shimmer.fromColors(
                  baseColor: Colors.black,
                  highlightColor: Colors.lightGreenAccent,
                  child: FlutterLogo(size: 100.0,)
                ),

      Shimmerflutterlogo | Shimmer Animation Using Flutter

      Text Widget with Shimmer effect

       Shimmer.fromColors(
                  baseColor: Colors.black,
                  highlightColor: Colors.lightGreenAccent,
                  child: Text(
                    'This Is Flutter Shimmer Animation Example',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 40.0,
                      fontWeight:
                      FontWeight.bold,
                    ),
                  ),
                ),

      | Shimmer Animation Using Flutter


      Click here for a reading shimmer effect with a network image blog.

      Bookmark(0)

      Please login to bookmark

      Continue with Google
      0

      Tag:flutter glow effect, flutter shimmer example, how to add shimmer effect in flutter, shimmer animation flutter, shimmer layout flutter

      • Share:
      author avatar
      Shivam Srivastava

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

      Previous post

      Facebook F8 event cancel due to coronavirus
      March 14, 2020

      Next post

      Google Bangalore worker tests positive for COVID-19
      March 14, 2020

      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


      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