{"id":15435830,"url":"https://github.com/akashdivya/slimycard-animated-flutter-package","last_synced_at":"2026-01-11T04:43:00.897Z","repository":{"id":41844570,"uuid":"216064379","full_name":"AkashDivya/SlimyCard-Animated-Flutter-Package","owner":"AkashDivya","description":"SlimyCard provides a beautiful slime-like animation of a Card that separates into two different Cards, one at the top and the another at bottom. It is possible to put any custom widget in these two separate cards.","archived":false,"fork":false,"pushed_at":"2022-04-26T11:58:30.000Z","size":16179,"stargazers_count":278,"open_issues_count":9,"forks_count":57,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-20T12:06:53.000Z","etag":null,"topics":["animation","dart","flare-flutter","flutter","flutter-package"],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AkashDivya.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":"2019-10-18T16:23:31.000Z","updated_at":"2025-04-12T01:35:59.000Z","dependencies_parsed_at":"2022-08-29T05:00:58.761Z","dependency_job_id":null,"html_url":"https://github.com/AkashDivya/SlimyCard-Animated-Flutter-Package","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AkashDivya/SlimyCard-Animated-Flutter-Package","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AkashDivya%2FSlimyCard-Animated-Flutter-Package","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AkashDivya%2FSlimyCard-Animated-Flutter-Package/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AkashDivya%2FSlimyCard-Animated-Flutter-Package/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AkashDivya%2FSlimyCard-Animated-Flutter-Package/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AkashDivya","download_url":"https://codeload.github.com/AkashDivya/SlimyCard-Animated-Flutter-Package/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AkashDivya%2FSlimyCard-Animated-Flutter-Package/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267505099,"owners_count":24098346,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","flare-flutter","flutter","flutter-package"],"created_at":"2024-10-01T18:46:19.835Z","updated_at":"2026-01-11T04:43:00.871Z","avatar_url":"https://github.com/AkashDivya.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SlimyCard - Animated Flutter Package\n\nSlimyCard provides a beautiful slime-like animation of a Card that separates into two different Cards, one at the top and the another at bottom. It is possible to put any custom widget in these two separate cards.\n\n![Banner Image](https://raw.githubusercontent.com/AkashDivya/SlimyCard-Animated-Flutter-Package/master/images/SlimyCard-Animated-Flutter-Package-by-Akash-Divya.png)\n\n# How to install this package\n\n  - **1. Depend on it**\n\n    Add this to your flutter app's pubspec.yaml file:\n    \n    ```\n    dependencies:\n      slimy_card: ^1.0.4\n    ```\n    \n  - **2. Install it**\n    \n    You can install packages from the command line:\n\n    with Flutter:\n    \n    ```\n    $ flutter pub get\n    ```\n    \n    Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.\n    \n# How to use this package\n\n  - **1. Import it**\n  \n    In your Dart code, import the package as mentioned below:\n    \n    ```\n    import 'package:slimy_card/slimy_card.dart';\n    ```\n    \n  - **2. Use It**\n  \n    Create a ListView, and in its children use SlimyCard()\n    \n    ```\n    ListView(\n      children: \u003cWidget\u003e[\n        SlimyCard(),\n      ],\n    );\n    ```\n    \n  - **3. Customize It**\n    \n    You can customize SlimyCard as per need, by using the following parameters:\n    \n    ```\n    ListView(\n      children: \u003cWidget\u003e[\n        SlimyCard(\n          color: Colors.red,\n          width: 200,\n          topCardHeight: 400,\n          bottomCardHeight: 200,\n          borderRadius: 15,\n          topCardWidget: myWidget01(),\n          bottomCardWidget: myWidget02(),\n          slimeEnabled: true,\n        ),\n      ],\n    ),\n    ```\n    \n    **myWidget01** \u0026 **myWidget02** are your custom widget which you can display in Top Card \u0026 Bottom Card respectively.\n    \n# Actual ScreenShots\n\n  \u003cimg src=\"https://raw.githubusercontent.com/AkashDivya/SlimyCard-Animated-Flutter-Package/master/images/SlimyCard-Animated-Flutter-Package-by-Akash-Divya%20(1).gif\" width=\"250\" height=\"444.44\" /\u003e\u003cimg width=\"25\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/AkashDivya/SlimyCard-Animated-Flutter-Package/master/images/SlimyCard-Animated-Flutter-Package-by-Akash-Divya%20(2).gif\" width=\"250\" height=\"444.44\" /\u003e\u003cimg width=\"25\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/AkashDivya/SlimyCard-Animated-Flutter-Package/master/images/SlimyCard-Animated-Flutter-Package-by-Akash-Divya%20(3).gif\" width=\"250\" height=\"444.44\" /\u003e\n\n# How to get the status of this package\n\n  You can get the **real-time** status of this Package by wrapping the SlimeyCard in **StreamBuilder** as below:\n  \n  ```\n  StreamBuilder(\n    initialData: false,\n    stream: slimyCard.stream, //Stream of SlimyCard\n    builder: ((BuildContext context, AsyncSnapshot snapshot) {\n      return ListView(\n        children: \u003cWidget\u003e[\n          SlimyCard(\n            color: Colors.red,\n            width: 200,\n            topCardHeight: 400,\n            bottomCardHeight: 200,\n            borderRadius: 15,\n            topCardWidget: myWidget01(),\n            bottomCardWidget: myWidget02(),\n            slimeEnabled: true,\n          ),\n        ],\n      );\n    }),\n  ),\n  ```\n  \n  snapshot.data will contain the **real-time**\n  \n# State change in the Package\n\n  SlimeyCard also supports changing of state, check the code below:\n  \n  ```\n  SlimyCard(\n    topCardWidget: topCardWidget((snapshot.data)\n        ? 'assets/images/rock_aggresive.jpg'\n        : 'assets/images/rock_calm.jpg'),\n  ),\n  ```\n  \n  In the code above, **snapshot.data** contains status of **SlimeyCard** and have two states according to it \u0026 hence updates UI according to it.\n\n# App Demonstration Video\n\n  Cooming Soon...\n\n# About Me\n\nHi! my name is Akash Divya.\n\nI'm a veteran Designer/Animator with **10+ years** of experience. I always hated the excuses Developers gave me when they fail to implement my Design. One day, when I found about Flutter I said no more \u0026 started learning it.\n\n# Other Repo you may Like\n\n[![Explore Flutter Firebase](https://raw.githubusercontent.com/AkashDivya/Explore-Flutter-FireStore/master/images/Banner.jpg)](https://github.com/AkashDivya/Explore-Flutter-FireStore)\n\n[Visit this Repo](https://github.com/AkashDivya/Explore-Flutter-FireStore)\n\n# My Links\n\n**[Facebook](https://www.facebook.com/BadassDeveloperDesignerClub)**\n\n**[YouTube](https://www.youtube.com/channel/UCo7mhMbZXaNgpyT7gM6mWDQ)**\n\n**[Dribbble](https://www.dribbble.com/akashdivya)**\n\n**[Behance](https://www.behance.net/akashdivya)**\n\n**Email: akash.apd@gmail.com**\n\n**Now go out there and do what you Love.**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakashdivya%2Fslimycard-animated-flutter-package","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakashdivya%2Fslimycard-animated-flutter-package","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakashdivya%2Fslimycard-animated-flutter-package/lists"}