flutter_shimmer

Creator: coderz1093

Last updated:

Add to Cart

Description:

flutter shimmer

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 ❤️ 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,
),|
copied to clipboard
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)
copied to clipboard
# 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

copied to clipboard
# 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)
],
),




copied to clipboard
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,
),
copied to clipboard
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,
),
copied to clipboard
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,
),
copied to clipboard
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,
),
copied to clipboard
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,
),
copied to clipboard
Thank for your love and support
if you have any suggestions let me know
copied to clipboard

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Customer Reviews

There are no reviews.