{"id":21759182,"url":"https://github.com/protheeuz/shimmer-alternative","last_synced_at":"2026-05-07T10:36:05.851Z","repository":{"id":243950984,"uuid":"813867502","full_name":"protheeuz/shimmer-alternative","owner":"protheeuz","description":"A Flutter package to create beautiful shimmer effects while loading cards, containers, text, and text fields. Enhance your Flutter apps with visually appealing loading animations.","archived":false,"fork":false,"pushed_at":"2024-07-07T19:10:03.000Z","size":10720,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-23T19:16:47.772Z","etag":null,"topics":["animation","dart","flutter","loading","loading-animations","shimmer","shimmer-android","shimmer-effect","widget"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/shimmer_alternative","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/protheeuz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":"FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["protheeuz"],"custom":["https://saweria.co/iqbalfauzien","https://www.paypal.com/paypalme/iqbalfauzien"]}},"created_at":"2024-06-11T22:42:11.000Z","updated_at":"2026-02-22T15:48:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"7d4b4155-8745-4c82-89ba-fbf08304f918","html_url":"https://github.com/protheeuz/shimmer-alternative","commit_stats":null,"previous_names":["protheeuz/shimmer-alternative"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/protheeuz/shimmer-alternative","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protheeuz%2Fshimmer-alternative","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protheeuz%2Fshimmer-alternative/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protheeuz%2Fshimmer-alternative/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protheeuz%2Fshimmer-alternative/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/protheeuz","download_url":"https://codeload.github.com/protheeuz/shimmer-alternative/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protheeuz%2Fshimmer-alternative/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32733907,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["animation","dart","flutter","loading","loading-animations","shimmer","shimmer-android","shimmer-effect","widget"],"created_at":"2024-11-26T11:29:41.682Z","updated_at":"2026-05-07T10:36:05.837Z","avatar_url":"https://github.com/protheeuz.png","language":"Dart","funding_links":["https://github.com/sponsors/protheeuz","https://saweria.co/iqbalfauzien","https://www.paypal.com/paypalme/iqbalfauzien"],"categories":[],"sub_categories":[],"readme":"# Shimmer Alternative\n![Pub Version](https://img.shields.io/pub/v/shimmer_alternative)\n[![Build](https://github.com/protheeuz/shimmer-alternative/actions/workflows/build.yml/badge.svg)](https://github.com/protheeuz/shimmer-alternative/actions/workflows/build.yml)\n![License: GPL-3.0](https://img.shields.io/badge/License-GPL--3.0-blue.svg)\n\nShimmer Alternative is a Flutter package designed to provide beautiful shimmer effects for loading states in your apps. This package is perfect for adding visually appealing animations to your cards, containers, text, and text fields, making the loading experience more engaging for users.\n\n```\nProperties\n\n- `child` (Widget): The widget below this widget in the tree.\n- `baseColor` (Color): The base color of the shimmer effect.\n- `highlightColor` (Color): The highlight color of the shimmer effect.\n- `duration` (Duration): The duration of the shimmer animation.\n- `direction` (ShimmerDirection): The direction of the shimmer animation.\n- `shape` (ShimmerShape): The shape of the shimmer effect.\n- `customGradient` (Gradient?): The custom gradient of the shimmer effect.\n- `isDarkMode` (bool): Whether to automatically adjust colors for dark mode.\n- `customShapeBuilder` (CustomShapeBuilder?): Custom shape builder callback.\n- `onAnimationStart` (VoidCallback?): Callback when the animation starts.\n- `onAnimationStop` (VoidCallback?): Callback when the animation stops.\n- `colorInterpolation` (double): The interpolation factor for color blending.\n- `opacity` (double): The opacity of the shimmer effect.\n- `loopCount` (int): The number of times the animation should loop.\n- `easing` (Curve): The easing curve for the animation.\n\n\nProperties ShimmerDirection\n\n- `ltr`: Left to right.\n- `rtl`: Right to left.\n- `ttb`: Top to bottom.\n- `btt`: Bottom to top.\n\nProperties ShimmerShape\n- `rectangle`: Rectangle shape\n- `circle`: Circle shape\n- `custom`: Custom shape\n```\n\n## Features\n\n- Customizable shimmer colors\n- Adjustable shimmer speed\n- Support for multiple directions (left-to-right, right-to-left, top-to-bottom, bottom-to-top)\n- Support for multiple shapes (rectangle, circle, custom)\n- Custom gradient support\n- Automatic dark mode adjustment\n- Easy integration with existing widgets\n- Lightweight and highly customizable\n- Animation control (pause and resume)\n- Interpolated colors and opacity control\n- Loop count and easing curve support\n\n## Getting Started\n\nTo use this package, add `shimmer_alternative` as a dependency in your `pubspec.yaml` file:\n\n```yaml\ndependencies:\n  shimmer_alternative: ^0.0.6\n```\n\n### Usage\nHere is a simple example of how to use Shimmer Alternative:\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:shimmer_alternative/shimmer_alternative.dart';\n\nvoid main() =\u003e runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n  const MyApp({Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      theme: ThemeData.light(),\n      darkTheme: ThemeData.dark(),\n      themeMode: ThemeMode.system,\n      home: Scaffold(\n        appBar: AppBar(\n          title: const Text('Shimmer Alternative Example'),\n        ),\n        body: Padding(\n          padding: const EdgeInsets.all(8.0),\n          child: Column(\n            children: [\n              ShimmerAlternative(\n                duration: const Duration(seconds: 2),\n                direction: ShimmerDirection.ttb,\n                isDarkMode: true,\n                child: Container(\n                  width: double.infinity,\n                  height: 150.0,\n                  color: Colors.grey[300],\n                ),\n              ),\n              const SizedBox(height: 20),\n              ShimmerAlternative(\n                duration: const Duration(seconds: 3),\n                direction: ShimmerDirection.btt,\n                child: const Text(\n                  'Loading text...',\n                  style: TextStyle(\n                    fontSize: 24.0,\n                    fontWeight: FontWeight.bold,\n                    color: Colors.grey[300],\n                  ),\n                ),\n              ),\n              const SizedBox(height: 20),\n              ShimmerAlternative(\n                duration: const Duration(seconds: 1),\n                direction: ShimmerDirection.rtl,\n                child: const TextField(\n                  decoration: InputDecoration(\n                    border: OutlineInputBorder(),\n                    labelText: 'Loading...',\n                    fillColor: Colors.grey[300],\n                    filled: true,\n                  ),\n                ),\n              ),\n              const SizedBox(height: 20),\n              ShimmerAlternative(\n                customGradient: const LinearGradient(\n                  colors: [Colors.red, Colors.blue, Colors.green],\n                  stops: [0.4, 0.5, 0.6],\n                ),\n                child: Container(\n                  width: double.infinity,\n                  height: 150.0,\n                  color: Colors.grey[300],\n                ),\n              ),\n              const SizedBox(height: 20),\n              ShimmerAlternative(\n                shape: ShimmerShape.custom,\n                customShapeBuilder: (canvas, size, paint) {\n                  Path path = Path();\n                  path.moveTo(size.width * 0.5, 0);\n                  path.lineTo(size.width, size.height);\n                  path.lineTo(0, size.height);\n                  path.close();\n                  canvas.drawPath(path, paint);\n                },\n                child: Container(\n                  width: double.infinity,\n                  height: 150.0,\n                  color: Colors.grey[300],\n                ),\n              ),\n            ],\n          ),\n        ),\n      ),\n    );\n  }\n}\n```\n\n### Customization\n\n### Shimmer Colors\nYou can customize the base color and highlight color of the shimmer effect:\n\n```dart\nShimmerAlternative(\n  baseColor: Colors.grey[300]!,\n  highlightColor: Colors.grey[100]!,\n  child: Container(\n    width: double.infinity,\n    height: 150.0,\n    color: Colors.grey[300],\n  ),\n);\n```\n\n### Shimmer Speed\nYou can adjust the speed of the shimmer effect by changing the duration parameter:\n\n```dart\nShimmerAlternative(\n  duration: Duration(seconds: 2),\n  child: Container(\n    width: double.infinity,\n    height: 150.0,\n    color: Colors.grey[300],\n  ),\n);\n```\n\n### Shimmer Direction\nYou can change the direction of the shimmer effect using the direction parameter:\n\n```dart\nShimmerAlternative(\n  direction: ShimmerDirection.ttb,\n  child: Container(\n    width: double.infinity,\n    height: 150.0,\n    color: Colors.grey[300],\n  ),\n);\n```\n\n### Shimmer Shape\nYou can change the shape of the shimmer effect using the shape parameter:\n\n```dart\nShimmerAlternative(\n  shape: ShimmerShape.circle,\n  child: Container(\n    width: 100.0,\n    height: 100.0,\n    color: Colors.grey[300],\n  ),\n);\n```\n\n### Shimmer Gradient\nYou can use a custom gradient for the shimmer effect by setting the customGradient parameter:\n\n```dart\nShimmerAlternative(\n  customGradient: LinearGradient(\n    colors: [Colors.red, Colors.blue, Colors.green],\n    stops: [0.4, 0.5, 0.6],\n  ),\n  child: Container(\n    width: double.infinity,\n    height: 150.0,\n    color: Colors.grey[300],\n  ),\n);\n```\n\n### Dark Mode Adjustment\nYou can automatically adjust the colors for dark mode by setting the isDarkMode parameter:\n\n```dart\nShimmerAlternative(\n  isDarkMode: true,\n  child: Container(\n    width: double.infinity,\n    height: 150.0,\n    color: Colors.grey[300],\n  ),\n);\n```\n\n### Custom Shape\nYou can define a custom shape for the shimmer effect by using the customShapeBuilder parameter:\n\n```dart\nShimmerAlternative(\n  shape: ShimmerShape.custom,\n  customShapeBuilder: (canvas, size, paint) {\n    Path path = Path();\n    path.moveTo(size.width * 0.5, 0);\n    path.lineTo(size.width, size.height);\n    path.lineTo(0, size.height);\n    path.close();\n    canvas.drawPath(path, paint);\n  },\n  child: Container(\n    width: double.infinity,\n    height: 150.0,\n    color: Colors.grey[300],\n  ),\n);\n```\n\n### Animation Control\nYou can pause and resume the shimmer animation using pauseAnimation and resumeAnimation methods.\n\n```dart\nfinal GlobalKey\u003cShimmerAlternativeState\u003e shimmerKey = GlobalKey\u003cShimmerAlternativeState\u003e();\n\nShimmerAlternative(\n  key: shimmerKey,\n  child: Container(\n    width: double.infinity,\n    height: 150.0,\n    color: Colors.grey[300],\n  ),\n);\n\nElevatedButton(\n  onPressed: () {\n    shimmerKey.currentState?.pauseAnimation();\n  },\n  child: const Text('Pause Animation'),\n);\n\nElevatedButton(\n  onPressed: () {\n    shimmerKey.currentState?.resumeAnimation();\n  },\n  child: const Text('Resume Animation'),\n);\n```\n\n## FAQ\n\n**Q: How do I customize the shimmer colors?**\n\nA: You can customize the shimmer colors by setting the baseColor and highlightColor properties.\n\n**Q: How do I change the speed of the shimmer animation?**\n\nA: You can change the speed by setting the duration property.\n\n**Q: Can I use ShimmerAlternative with other widgets like ListView or GridView?**\n\nA: Yes, you can use ShimmerAlternative with any widget.\n\n**Q: How do I use custom shapes in the shimmer effect?**\n\nA: You can set the shape property to ShimmerShape.custom and implement custom drawing logic in the customShapeBuilder callback.\n\n**Q: How do I use a custom gradient for the shimmer effect?**\n\nA: You can set the customGradient property to define a custom gradient.\n\n**Q: How do I enable dark mode adjustment?**\n\nA: You can set the isDarkMode property to true to automatically adjust the colors for dark mode.\n\n**Q: How do I control the shimmer animation?**\n\nA: You can use the pauseAnimation and resumeAnimation methods to control the shimmer animation.\n\n\n## Support the Project\nIf you find this project useful and would like to support its ongoing development, consider making a donation.\n\n[![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://www.paypal.com/paypalme/iqbalfauzien)  [![Donate Saweria](https://img.shields.io/badge/Donate-Saweria-brightgreen)](https://saweria.co/iqbalfauzien)\n\n![PayPal](https://www.paypal.com/paypalme/iqbalfauzien)\n\n![PayPal QR Code](assets/paypal_qr_code.png)\n\n![Saweria QR Code](assets/qr_code.png)\n\n\n## Contribution Guidelines\n\nThank you for considering contributing to Shimmer Alternative! Here are some guidelines to help you get started:\n\n1. Fork the repository.\n2. Create a new branch (`git checkout -b feature/your-feature`).\n3. Make your changes.\n4. Commit your changes (`git commit -m 'Add some feature'`).\n5. Push to the branch (`git push origin feature/your-feature`).\n6. Create a new Pull Request.\n\nPlease ensure your pull request adheres to the following guidelines:\n- Describe the changes in detail.\n- Update documentation if needed.\n- Write tests for new features.\n- Ensure code passes all tests and lints.\n\n### Contributing\nContributions are welcome! If you have any ideas, suggestions, or find a bug, please create an issue or submit a pull request.\n\nLicense\nThis project is licensed under the GPL-3.0 license - see the [LICENSE](https://github.com/protheeuz/shimmer-alternative?tab=GPL-3.0-1-ov-file#GPL-3.0-1-ov-file) file for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprotheeuz%2Fshimmer-alternative","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprotheeuz%2Fshimmer-alternative","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprotheeuz%2Fshimmer-alternative/lists"}