A package provides an easy way to add shimmer effect in Flutter project

Overview

Shimmer

pub package

A package provides an easy way to add shimmer effect in Flutter project

How to use

import 'package:shimmer/shimmer.dart';
SizedBox(
  width: 200.0,
  height: 100.0,
  child: Shimmer.fromColors(
    baseColor: Colors.red,
    highlightColor: Colors.yellow,
    child: Text(
      'Shimmer',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 40.0,
        fontWeight:
        FontWeight.bold,
      ),
    ),
  ),
);
Comments
  • Not supported for web.

    Not supported for web.

    ════════ Exception caught by scheduler library ═════════════════════════════════
    UnimplementedError
    ═════════════════════════════════
    

    I'm getting this error while running this package on flutter web.

    enhancement 
    opened by sanalkv 33
  • Shimmer not working properly after flutter upgrade

    Shimmer not working properly after flutter upgrade

    After I used command flutter upgrade the shimmer not working properly on android device (I use genymotion). Any ideas?

    Here my flutter doctor -v

    [✓] Flutter (Channel stable, v1.12.13+hotfix.5, on Mac OS X 10.13.6 17G65, locale en-ID)
        • Flutter version 1.12.13+hotfix.5 at /Users/somatech/Documents/tools/flutter
        • Framework revision 27321ebbad (5 weeks ago), 2019-12-10 18:15:01 -0800
        • Engine revision 2994f7e1e6
        • Dart version 2.7.0
    
     
    [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
        • Android SDK at /Users/somatech/Library/Android/sdk
        • Android NDK location not configured (optional; useful for native profiling support)
        • Platform android-29, build-tools 29.0.2
        • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
        • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
        • All Android licenses accepted.
    
    [!] Xcode - develop for iOS and macOS (Xcode 10.1)
        • Xcode at /Applications/Xcode.app/Contents/Developer
        • Xcode 10.1, Build version 10B61
        ✗ Flutter requires a minimum Xcode version of 10.2.0.
          Download the latest version or update via the Mac App Store.
        • CocoaPods version 1.7.5
    
    [✓] Android Studio (version 3.5)
        • Android Studio at /Applications/Android Studio.app/Contents
        • Flutter plugin version 42.1.1
        • Dart plugin version 191.8593
        • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
    
    [!] IntelliJ IDEA Ultimate Edition (version 2019.2.2)
        • IntelliJ at /Applications/IntelliJ IDEA.app
        ✗ Flutter plugin not installed; this adds Flutter specific functionality.
        ✗ Dart plugin not installed; this adds Dart specific functionality.
        • For information about installing plugins, see
          https://flutter.dev/intellij-setup/#installing-the-plugins
    
    [✓] Connected device (1 available)
        • Samsung • 192.168.56.103:5555 • android-x86 • Android 8.0.0 (API 26)
    

    Thank you for everything!

    bug 
    opened by fajarainul 16
  • Problem with shimmer and new flutter verision

    Problem with shimmer and new flutter verision

    My flutter version is Flutter (Channel stable, v1.7.8) and the shimmer version is 1.0.0

    The problem occurred when updated flutter to the newer version.

    It worked perfectly before, and I didn't change anything in my code. anyone know why this problem is occurring?

    Simulator Screen Shot - iPhone 6 - 2019-09-01 at 22 24 37

    Simulator Screen Shot - iPhone 6 - 2019-09-01 at 22 24 41

    opened by tahamalas7 10
  • fix enabled

    fix enabled

    Hey.. and another pull request.

    I tested the new version v1.0.1 and the enabled property didn't worked for me. For example: Screenshot_1568844037

    In my example the paint method is called. I fixed it. Moreover paint now only calls saveLayer (heavy method), when it's necessary.

    opened by The-Redhat 7
  • ShimmerDirection not changing between different Widgets

    ShimmerDirection not changing between different Widgets

    Demonstration (GIF)

    ezgif com-video-to-gif

    Code-Snippet

    if (summonDirection == SummonDirection.forward)
      Positioned.fill(
        child: AnimatedOpacity(
          duration: const Duration(milliseconds: 500),
          opacity: summoning ? 1.0 : 0.0,
          child: Container(
            child: Shimmer.fromColors(
              direction: ShimmerDirection.ttb,
              baseColor: brightness == Brightness.light ? Colors.black54 : Colors.white54,
              highlightColor: Colors.white,
              child: Image.asset(
                'assets/images/summon_arrows.png',
              ),
            ),
          ),
        ),
      ),
    if (summonDirection == SummonDirection.backward)
      Positioned.fill(
        child: AnimatedOpacity(
          duration: const Duration(milliseconds: 500),
          opacity: summoning ? 1.0 : 0.0,
          child: Container(
            child: Shimmer.fromColors(
              direction: ShimmerDirection.btt,
              baseColor: brightness == Brightness.light ? Colors.black54 : Colors.white54,
              highlightColor: Colors.white,
              child: RotatedBox(
                quarterTurns: 2,
                child: Image.asset(
                  'assets/images/summon_arrows.png',
                ),
              ),
            ),
          ),
        ),
      ),
    

    Actual behavior

    When I set direction: ShimmerDirection.btt, and use another direction in another widget like: direction: ShimmerDirection.ttb,, only the first direction is applied.

    Every other Shimmer widget in my StatefulWidget is ignored.

    Expected behavior

    direction is working for all Shimmers seperatly.

    bug 
    opened by Ahmadre 6
  • 1.1.0 regressed by adding a stroke around child widgets

    1.1.0 regressed by adding a stroke around child widgets

    The latest update seems to be adding a stroke around widgets now. This wasn't present before this version.

    Perhaps this was introduced with the recent change to ShaderMaskLayer https://github.com/hnvn/flutter_shimmer/commit/21cc87b6b852e4f985067b038552bf88c58c1b52

    Usage:

        return Container(
          child: Shimmer.fromColors(
            baseColor: baseColor,
            highlightColor: highlightColor,
            child: Wrap(
              spacing: 6,
              runSpacing: 6,
              children: <Widget>[
               //...
              ],
            ),
          ),
        );
    

    09D2BB59-A6D1-421D-B018-94177BC74126

    opened by RyanRamchandar 5
  • Feature/refactoring

    Feature/refactoring

    1. Improved .gitignore
    2. added analysis_options.yaml for lint
    3. This pull request it preparation to new feature/shimmer_presentation_state that will be introduced in new commit
    opened by BohdanNikoletti 4
  • Can't add multiple widgets from different parents without adding the parents to the shimmer

    Can't add multiple widgets from different parents without adding the parents to the shimmer

    When using a list we do not have this issue, but when working with a page without pattern we can not add to the same shimmer the skeleton inside different parents (in my case these parents are some cards) without adding the parents to the shimmer, what i am doing is adding multiple shimmers as we can see above but it is looking not clean since we have multiple animations instead of one

    Screenshot_20190509-094650

    When i try to use only one shimmer to all the skeleton it does add the parent cards too:

    Screenshot_20190509-100807

    opened by erickdaros 4
  • Does not switch a color depending on theme

    Does not switch a color depending on theme

    Hi. THanks for the package

    I'm trying to use it in conjunction with flutter theme.

    child: Shimmer.fromColors(
                        baseColor: Theme.of(context).primaryColor,
                        highlightColor: Colors.grey[100],
    

    The shimmer does not change it's color when switching the theme, Also it does not updates the colors on hot reload.

    [✓] Flutter (Channel dev, v1.15.3, on Mac OS X 10.15.2 19C57, locale en-UA)
     
    [✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    [✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
    [✓] Chrome - develop for the web
    [✓] Android Studio (version 3.6)
    [!] IntelliJ IDEA Ultimate Edition (version 2018.3)
        ✗ Flutter plugin not installed; this adds Flutter specific functionality.
        ✗ Dart plugin not installed; this adds Dart specific functionality.
    [✓] VS Code (version 1.40.2)
    [✓] Connected device (4 available)
    
    
    opened by vasilich6107 2
  • Shimmer doesn't work properly on a ListView

    Shimmer doesn't work properly on a ListView

    What I want I want to shimmer a horizontal ListView.

    Issue All the widgets including shimmered and below shimmered, flows from left to right.

    Code

    Shimmer.fromColors(
          baseColor: Colors.grey[300],
          highlightColor: Colors.grey[100],
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Container(
                margin: EdgeInsets.all(4),
                width: 144,
                height: 203,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  color: Colors.grey[400],
                ),
              ),
              Container(
                margin: EdgeInsets.all(4),
                width: 144,
                height: 203,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  color: Colors.grey[400],
                ),
              ),
              Container(
                margin: EdgeInsets.all(4),
                width: 144,
                height: 203,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  color: Colors.grey[400],
                ),
              ),
            ],
          ),
        );
    

    Output Screenshot 2020-02-09 at 10 42 38 AM Screenshot 2020-02-09 at 10 42 54 AM

    bug 
    opened by haroonkhan9426 2
  • [BUG] Shimmer fully covers child widget ui

    [BUG] Shimmer fully covers child widget ui

    Shimmer v 2.0 flutter v 2.0.5

    Code:

    class AnnouncementImageTileLoading extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        var size = MediaQuery.of(context).size;
        return Shimmer.fromColors(
          baseColor: AppColors.greyW300,
          highlightColor: AppColors.greyW100,
          child: Container(
            height: size.width / 3,
            width: 343,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(24),
                color: AppColors.white,
                border: Border.all(color: AppColors.greyW300)),
            child: Row(
              children: [
                Flexible(
                    flex: 4,
                    child: ClipRRect(
                      borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(24),
                          topLeft: Radius.circular(24),
                          topRight: Radius.circular(24)),
                      child: Stack(
                        children: [
                          Container(
                            color: AppColors.greyW200,
                            height: size.width / 3,
                          ),
                          Positioned(
                            bottom: 0,
                            right: 0,
                            child: Container(
                              height: 32,
                              width: 46,
                              decoration: BoxDecoration(
                                  color: AppColors.greyW200,
                                  borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(8),
                                  )),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Icon(
                                    IconsYool.view,
                                    color: AppColors.white,
                                  ),
                                  Container(color: AppColors.white, height: 12)
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    )),
                Flexible(
                    flex: 6,
                    child: Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Container(
                            height: 14,
                            color: AppColors.greyW200,
                          ),
                          Padding(
                              padding: const EdgeInsets.only(top: 10),
                              child: Container(
                                height: 16,
                                color: AppColors.greyW600,
                              )),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              Expanded(
                                  child: Container(
                                      height: 14, color: AppColors.greyW200)),
                              Icon(Icons.bookmark_border)
                            ],
                          )
                        ],
                      ),
                    ))
              ],
            ),
          ),
        );
      }
    }
    
    

    Obtained Output: Obtained Output Expected Output: Expected Output

    opened by II11II 1
  • Shimmer makes Text disappear in buttons and containers

    Shimmer makes Text disappear in buttons and containers

    Buttons' text and text children of containers don't show up if shimmer is wrapping those widgets for some reason - Probably related to the removing original button color issue

    opened by Senior-ai 0
  • [BUG] Shimmer is being cut after resize window WEB

    [BUG] Shimmer is being cut after resize window WEB

    Hi. Thanks for plugin.

    Shimmer.fromColors creates white space on the right side. It never happened before. Now it does after migrating flutter to 3.3.0 and later.

    Bug occurs on Flutter 3.3.0 & 3.3.2

    Chrome setup

    Chrome (web) • chrome • web-javascript • Google Chrome 105.0.5195.125

    Removing Shimmer.fromColors resolve problem.

    Image of skeletons with Shimmer.fromColors: image

    Image of skeletons without Shimmer.fromColors: image

    Flutter doctor
    Doctor summary (to see all details, run flutter doctor -v):
    [✓] Flutter (Channel stable, 3.3.0, on macOS 12.6 21G115 darwin-arm (Rosetta), locale pl-PL)
    [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc2)
    [✓] Xcode - develop for iOS and macOS (Xcode 14.0)
    [✓] Chrome - develop for the web
    [✓] Android Studio (version 2021.3)
    [✓] VS Code (version 1.66.2)
    [✓] VS Code (version 1.66.2)
    [✓] Connected device (4 available)
    [✓] HTTP Host Availability
    
    • No issues found!
    
    opened by PcolBP 2
  • Animation is taking whole element not individual widgets

    Animation is taking whole element not individual widgets

    Shimmer not applied:

    1. Container -> BorderRadius
    2. Animation to elements inside

    shimmer_animation

      Widget productsLoading() {
        return Padding(
          padding: const EdgeInsets.all(10),
          child: Shimmer.fromColors(
            baseColor: Colors.grey[300]!,
            highlightColor: Colors.grey[100]!,
            child: ListView.separated(
              itemBuilder: (_, __) => Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(
                    Radius.circular(10),
                  ),
                ),
                child: Card(
                  color: Colors.white,
                  elevation: 0,
                  child: Container(
                    height: 90,
                    color: Colors.white,
                    padding: EdgeInsets.all(5),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        SizedBox(
                          width: 70,
                          height: 70,
                          child: SizedBox(
                            height: 65,
                            width: 65,
                          ),
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Expanded(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              SizedBox(
                                width: double.infinity,
                                height: 20,
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              SizedBox(
                                width: double.infinity,
                                height: 20,
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  SizedBox(
                                    width: 50,
                                    height: 20,
                                  ),
                                  SizedBox(
                                    width: 50,
                                    height: 20,
                                  )
                                ],
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ),
              separatorBuilder: (_, __) => SizedBox(
                height: 7,
              ),
              itemCount: 7,
            ),
          ),
        );
      }
    

    What am I doing wrong?

    opened by troncomputers 1
Owner
HungHD
Full-stack mobile developer (Android, iOS, Flutter).
HungHD
A flutter based liquid swipe

This repository contains the Liquid Swipe Flutter source code. Liquid swipe is the revealing clipper to bring off amazing liquid like swipe to stacked

Sahdeep Singh 987 Dec 28, 2022
photofilters library for flutter

Photo Filters package for flutter A flutter package for iOS and Android for applying filter to an image. A set of preset filters are also available. Y

Sharafudheen KK 336 Dec 23, 2022
Flutter Shine is a library for pretty and realistic shadows, dynamic light positions, extremely customizable shadows, no library dependencies, text or box shadows based on content.

Flutter Shine Show some ❤️ and star the repo to support the project Flutter widget inspired by Shine Installation Add the Package dependencies: flut

Jonathan Monga 139 Dec 16, 2022
A package provides an easy way to add shimmer effect in Flutter project

flutter_shimmer_widget A package provides an easy way to add shimmer effect in Flutter project Getting Started Animation Example Project There is a ex

Le Anh Tuan 4 Jun 29, 2022
Animated shimmer - A simple & lightweight widget to display an animated shimmer effect

Animated Shimmer Supports Null Safety A simple & lightweight widget to display a

Shubham Soni 7 Apr 27, 2022
Shimmer loading - A Flutter project to show how to add shimmer loading animation

shimmer_loading A Flutter project to show how to add shimmer loading animation.

null 0 Feb 6, 2022
Fancy list loading effect or The Shimmer Effect in Flutter

Shimmer Effect in Shimmer Effect is really cool placeholder effect that you can show when you are loading data in the form of a list. To do it in flut

Ronak Punase 31 Oct 18, 2022
In this project, we will design a travel app UI with a parallax effect for a unique scroll experience. You will learn how to create your own parallax effect without using external libraries.

Travel App UI In this part, we will design a travel app UI with a parallax effect for a unique scroll experience. You will learn how to create your ow

DebugErrorX 5 Dec 5, 2022
An easy way to add rounded corner floating app bar in Flutter project.

rounded_floating_app_bar Rounded floating app bar like new google applications has. This package provides an easy way to add rounded corner floating a

Bhavik Makwana 30 Nov 11, 2021
The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery.

KenBurns The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery. First add to your dependencies: dep

Favour Olukayode 1 Apr 28, 2022
Flutter Image add drag sort, Image add drag sort, support click event, delete, add, long press drag sort.

flutter_image_add_drag_sort Flutter Image add drag sort, Image add drag sort, support click event, delete, add, long press drag sort, support video fi

null 5 Jun 23, 2020
A Flutter package providing an easy way to add floating ribbon to images.

Floating Ribbon A new Flutter package for creating floating ribbons on images. Dependency dependencies: floating_ribbon: any How To Use In order to

101Loop 12 Sep 26, 2022
his package provides a Clock class which encapsulates the notion of the "current time" and provides easy access to points relative to the current time.

This package provides a Clock class which encapsulates the notion of the "current time" and provides easy access to points relative to the current tim

Dart 34 Dec 15, 2022
An easy way to add all google ads to your flutter app.

Google Ads An easy way to add all google ads to your flutter app. How to use it Add the google_mobile_ads package using flutter pub add google_mobile_

Yemeni Open Source 4 Sep 27, 2022
A Facebook & Twitter Like Card Loading Shimmer Skeleton Library.

PKSkeleton A Facebook & Twitter Like Card Loading Shimmer Skeleton Library. The source code is 100% Dart, and everything resides in the /lib folder. S

Pawan Kumar 283 Nov 26, 2022
The EasyRichText widget provides an easy way to use RichText.

easy_rich_text The EasyRichText widget makes the RichText widget easy. You do not have to split the string manually. This widget use regular expressio

hans.huang 55 Jan 4, 2023
A Flutter library to add the Common effect (line, bubble, dot ...) of tab indicator.

flutter_tab_indicator A Flutter library to add the Common effect (line, bubble, dot ...) of tab indicator. Showcases Installation Showcases Showcases

CrabMan 14 Jun 19, 2022
Page Turn Widget - Add a page turn effect to widgets in your app. Maintainer: @rodydavis

Page Turn Widget Add a page turn effect to widgets in your app. Created by Simon Lightfoot @slightfoot Screenshots Example import 'package:flutter/mat

Flutter Community 177 Dec 29, 2022
Add a fading effect when the user can scroll.

Add a fading effect when the user can scroll. Demo Quickstart Add the dependency to fading_scroll to your pubspec.yaml file. flutter pub add clickup_f

ClickUp 24 Dec 14, 2022
This is a view pager provides carousel effect and dismissal animation when page was removed.

This is a view pager provides carousel effect and dismissal animation when page was removed. Features Carousel effect Horizontal Vertical Dismissal an

Zhe-Yi, Zhu 4 Dec 22, 2022