https://github.com/skaran921/flutter_shimmer
Shimmer effect package for flutter
https://github.com/skaran921/flutter_shimmer
facebook-loader flutter hacktoberfest hacktoberfest-accepted hacktoberfest2022 loader shimmer
Last synced: 8 months ago
JSON representation
Shimmer effect package for flutter
- Host: GitHub
- URL: https://github.com/skaran921/flutter_shimmer
- Owner: skaran921
- License: other
- Created: 2020-01-03T11:06:04.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-09-23T11:22:24.000Z (about 4 years ago)
- Last Synced: 2025-01-29T09:43:37.413Z (9 months ago)
- Topics: facebook-loader, flutter, hacktoberfest, hacktoberfest-accepted, hacktoberfest2022, loader, shimmer
- Language: Dart
- Homepage:
- Size: 119 MB
- Stars: 43
- Watchers: 2
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# flutter_shimmer
flutter_shimmer package for creating Shimmer effect that indicate a loading status, so instead of using ProgressBar or usual loader use Shimmer for a better design and user interface.
### Show some :heart: and star the repo to support the project
| # Shimmer Mode | # Screenshot | # Code Example |
| ----------------------------- | ------------------------ | ------------------------------------------------------ |
| # Play Store Shimmer |  | PlayStoreShimmer() |
| # Light Mode Shimmer |  | ListTileShimmer() |
| # Dark Mode Shimmer |  | ListTileShimmer(isDarkMode: true) |
| # Purplish Mode Shimmer |  | ListTileShimmer(isPurplishMode: true) |
| # Purplish(Dark) Mode Shimmer |  | ListTileShimmer(isPurplishMode: true,isDarkMode: true) |
| # CustomColor Mode |  | ProfileShimmer(hasCustomColors: true, |
colors: [Color(0xFF651fff), Color(0xFF834bff), Color(0xFF4615b2)],
), |
// Step 1: set hasCustomColors property to true
hasCustomColors: true,
// Step 2: give 3 colors to colors property
colors: [
// Dark color
Color(0xFF618833),
// light color
Color(0xFFa2cf6e),
// Medium color
Color(0xFF8bc34a)
],
hasBottomLines: true,
// isDarkMode: true,
),|
# Get Started
```
#Color Mode
There are three color mode in the flutter_shimmer package
1. Light Mode
2. Dark Mode
3. Purplish Mode
4. Custom Color Mode (New)
```
```
# Optional Options:
[isRectBox]: when it is true then it will show Rectancle shape else(false) show circle shape by defult its value false
[isDarkMode]: when it is true then it will use black bg color otherwise it use transparent color by defult its value false
[isPurplishMode]: when it is true then it will use little bit purplish bg color otherwise it use transparent color by defult its value false
[isDisabledAvatar]: when it is true then it will hide circle avatar by default it's false
[isDisabledButton]: Note:- this property only used in ListTileShimmer. when it's true then it will hide right side button shape shimmer from ListTileShimmer by default it's contain false value.
[beginAlign]: it will set the begin value for gradientColor by defult its value Alignment.topLeft
[endAlign]: it will set the end value for gradientColor by defult its value Alignment.bottomRight
[hasBottomBox]: when it is true then it will show bottom Rect style Boxes otherwise its hide the Boxes by defult its value false
[padding]: it wiil set the padding of parent container by default its value 16.0 from all side(left,right,top,bottom)
[margin]: it wiil set the margin of parent container by default its value 16.0 from all side(left,right,top,bottom)
[hasCustomColors]: it will allow you to use custom colors by default its value is false. set true if you want to use your own custom colors
[colors]: it will contains 3 colors list if you set "hasCustomColors" Property to true the your next step is give the list of colors to this colors property
Note: make sure the colors property contains only 3 colors not more or lesser than 3 othewise it will use its default colors
```
```
# For Custom Colors:
for custom colors you need to take two steps
Step 1: set 'hasCustomColors' property to true
Step 2: give 3 colors to 'colors' property
# Example:
ListTileShimmer(
// Step 1: set hasCustomColors property to try
hasCustomColors: true,
// Step 2: give 3 colors to colors property
colors: [
// Dark color
Color(0xFF1769aa),
// light color
Color(0xFF4dabf5),
// Medium color
Color(0xFF2196f3)
],
),
```
# 1. ProfileShimmer
```
1. Light Mode
ProfileShimmer(),
2. Dark Mode
ProfileShimmer( isDarkMode: true,),
3. PurplishMode with light Background
ProfileShimmer(
isPurplishMode: true,
),
5. PurplishMode with dark Background
ProfileShimmer(
isPurplishMode: true,
isDarkMode:true
),
6. With Bottom Lines:
ProfileShimmer(
hasBottomLines: true,
),
7. Combination of all options
ProfileShimmer(
isPurplishMode: true,
hasBottomLines: true,
isDarkMode: true,
),
```
# 2. ProfilePageShimmer
```
1. Light Mode
ProfilePageShimmer(),
2. Dark Mode
ProfilePageShimmer( isDarkMode: true,),
3. PurplishMode with light Background
ProfilePageShimmer(
isPurplishMode: true,
),
5. PurplishMode with dark Background
ProfilePageShimmer(
isPurplishMode: true,
isDarkMode:true
),
6. With Bottom Boxes:
ProfilePageShimmer(
hasBottomBox: true,
),
7. Combination of all options
ProfilePageShimmer(
isPurplishMode: true,
hasBottomLines: true,
isDarkMode: true,
),
```
# 3. VideoShimmer
```
1. Light Mode
VideoShimmer(),
2. Dark Mode
VideoShimmer( isDarkMode: true,),
3. PurplishMode with light Background
VideoShimmer(
isPurplishMode: true,
),
5. PurplishMode with dark Background
VideoShimmer(
isPurplishMode: true,
isDarkMode:true
),
6. With Bottom Lines:
VideoShimmer(
hasBottomLines: true,
),
7. Combination of all options
VideoShimmer(
isPurplishMode: true,
hasBottomLines: true,
isDarkMode: true,
),
```
# 4. ListTileShimmer
```
1. Light Mode
ListTileShimmer(),
2. Dark Mode
ListTileShimmer( isDarkMode: true,),
3. PurplishMode with light Background
ListTileShimmer(
isPurplishMode: true,
),
5. PurplishMode with dark Background
ListTileShimmer(
isPurplishMode: true,
isDarkMode:true
),
6. With Bottom Lines:
ListTileShimmer(
hasBottomLines: true,
),
7. Combination of all options
ListTileShimmer(
isPurplishMode: true,
hasBottomLines: true,
isDarkMode: true,
),
```
# 5. PlayStoreShimmer
```
1. Light Mode
PlayStoreShimmer(),
2. Dark Mode
PlayStoreShimmer( isDarkMode: true,),
3. PurplishMode with light Background
PlayStoreShimmer(
isPurplishMode: true,
),
5. PurplishMode with dark Background
PlayStoreShimmer(
isPurplishMode: true,
isDarkMode:true
),
6. With Bottom Lines:
note: By deafult both lines are true
a) it will remove only first bottom line
ListTileShimmer(
hasBottomFirstLine:false
),
b) it will remove only second bottom line
ListTileShimmer(
hasBottomSecondLine:false
),
c) it will remove both bottom line
ListTileShimmer(
hasBottomFirstLine:false,
hasBottomSecondLine:false
),
7. With Multiple options
PlayStoreShimmer(
isPurplishMode: true,
hasBottomLines: true,
isDarkMode: true,
),
```
```
Thank for your love and support
if you have any suggestions let me know
```