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]
A package provides an easy way to add shimmer effect in Flutter project
License: BSD 3-Clause "New" or "Revised" License
Thank you for taking the time to visit my github website.
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!
Shimmer not applied:
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?
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
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):
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):
[β] 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!
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!
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?
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>[
//...
],
),
),
);
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
Shimmer.fromColors() does not work in the latest Flutter sdk. I don't know why is this happening.
@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
====================================================================================================
shimmer on dark theme -> animation not visible (for human eyes)
we need dark theme support
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
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
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)
I tried using a container with correct decorations but child shimmer still remains rectangle.
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:
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
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)
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.
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 -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!
ββββββββ 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.
Add support for shimmer direction at any angle. Shimmer currently supports the following four directions:
///
/// 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.
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 (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:
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!
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
Trying to create a shimmer with a material or card causes it to glitch out.
Shimmer on flutter web throwing "NoSuchMethodError: method not found: 'toString' on null". Only in web app running on Android on Chrome.
shimmer effect not smooth #49
When we will be prepared to use Shimmer with Null-safety projects?
I want to change Shimmer period during runtime but it didn't work.
Screen record https://photos.app.goo.gl/y7fdonK3epG4swJp7
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
example
as a package itselfbuild
folder: cd build/web
python -m http.server 8000
192.168.1.156:8000
Loading list
P.S. Maybe it's an issue of Flutter itself
I want to stop shimmer effect on a particular bool variable.Is this possible in your plugins?Read.md provides less information regarding it.
hi, i just want to request please make shimmer for flutter_web. It's same pattern algho but different material lib.
Thank you!
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;
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.Shimmer
on a large display, it can take some time until the highlight actually is in range of the child widget.Another exception was thrown: UnimplementedError . On web
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)
],
)
],
),
))
],
),
),
);
}
}
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],
),
),
],
),
);
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?
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.
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()),
],
),
],
),
);
}
}
It would be great to be able to put a colored image as a child.
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,
),
)
),
],
),
);
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 !
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',
),
),
),
),
),
),
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.
direction is working for all Shimmers seperatly.
ββββββββ Exception caught by scheduler library βββββββββββββββββββββββββββββββββ
UnimplementedError
βββββββββββββββββββββββββββββββββ
I'm getting this error while running this package on flutter web.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.