{"id":13548894,"url":"https://github.com/skaran921/flutter_shimmer","last_synced_at":"2025-10-31T22:30:34.341Z","repository":{"id":46826511,"uuid":"231570732","full_name":"skaran921/flutter_shimmer","owner":"skaran921","description":"Shimmer effect package for flutter","archived":false,"fork":false,"pushed_at":"2021-09-23T11:22:24.000Z","size":124743,"stargazers_count":43,"open_issues_count":0,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-29T09:43:37.413Z","etag":null,"topics":["facebook-loader","flutter","hacktoberfest","hacktoberfest-accepted","hacktoberfest2022","loader","shimmer"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skaran921.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-03T11:06:04.000Z","updated_at":"2024-08-17T20:41:32.000Z","dependencies_parsed_at":"2022-09-23T05:13:59.092Z","dependency_job_id":null,"html_url":"https://github.com/skaran921/flutter_shimmer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skaran921%2Fflutter_shimmer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skaran921%2Fflutter_shimmer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skaran921%2Fflutter_shimmer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skaran921%2Fflutter_shimmer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skaran921","download_url":"https://codeload.github.com/skaran921/flutter_shimmer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238829554,"owners_count":19537720,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["facebook-loader","flutter","hacktoberfest","hacktoberfest-accepted","hacktoberfest2022","loader","shimmer"],"created_at":"2024-08-01T12:01:15.730Z","updated_at":"2025-02-17T05:30:59.461Z","avatar_url":"https://github.com/skaran921.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"# flutter_shimmer\r\n\r\nflutter_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.\r\n\r\n### Show some :heart: and star the repo to support the project\r\n\r\n| # Shimmer Mode                | # Screenshot             | # Code Example                                         |\r\n| ----------------------------- | ------------------------ | ------------------------------------------------------ |\r\n| # Play Store Shimmer          | ![](./screenshots/6.gif) | PlayStoreShimmer()                                     |\r\n| # Light Mode Shimmer          | ![](./screenshots/1.gif) | ListTileShimmer()                                      |\r\n| # Dark Mode Shimmer           | ![](./screenshots/2.gif) | ListTileShimmer(isDarkMode: true)                      |\r\n| # Purplish Mode Shimmer       | ![](./screenshots/3.gif) | ListTileShimmer(isPurplishMode: true)                  |\r\n| # Purplish(Dark) Mode Shimmer | ![](./screenshots/4.gif) | ListTileShimmer(isPurplishMode: true,isDarkMode: true) |\r\n| # CustomColor Mode            | ![](./screenshots/5.gif) | ProfileShimmer(hasCustomColors: true,                  |\r\n\r\n          colors: [Color(0xFF651fff), Color(0xFF834bff), Color(0xFF4615b2)],\r\n        ),                                      |\r\n\r\n          // Step 1: set hasCustomColors property to true\r\n          hasCustomColors: true,\r\n          // Step 2: give 3 colors to colors property\r\n          colors: [\r\n            // Dark color\r\n            Color(0xFF618833),\r\n            // light color\r\n            Color(0xFFa2cf6e),\r\n            // Medium color\r\n            Color(0xFF8bc34a)\r\n          ],\r\n          hasBottomLines: true,\r\n          // isDarkMode: true,\r\n        ),|\r\n\r\n# Get Started\r\n\r\n```\r\n #Color Mode\r\n     There are three color mode in the flutter_shimmer package\r\n      1. Light Mode\r\n      2. Dark Mode\r\n      3. Purplish Mode\r\n      4. Custom Color Mode (New)\r\n```\r\n\r\n```\r\n# Optional Options:\r\n    [isRectBox]: when it is true then it will show Rectancle shape else(false) show circle shape by defult its value false\r\n    [isDarkMode]: when it is true then it will use black bg color otherwise it use transparent color by defult its value false\r\n    [isPurplishMode]: when it is true then it will use little bit purplish bg color otherwise it use transparent color by defult its value false\r\n    [isDisabledAvatar]: when it is true then it will hide circle avatar by default it's false\r\n    [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.\r\n    [beginAlign]: it will set the begin value for gradientColor by defult its value Alignment.topLeft\r\n    [endAlign]: it will set the end value for gradientColor by defult its value Alignment.bottomRight\r\n    [hasBottomBox]: when it is true then it will show bottom Rect style Boxes otherwise its hide the Boxes by defult its value false\r\n    [padding]: it wiil set the padding of parent container by default its value 16.0 from all side(left,right,top,bottom)\r\n    [margin]: it wiil set the margin of parent container by default its value 16.0 from all side(left,right,top,bottom)\r\n    [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\r\n    [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\r\n    Note: make sure the colors property contains only 3 colors not more or lesser than 3 othewise it will use its default colors\r\n\r\n```\r\n\r\n```\r\n# For Custom Colors:\r\n      for custom colors you need to take two steps\r\n\r\n         Step 1: set 'hasCustomColors' property to true\r\n         Step 2: give 3 colors to 'colors' property\r\n\r\n     # Example:\r\n         ListTileShimmer(\r\n          // Step 1: set hasCustomColors property to try\r\n          hasCustomColors: true,\r\n          // Step 2: give 3 colors to colors property\r\n          colors: [\r\n            // Dark color\r\n            Color(0xFF1769aa),\r\n            // light color\r\n            Color(0xFF4dabf5),\r\n            // Medium color\r\n            Color(0xFF2196f3)\r\n          ],\r\n        ),\r\n\r\n\r\n\r\n\r\n```\r\n\r\n# 1. ProfileShimmer\r\n\r\n```\r\n  1. Light Mode\r\n    ProfileShimmer(),\r\n\r\n  2. Dark Mode\r\n    ProfileShimmer( isDarkMode: true,),\r\n\r\n  3. PurplishMode with light Background\r\n\r\n     ProfileShimmer(\r\n      isPurplishMode: true,\r\n   ),\r\n\r\n  5. PurplishMode with dark Background\r\n\r\n     ProfileShimmer(\r\n      isPurplishMode: true,\r\n      isDarkMode:true\r\n   ),\r\n\r\n 6. With Bottom Lines:\r\n\r\n    ProfileShimmer(\r\n      hasBottomLines: true,\r\n   ),\r\n\r\n 7. Combination of all options\r\n\r\n    ProfileShimmer(\r\n      isPurplishMode: true,\r\n      hasBottomLines: true,\r\n      isDarkMode: true,\r\n   ),\r\n```\r\n\r\n# 2. ProfilePageShimmer\r\n\r\n```\r\n  1. Light Mode\r\n    ProfilePageShimmer(),\r\n\r\n  2. Dark Mode\r\n    ProfilePageShimmer( isDarkMode: true,),\r\n\r\n  3. PurplishMode with light Background\r\n\r\n     ProfilePageShimmer(\r\n      isPurplishMode: true,\r\n   ),\r\n\r\n  5. PurplishMode with dark Background\r\n\r\n     ProfilePageShimmer(\r\n      isPurplishMode: true,\r\n      isDarkMode:true\r\n   ),\r\n\r\n 6. With Bottom Boxes:\r\n\r\n    ProfilePageShimmer(\r\n      hasBottomBox: true,\r\n   ),\r\n\r\n 7. Combination of all options\r\n\r\n    ProfilePageShimmer(\r\n      isPurplishMode: true,\r\n      hasBottomLines: true,\r\n      isDarkMode: true,\r\n   ),\r\n```\r\n\r\n# 3. VideoShimmer\r\n\r\n```\r\n  1. Light Mode\r\n    VideoShimmer(),\r\n\r\n  2. Dark Mode\r\n    VideoShimmer( isDarkMode: true,),\r\n\r\n  3. PurplishMode with light Background\r\n\r\n     VideoShimmer(\r\n      isPurplishMode: true,\r\n   ),\r\n\r\n  5. PurplishMode with dark Background\r\n\r\n     VideoShimmer(\r\n      isPurplishMode: true,\r\n      isDarkMode:true\r\n   ),\r\n\r\n 6. With Bottom Lines:\r\n\r\n    VideoShimmer(\r\n      hasBottomLines: true,\r\n   ),\r\n\r\n 7. Combination of all options\r\n\r\n    VideoShimmer(\r\n      isPurplishMode: true,\r\n      hasBottomLines: true,\r\n      isDarkMode: true,\r\n   ),\r\n```\r\n\r\n# 4. ListTileShimmer\r\n\r\n```\r\n  1. Light Mode\r\n    ListTileShimmer(),\r\n\r\n  2. Dark Mode\r\n    ListTileShimmer( isDarkMode: true,),\r\n\r\n  3. PurplishMode with light Background\r\n\r\n     ListTileShimmer(\r\n      isPurplishMode: true,\r\n   ),\r\n\r\n  5. PurplishMode with dark Background\r\n\r\n     ListTileShimmer(\r\n      isPurplishMode: true,\r\n      isDarkMode:true\r\n   ),\r\n\r\n 6. With Bottom Lines:\r\n\r\n    ListTileShimmer(\r\n      hasBottomLines: true,\r\n   ),\r\n\r\n 7. Combination of all options\r\n\r\n    ListTileShimmer(\r\n      isPurplishMode: true,\r\n      hasBottomLines: true,\r\n      isDarkMode: true,\r\n   ),\r\n```\r\n\r\n# 5. PlayStoreShimmer\r\n\r\n```\r\n  1. Light Mode\r\n    PlayStoreShimmer(),\r\n\r\n  2. Dark Mode\r\n    PlayStoreShimmer( isDarkMode: true,),\r\n\r\n  3. PurplishMode with light Background\r\n\r\n     PlayStoreShimmer(\r\n      isPurplishMode: true,\r\n   ),\r\n\r\n  5. PurplishMode with dark Background\r\n\r\n     PlayStoreShimmer(\r\n      isPurplishMode: true,\r\n      isDarkMode:true\r\n   ),\r\n\r\n 6. With Bottom Lines:\r\n         note:   By deafult both lines are true\r\n\r\n   a) it will remove only first bottom line\r\n    ListTileShimmer(\r\n      hasBottomFirstLine:false\r\n     ),\r\n\r\n  b) it will remove only second bottom line\r\n     ListTileShimmer(\r\n      hasBottomSecondLine:false\r\n     ),\r\n\r\n  c) it will remove both bottom line\r\n     ListTileShimmer(\r\n      hasBottomFirstLine:false,\r\n      hasBottomSecondLine:false\r\n     ),\r\n\r\n 7. With Multiple options\r\n\r\n    PlayStoreShimmer(\r\n      isPurplishMode: true,\r\n      hasBottomLines: true,\r\n      isDarkMode: true,\r\n   ),\r\n```\r\n\r\n```\r\n   Thank for your love and support\r\n   if you have any suggestions let me know\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskaran921%2Fflutter_shimmer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskaran921%2Fflutter_shimmer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskaran921%2Fflutter_shimmer/lists"}