hnvn / flutter_shimmer Goto Github PK

View Code? Open in Web Editor NEW

1.8K 19.0 201.0 2.21 MB

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

License: BSD 3-Clause "New" or "Revised" License

Objective-C 0.06% Dart 32.14% Swift 2.51% Kotlin 0.19% CMake 27.25% C++ 33.10% C 2.07% HTML 2.68%

flutter dart animation loading

flutter_shimmer's Introduction

Hi there 👋

Thank you for taking the time to visit my github website.

This is my 😄: https://profile-summary-for-github.com/user/hnvn
Mail me 📫: [email protected]

flutter_shimmer's People

Contributors

Stargazers

Watchers

Forkers

huyanghu matrixdekoder sayonetech diegslva repoforks mrmagloire arafat1971 cyberghost007 sachingadagi ngothien9x01 suresh44t serdarpolat weknowthat misterjimson flutterbuddy77 trendingtechnology karique01 nikhilsingh keshavadityarp imanneo thesmalleyes iamgoutamjha 11et401012 azaz0133 tungvt01 rouf69nb ccsimple tanamduit forksource smaharjan974 apphuangweipeng137 zakiso tvqphong001 jimmyinterview karatasemre tennessine twovs freedom6xiaobai houtou118 elviswong-cn jinsong5 hemlockbane unknownxd robertodoering the-redhat rohitkumar2691 bohdannikoletti anirudhsharma392 lakakenny mingsai baqideid sagarbagsariya ptrdu jayden62 harshsoni1110 woyang gabrielguim absc nelsonblack fajarainul silexcorp anuragpatel10 jakcal artflutter mdsami glorygarage luoyou1024 nivla360 juanagu karthikalarisa sarojadhikari410 aniruddha211 sidevesh yangyangfeng azharmarmu alexbelij edujha lharikrishnan1993 gaoliaoliao smartquark vitor-bukovitz abdullah4one trungtrong gmaggio wahyupermadie crdzbird insight-timer ngocmanh1609 ra3x shashwatxx nuno-gon mk-flutter gxkai markjoseultra mr-perfectuz socrates93 mjserrato minhcuongit dilavo chanindev

flutter_shimmer's Issues

Extremely high CPU usage causing phone to overheat

It seems that shimmering causes a ~40-60% CPU usage when running:

It's so severe that my phone overheats.

If I give it a stopping condition (i.e. loop: 2), it's reduced considerably:

Animation is taking whole element not individual widgets

Shimmer not applied:

Container -> BorderRadius
Animation to elements inside

  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?

Null-Safety

When we will be prepared to use Shimmer with Null-safety projects?

[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 of skeletons without Shimmer.fromColors:

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!

Making _Shimmer public to enable more fine tuned animations.

In my case, I would like to more fine-tune the animation of the Shimmer.
e.g. add an additional delay between the periods for the shimmer to have a pause in between.

It could be an additional feature of the Shimmer but if the _Shimmer Render Object Widget was public then there would be a possibility to design the animations to one's heart's content.

What do you think about exposing the _Shimmer?
Otherwise in order to make custom animations/interpolators, one needs to fork the repository.

Feature Request : Color update on state change

Is it possible that the color gets updated with the setState of the app? Not sure if maybe a repain since the asset is painted initiall with the specific color.

Thanks

Issue with Shimmer

Shimmer doesnt work for me
Always throw the following error

DS-PAINT
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(w=470.2, 0.0<=h<=Infinity)
...  size: MISSING
...  usefulness ratio: no metrics collected yet (never painted)
RenderObject: RenderRepaintBoundary#1f7bc relayoutBoundary=up4 NEEDS-LAYOUT NEEDS-PAINT
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=470.2, 0.0<=h<=Infinity)
  size: MISSING
  usefulness ratio: no metrics collected yet (never painted)
...  child: RenderFlex#75941 relayoutBoundary=up5 NEEDS-PAINT
...    needs compositing
...    parentData: <none> (can use size)
...    constraints: BoxConstraints(w=470.2, 0.0<=h<=Infinity)
...    size: MISSING
...    direction: vertical
...    mainAxisAlignment: start
...    mainAxisSize: max
...    crossAxisAlignment: start
...    textDirection: ltr
...    verticalDirection: down
...    child 1: RenderDecoratedBox#2896f relayoutBoundary=up6 NEEDS-PAINT
...      parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...      constraints: BoxConstraints(0.0<=w<=470.2, 0.0<=h<=Infinity)
...      size: Size(470.2, 202.7)
...      decoration: BoxDecoration
...        color: Color(0xff000000)
...      configuration: ImageConfiguration(bundle: PlatformAssetBundle#13cf0(), devicePixelRatio: 3.1, locale: en_US, textDirection: TextDirection.ltr, platform: android)
...      child: RenderFlex#a0c71 relayoutBoundary=up7 NEEDS-PAINT
...        parentData: <none> (can use size)
...        constraints: BoxConstraints(0.0<=w<=470.2, 0.0<=h<=Infinity)
...        size: Size(470.2, 202.7)
...        direction: vertical
...        mainAxisAlignment: start
...        mainAxisSize: max
...        crossAxisAlignment: center
...        verticalDirection: down
...        child 1: RenderSemanticsGestureHandler#2dfaa relayoutBoundary=up8 NEEDS-PAINT
...          parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...          constraints: BoxConstraints(0.0<=w<=470.2, 0.0<=h<=Infinity)
...          size: Size(470.2, 101.3)
...          gestures: tap
...        child 2: RenderSemanticsGestureHandler#111f0 relayoutBoundary=up8 NEEDS-PAINT
...          parentData: offset=Offset(0.0, 101.3); flex=null; fit=null (can use size)
...          constraints: BoxConstraints(0.0<=w<=470.2, 0.0<=h<=Infinity)
...          size: Size(470.2, 101.3)
...          gestures: <none>
...    child 2: RenderStack#51189 relayoutBoundary=up6 NEEDS-PAINT
...      parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...      constraints: BoxConstraints(0.0<=w<=470.2, 0.0<=h<=Infinity)
...      size: Size(470.2, 100.0)
...      alignment: AlignmentDirectional.center
...      textDirection: ltr
...      fit: loose
...      overflow: clip
...      child 1: RenderConstrainedBox#5f226 relayoutBoundary=up7 NEEDS-PAINT
...        parentData: not positioned; offset=Offset(0.0, 0.0) (can use size)
...        constraints: BoxConstraints(0.0<=w<=470.2, 0.0<=h<=Infinity)
...        size: Size(470.2, 100.0)
...        additionalConstraints: BoxConstraints(0.0<=w<=Infinity, h=100.0)
...        child: RenderDecoratedBox#fa226 relayoutBoundary=up8 NEEDS-PAINT
...          parentData: <none> (can use size)
...          constraints: BoxConstraints(0.0<=w<=470.2, h=100.0)
...          size: Size(470.2, 100.0)
...          decoration: BoxDecoration
...            image: DecorationImage(AssetImage(bundle: null, name: "images/radio_bg.jpg"), BoxFit.fill, center)
...          configuration: ImageConfiguration(bundle: PlatformAssetBundle#13cf0(), devicePixelRatio: 3.1, locale: en_US, textDirection: TextDirection.ltr, platform: android)
...    child 3: RenderDecoratedBox#46909 relayoutBoundary=up6 NEEDS-PAINT
...      needs compositing
...      parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...      constraints: BoxConstraints(0.0<=w<=470.2, 0.0<=h<=Infinity)
...      size: MISSING
...      decoration: BoxDecoration
...        color: Color(0xff3c434d)
...      configuration: ImageConfiguration(bundle: PlatformAssetBundle#13cf0(), devicePixelRatio: 3.1, locale: en_US, textDirection: TextDirection.ltr, platform: android)
...      child: RenderPadding#82dc2 relayoutBoundary=up7 NEEDS-PAINT
...        needs compositing
...        parentData: <none> (can use size)
...        constraints: BoxConstraints(0.0<=w<=470.2, 0.0<=h<=Infinity)
...        size: MISSING
...        padding: EdgeInsets(10.0, 10.0, 1.0, 10.0)
...        textDirection: ltr
...        child: RenderFlex#46901 relayoutBoundary=up8 NEEDS-PAINT
...          needs compositing
...          parentData: offset=Offset(10.0, 10.0) (can use size)
...          constraints: BoxConstraints(0.0<=w<=459.2, 0.0<=h<=Infinity)
...          size: MISSING
...          direction: vertical
...          mainAxisAlignment: start
...          mainAxisSize: max
...          crossAxisAlignment: center
...          verticalDirection: down
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception Caught By rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
RenderBox was not laid out: RenderRepaintBoundary#1f7bc relayoutBoundary=up4 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1683 pos 12: 'hasSize'

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=BUG.md

When the exception was thrown, this was the stack: 
#2      RenderBox.size (package:flutter/src/rendering/box.dart:1683:12)
#3      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:106:20)
#4      RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
#5      RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:165:27)
#6      RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
...
The following RenderObject was being processed when the exception was fired: RenderIndexedSemantics#b483a relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT
...  needs compositing
...  parentData: index=0; layoutOffset=0.0 (can use size)
...  constraints: BoxConstraints(w=470.2, 0.0<=h<=Infinity)
...  semantic boundary
...  size: MISSING
...  index: 0
RenderObject: RenderIndexedSemantics#b483a relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT
  needs compositing
  parentData: index=0; layoutOffset=0.0 (can use size)
  constraints: BoxConstraints(w=470.2, 0.0<=h<=Infinity)
  semantic boundary
  size: MISSING
  index: 0
...  child: RenderRepaintBoundary#1f7bc relayoutBoundary=up4 NEEDS-PAINT
...    needs compositing
...    parentData: <none> (can use size)
...    constraints: BoxConstraints(w=470.2, 0.0<=h<=Infinity)
...    size: MISSING
...    usefulness ratio: no metrics collected yet (never painted)
...    child: RenderFlex#75941 relayoutBoundary=up5 NEEDS-PAINT
...      needs compositing
...      parentData: <none> (can use size)
...      constraints: BoxConstraints(w=470.2, 0.0<=h<=Infinity)
...      size: MISSING
...      direction: vertical
...      mainAxisAlignment: start
...      mainAxisSize: max
...      crossAxisAlignment: start
...      textDirection: ltr
...      verticalDirection: down
...      child 1: RenderDecoratedBox#2896f relayoutBoundary=up6 NEEDS-PAINT
...        parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...        constraints: BoxConstraints(0.0<=w<=470.2, 0.0<=h<=Infinity)
...        size: Size(470.2, 202.7)
...        decoration: BoxDecoration
...          color: Color(0xff000000)
...        configuration: ImageConfiguration(bundle: PlatformAssetBundle#13cf0(), devicePixelRatio: 3.1, locale: en_US, textDirection: TextDirection.ltr, platform: android)
...        child: RenderFlex#a0c71 relayoutBoundary=up7 NEEDS-PAINT
...          parentData: <none> (can use size)
...          constraints: BoxConstraints(0.0<=w<=470.2, 0.0<=h<=Infinity)
...          size: Size(470.2, 202.7)
...          direction: vertical
...          mainAxisAlignment: start
...          mainAxisSize: max
...          crossAxisAlignment: center
...          verticalDirection: down
...      child 2: RenderStack#51189 relayoutBoundary=up6 NEEDS-PAINT
...        parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...        constraints: BoxConstraints(0.0<=w<=470.2, 0.0<=h<=Infinity)
...        size: Size(470.2, 100.0)
...        alignment: AlignmentDirectional.center
...        textDirection: ltr
...        fit: loose
...        overflow: clip
...        child 1: RenderConstrainedBox#5f226 relayoutBoundary=up7 NEEDS-PAINT
...          parentData: not positioned; offset=Offset(0.0, 0.0) (can use size)
...          constraints: BoxConstraints(0.0<=w<=470.2, 0.0<=h<=Infinity)
...          size: Size(470.2, 100.0)
...          additionalConstraints: BoxConstraints(0.0<=w<=Infinity, h=100.0)
...      child 3: RenderDecoratedBox#46909 relayoutBoundary=up6 NEEDS-PAINT
...        needs compositing
...        parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...        constraints: BoxConstraints(0.0<=w<=470.2, 0.0<=h<=Infinity)
...        size: MISSING
...        decoration: BoxDecoration
...          color: Color(0xff3c434d)
...        configuration: ImageConfiguration(bundle: PlatformAssetBundle#13cf0(), devicePixelRatio: 3.1, locale: en_US, textDirection: TextDirection.ltr, platform: android)
...        child: RenderPadding#82dc2 relayoutBoundary=up7 NEEDS-PAINT
...          needs compositing
...          parentData: <none> (can use size)
...          constraints: BoxConstraints(0.0<=w<=470.2, 0.0<=h<=Infinity)
...          size: MISSING
...          padding: EdgeInsets(10.0, 10.0, 1.0, 10.0)
...          textDirection: ltr
════════════════════════════════════════════════════════════════════════════════════════════════════

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

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

port to flutter_web

hi, i just want to request please make shimmer for flutter_web. It's same pattern algho but different material lib.

I have same Issue In My app When i use the release version the shimmer not update ui still loading and not show the data When i use Debug Mode Working Good.

Version:
shimmer version : 1.1.2

Flutter Doctor:

[√] Flutter (Channel stable, 1.22.4, on Microsoft Windows [Version 10.0.19041.746], locale en-GB)
    • Flutter version 1.22.4 at I:\flutter\flutter
    • Framework revision 1aafb3a8b9 (3 months ago), 2020-11-13 09:59:28 -0800
    • Engine revision 2c956a31c0
    • Dart version 2.10.4


[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at G:\android\Android\sdkn
    • Platform android-30, build-tools 30.0.2
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 49.0.1
    • Dart plugin version 192.8052
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] VS Code (version 1.52.1)
    • VS Code at C:\Users\Java\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.18.1

[√] Connected device (4 available)
    • Android SDK built for x86 (mobile) • emulator-5554 • android-x86    • Android 7.0 (API 24) (emulator)
    • Web Server (web)                   • web-server    • web-javascript • Flutter Tools
    • Chrome (web)                       • chrome        • web-javascript • Google Chrome 87.0.4280.141
    • Edge (web)                         • edge          • web-javascript • Microsoft Edge 87.0.664.75

• No issues found!

Code :

Scaffold(
        backgroundColor: MyColors().background_color,
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(0),
          child: AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0,
            brightness: Brightness.light,
          ),
        ),
        body: Consumer<CityDetailsProvider>(
            builder: (ctx, data, child) =>
                data.waitCityData || data.city_data.name == null
                    ? Shimmer.fromColors(
                        baseColor: Colors.grey[300],
                        highlightColor: Colors.grey[100],
                        enabled: data.waitCityData,
                        child: _buildCityDetails(data))
                    : _buildCityDetails(data)));
  }

Originally posted by @mahmoudalaa97 in #36 (comment)

Delay between shimmers

Hi,
I've tried a bunch of different stuff in a lot of places and i can't figure out how to set a delay between two shimmer animations, instead of the animation to starts over once it's finished. Any idea how to achieve this ?

Thanks a lot for your help, and for your awesome package !

Add `onFinished` callback

Awesome package, combined with Stack it can be applied to any widget nicely.
Would it be possible to add an onFinished callback to remove it completely from the Stack after the repeats are over?

ShimmerDirection.ttb cuts off with Shimmer.fromColors

The transition cuts off right before the end when using ShimmerDirection.ltb.
Not reproducible with other options.

return Shimmer.fromColors(
	baseColor: colors.surface,
	highlightColor: colors.surfaceVariant,
	direction: ShimmerDirection.ttb,
	child: Column(mainAxisSize: MainAxisSize.min, children: [
		Padding(
			padding: Edges.horizontalLarge,
			child: Container(width: 100, color: colors.surface)),
		for (final _ in List.generate(5, (index) => index))
			ListTile(
				leading: Container(
					height: 24,
					width: 24,
					decoration:  BoxDecoration(
						color: colors.surface,
						shape: BoxShape.circle,
					),
				),
				title: Container(
					height: 16,
					width: 150,
					decoration: BoxDecoration(
						color: colors.surface,
						borderRadius: Corners.allFull,
					),
				)
			),
		],
	),
);

Screen_Recording_20230525-192937.mp4

Shimmer issue

Shimmer.fromColors() does not work in the latest Flutter sdk. I don't know why is this happening.

[Feature Request] Shimmer Direction at ANY angle

Add support for shimmer direction at any angle. Shimmer currently supports the following four directions:

shimmer.dart

///
/// An enum defines all supported directions of shimmer effect
///
/// * [ShimmerDirection.ltr] left to right direction
/// * [ShimmerDirection.rtl] right to left direction
/// * [ShimmerDirection.ttb] top to bottom direction
/// * [ShimmerDirection.btt] bottom to top direction
///
enum ShimmerDirection { ltr, rtl, ttb, btt }

Proposal:
Change Shimmer direction to accept a double which represents degrees (or radians).
Static constants can be used for the existing directions of ltr, rtl, ttb, btt for minimal changes to existing clients.

Not working in release build

Shimmer

support dark theme

shimmer on dark theme -> animation not visible (for human eyes)

we need dark theme support

shimmer changes color of child button

Hi, I am using shimmer and it is changing the color of children elevated button. the color style of elevated button itself is ignored.

Using the basecolor of shimmer changes color but the text and button color then gets same and no text can be seen inside of button.

Flutter Doctor

flutter doctor -v
[√] Flutter (Channel stable, 2.2.3, on Microsoft Windows [Version 10.0.19043.1083], locale en-US)
    • Flutter version 2.2.3 at C:\flutter
    • Framework revision f4abaa0735 (11 days ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Anas\AppData\Local\Android\sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)

[√] VS Code (version 1.57.1)
    • VS Code at C:\Users\Anas\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension can be installed from:
       https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected device (3 available)
    • Android SDK built for x86 (mobile) • emulator-5554 • android-x86    • Android 8.1.0 (API 27) (emulator)
    • Chrome (web)                       • chrome        • web-javascript • Google Chrome 91.0.4472.124
    • Edge (web)                         • edge          • web-javascript • Microsoft Edge 91.0.864.67

• No issues found!

Shimmed items on web are rendered differently compared to mobile

I'm currently working on adding web support to mobile app and figured out that some shimmed items are rendered differently on web and mobile.

Here is the example for one of the screens:
Mobile (iOS):

Web:

The screen is constructed via CustomScrollView. As you can see there's a strange offset in cards on web (top and left is twice greater than bottom and right) and two rects on top are not visible (they appear only on scroll):

Screen.Recording.2021-03-29.at.14.42.33.mov

flutter doctor -v

[✓] Flutter (Channel dev, 2.1.0-12.1.pre, on macOS 11.3 20E5217a darwin-x64, locale en-US)
    • Flutter version 2.1.0-12.1.pre at /Users/vanelizarov/flutter
    • Framework revision 8264cb3e8a (3 weeks ago), 2021-03-10 12:37:57 -0800
    • Engine revision 711ab3fda0
    • Dart version 2.13.0 (build 2.13.0-116.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/vanelizarov/Library/Android/sdk
    • Platform android-30, build-tools 29.0.2
    • ANDROID_HOME = /Users/vanelizarov/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /Users/vanelizarov/Documents/dev/torg/flutter_web/chrome.sh

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 50.0.1
    • Dart plugin version 193.7547
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.54.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.20.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 11.3 20E5217a darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 90.0.4430.40 beta

• No issues found!

Web not working in any way

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

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

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

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

════════ Exception caught by scheduler library ═════════════════════════════════════════════════════
The following UnimplementedError was thrown during a scheduler callback:
UnimplementedError

When the exception was thrown, this was the stack: 
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 212:49  throw_
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/html/scene_builder.dart 231:5              pushShaderMask
packages/flutter/src/rendering/layer.dart 1825:26                                                                          addToScene
packages/flutter/src/rendering/layer.dart 444:5                                                                            [_addToSceneWithRetainedRendering]
packages/flutter/src/rendering/layer.dart 1035:14                                                                          addChildrenToScene
...
════════════════════════════════════════════════════════════════════════════════════════════════════

I keep receiving this Error while trying to use the Shimmer Package for Web.

Example Code for a not working widget:

class LoadingSubMenuButton extends StatelessWidget {
  final double width;
  final double horizontalMargin;

  const LoadingSubMenuButton({
    Key key,
    this.width,
    this.horizontalMargin = 5,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomContainer(
      height: 35,
      margin: EdgeInsets.symmetric(horizontal: this.horizontalMargin),
      padding: const EdgeInsets.symmetric(horizontal: 7),
      width: width,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ShimmerBox(height: 20, width: 90,),
        ],
      ),
    );
  }
}

class ShimmerBox extends StatelessWidget {
  final double height;
  final double width;

  const ShimmerBox({Key key, @required this.height, @required this.width,}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: Colors.grey,
      highlightColor: Colors.grey[200],
      child: Container(
        height: height,
        width: width,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          color: Colors.black,
        ),
      ),
    );
  }
}

This is my flutter doctor -v output:

[√] Flutter (Channel dev, 1.22.0-1.0.pre, on Microsoft Windows [Version 10.0.19041.450], locale de-DE)
    • Flutter version 1.22.0-1.0.pre at C:\Users\Besitzer\fvm\versions\dev
    • Framework revision ce40de69b7 (8 days ago), 2020-08-20 07:31:50 -0700
    • Engine revision 81027ab0cc
    • Dart version 2.10.0 (build 2.10.0-45.0.dev)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at C:\Users\Besitzer\AppData\Local\Android\Sdk
    • Platform android-30, build-tools 30.0.1
    • ANDROID_SDK_ROOT = C:\Users\Besitzer\AppData\Local\Android\Sdk
    • Java binary at: C:\Users\Besitzer\AppData\Local\JetBrains\Toolbox\apps\AndroidStudio\ch-0\193.6626763\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 40.1.2
    • Dart plugin version 191.8423
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[!] Android Studio (version 4.0)
    • Android Studio at C:\Users\Besitzer\AppData\Local\JetBrains\Toolbox\apps\AndroidStudio\ch-0\193.6626763
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] Connected device (4 available)
    • Pixel 3a (mobile) • 98GAY14VV1 • android-arm64  • Android 11 (API 30)
    • Web Server (web)  • web-server • web-javascript • Flutter Tools
    • Chrome (web)      • chrome     • web-javascript • Google Chrome 84.0.4147.135
    • Edge (web)        • edge       • web-javascript • Microsoft Edge 84.0.522.63

! Doctor found issues in 1 category.

I would love to receive information, if I am doing something completely wrong, or if this is an actual issue with the plugin.

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 21cc87b

Usage:

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

[Bug] Poor performance on mobile web

Screen record https://photos.app.goo.gl/y7fdonK3epG4swJp7

Steps to reproduce

Build example (I just changed item count from 6 to 200 on Loading List screen) for web using either html or canvaskit:
flutter build web --web-renderer html or flutter build web --web-renderer canvaskit
This could require to use example as a package itself
Go to build folder: cd build/web
Serve this folder: python -m http.server 8000
Connect to your computer from your phone, e.g. something like 192.168.1.156:8000
Go to Loading list
See how FPS drops significantly but this is quite light screen

P.S. Maybe it's an issue of Flutter itself

Web show UnimplementedError

@hnvn
When I implement shimmer package app on web app then it's show below error but it's working om mobile side:

======== Exception caught by scheduler library =====================================================
UnimplementedError
====================================================================================================

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)

Starting animation blinks too intensive

Here is an example of how it looks

Does not work with SliverList

Was trying it with SliverList but this the error I get:
A RenderViewport expected a child of type RenderSliver but received a child of type _ShimmerFilter.
A RenderViewport expected a child of type RenderSliver but received a child of type RenderErrorBox.

ShimmerDirection not changing between different Widgets

Demonstration (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.

Material/Card messes up shimmer.

Trying to create a shimmer with a material or card causes it to glitch out.

[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:

Expected Output:

UnimplementedError. On web

Another exception was thrown: UnimplementedError . On web

Images in the background

It would be great to be able to put a colored image as a child.

feature request

Is it possible to have a 'repeat' property that enables the animation to stop after n times?
(with 0, zero, for repeat forever - as it does today)

thanks

feature request

This package is awesome!
Can there be an adjustable break between each run of the shimmer effect? This may be useful for simulating shiny effect like glowing or else. It will glow once periodically, not keep glowing.
Thank you!

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!

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?

Can I stop shimmer on specific bool variable

I want to stop shimmer effect on a particular bool variable.Is this possible in your plugins?Read.md provides less information regarding it.

Not supported for web.

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

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

[BUG] period changed not apply when setState

I want to change Shimmer period during runtime but it didn't work.

How can I use shimmer with rounded borders?

I tried using a container with correct decorations but child shimmer still remains rectangle.

Synchronize multiple `Shimmers` automatically

Currently, to synchronize multiple widgets showing shimmers, you have to create a Shimmer wrapping all those widgets. This also doesn't allow us to add any non-shimmering widget inside.

Maybe, instead of calculating the progress locally for each Shimmer, you could globally synchronize them by transforming local to global offsets (RenderBox.localToGlobal) and using a global time (DateTime.now()). The Shimmer's position would then be, e.g. for ShimmerDirection.ltr:

final progress = (DateTime.now().millisecondsSinceEpoch / period.inMilliseconds) % 1;
final position = width * progress - localToGlobal(offset).dx;

Pros

It's a common use case to display multiple Shimmer's on one page and you can't always wrap a single Shimmer around all required children. And even if you could do so, this approach gives you more flexibility.

Cons

Having only a small Shimmer on a large display, it can take some time until the highlight actually is in range of the child widget.
Due to the above argument, this would be a breaking change.

WARNING: Too many active WebGL contexts. Oldest context will be lost.

Is it suppose to be?
never end of pumping warning, could make any developer panic!

Show/hide shimmer effect

Expected behaviour - when enabled: false, hide shimmer effect but show children
Current behaviour - stops the animation.
Because of it I have to create 2 trees - a shimmer tree with fake widgets and a tree with actual widgets

Please consider using enabled to show/hide shimmering, and period: 0 is for stopping the animation

Shimmer on flutter web throwing NoSuchMethodError

Shimmer on flutter web throwing "NoSuchMethodError: method not found: 'toString' on null". Only in web app running on Android on Chrome.

It's not a bug, ask a question!

Thanks for the library.
I have a question to ask you.

I want to combine two components to make a progress bar with Shimmer.

But the child property received by Shimmer.fromColors must require a Container with color, and the Container will inherit the size of the parent. Probably related to the filter.

It's not elegant to write it this way, I'd rather pass a SizedBox() when overlaying, e.g.
Shimmer.fromColors(
baseColor: pColor,
highlightColor: Colors.white70,
child: SizedBox(),
),

Can you tell me the reason why I can't use SizedBox().

import 'package:flutter/material.dart';
import 'package:percent_indicator/linear_percent_indicator.dart';
import 'package:shimmer/shimmer.dart';

class MyLineProgress extends StatelessWidget {
  final double percent; // 0.0 - 1.0
  final double height;
  final Color? progressColor;
  const MyLineProgress({
    super.key,
    this.progressColor,
    this.height = 3.0,
    required this.percent,
  });

  @override
  Widget build(BuildContext context) {
    final pColor = progressColor ?? Theme.of(context).primaryColor;
    final pFlex1 = (percent * 100).toInt();
    final pFlex2 = 100 - pFlex1;
    return SizedBox(
      height: height,
      child: Stack(
        children: [
          LinearPercentIndicator(
            padding: const EdgeInsets.all(0),
            animation: true,
            animationDuration: 2500,
            animateFromLastPercent: true,
            percent: percent,
            lineHeight: height,
            progressColor: pColor,
          ),
          Row(
            children: [
              if (pFlex1 != 0)
                Flexible(
                  flex: pFlex1,
                  child: Shimmer.fromColors(
                    baseColor: pColor,
                    highlightColor: Colors.white70,
                    // child: Container(color: Colors.red), 
                    child: const Material(
                      color: Colors.red,
                      child: SizedBox.expand(),
                    ),
                  ),
                ),
              Flexible(flex: pFlex2, child: const SizedBox()),
            ],
          ),
        ],
      ),
    );
  }
}

Shimmer on flutter web throwing UnimplementedError

Hello, I have this code:

  const ProductCard({Key? key}) : super(key: key);

  @override
  _ProductCardState createState() => _ProductCardState();
}

class _ProductCardState extends State<ProductCard> {
  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: Colors.grey[300]!,
      highlightColor: Colors.grey[100]!,
      enabled: true,
      child: Column(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Stack(
            alignment: AlignmentDirectional.topEnd,
            children: <Widget>[
              Image.asset("assets/images/placeholders/1.png"),
              Container(
                margin: EdgeInsets.only(top: 10.0, right: 10.0),
                padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 1.0),
                color: BROWN,
                child: Text(
                  "NEW",
                  style: Theme.of(context).textTheme.headline5,
                ),
              )
            ],
          ),
          SizedBox(height: 5.0),
          Text(
            translate(Keys.Pages_Products_Category),
            style: Theme.of(context).textTheme.headline6,
          ),
          SizedBox(height: 5.0),
          Text(
            "Product Name",
            style:
                Theme.of(context).textTheme.headline5!.copyWith(color: BLACK),
          ),
          SizedBox(height: 5.0),
          Text(
            "5000.00 DZD",
            style: Theme.of(context).textTheme.caption,
          ),
        ],
      ),
    );
  }
}

When i try to run it on the web, it throws UnimplementedError:

======== Exception caught by scheduler library =====================================================
The following UnimplementedError was thrown during a scheduler callback:
UnimplementedError

When the exception was thrown, this was the stack: 
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 236:49  throw_
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/canvaskit/layer_scene_builder.dart 196:5   pushShaderMask
packages/flutter/src/rendering/layer.dart 1779:26                                                                          addToScene
packages/flutter/src/rendering/layer.dart 407:5                                                                            [_addToSceneWithRetainedRendering]
packages/flutter/src/rendering/layer.dart 994:14                                                                           addChildrenToScene

any idea about that? how to fix that?

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

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

error shimmer on ios browser

shimmer effect not smooth #49