{"id":23425331,"url":"https://github.com/shantanu66/fluid-action-card","last_synced_at":"2026-03-11T09:05:41.650Z","repository":{"id":56828966,"uuid":"456812361","full_name":"Shantanu66/Fluid-Action-Card","owner":"Shantanu66","description":"A Flutter package consisting of pre animated cards(containers) with fluid animation for freely adding user customized cards to the app with heavy customizable options  adding up to an alluring UI experience","archived":false,"fork":false,"pushed_at":"2022-09-17T18:17:50.000Z","size":3804,"stargazers_count":12,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T12:11:19.430Z","etag":null,"topics":["animation","cards","dart","flutter","flutter-animation","flutter-apps","flutter-package","flutter-ui","flutter-widget","flutter-widgets","flutterpackage","pub-dev"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/fluid_action_card","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Shantanu66.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":"2022-02-08T06:33:34.000Z","updated_at":"2023-01-21T18:15:51.000Z","dependencies_parsed_at":"2022-08-26T14:11:27.263Z","dependency_job_id":null,"html_url":"https://github.com/Shantanu66/Fluid-Action-Card","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/Shantanu66%2FFluid-Action-Card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shantanu66%2FFluid-Action-Card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shantanu66%2FFluid-Action-Card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shantanu66%2FFluid-Action-Card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Shantanu66","download_url":"https://codeload.github.com/Shantanu66/Fluid-Action-Card/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248609499,"owners_count":21132914,"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":["animation","cards","dart","flutter","flutter-animation","flutter-apps","flutter-package","flutter-ui","flutter-widget","flutter-widgets","flutterpackage","pub-dev"],"created_at":"2024-12-23T05:11:23.332Z","updated_at":"2026-01-11T13:33:47.231Z","avatar_url":"https://github.com/Shantanu66.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\" xmlns=\"http://www.w3.org/1999/html\"\u003e\n  \u003cbr\u003e\n   \u003cimg src=\"https://user-images.githubusercontent.com/64373963/158168111-a773b83e-71be-47dd-a43b-8e12b0c33c8d.png\" width=860 /\u003e\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/pub/v/fluid_action_card?color=%23004088\u0026logo=flutter\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/license/Shantanu66/Fluid-Action-Card?color=%23A100FF\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Animation%20-Package-yellow\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/repo-size/Shantanu66/Fluid-Action-Card?color=orange\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/stars/Shantanu66/Fluid-Action-Card?style=social\"\u003e\n\u003c/p\u003e\n\n\n\n\n# Fluid action card Package\n\nA `Flutter` package consisting of `pre-animated cards(containers)` with `fluid animation` for freely adding `user customized` cards to the app with heavily customizable options for the cards adding up to an incredible UI experience.You can set the amount of cards for your screen to display without writing code for creating additonal cards and also writing your own animation mechanism.You can also add multiple `texts and images` in the card and also customize its color which is in `gradient form` with various attributes making it a complete package for modern `UI development`.\n\n\n# Preview \n![Screenshot 2022-03-16 135641](https://user-images.githubusercontent.com/64373963/158547901-a374f7d2-5b32-4a35-8999-fe1e73052364.png)\n\n# Demo\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/64373963/158566922-07af4787-a543-4ccb-866a-8883b10d533d.gif\"\u003e\n\u003c/p\u003e\n\n# Installation\nYou should have [Flutter](https://flutter.dev/) installed in your System.\u003cbr/\u003e\n\u003e Now in your terminal \u003cbr/\u003e\n* Run this command:\u003cbr/\u003e\n\n    $ flutter pub add fluid_action_card\n    \n  \n\n\n\n# Example and Usage:\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/64373963/153234878-f23e4f19-1ef5-4e55-8bd8-c52249b59459.png\" width=\"310\" height=\"520\"\u003e\n\u003c/p\u003e\n\n\n```dart\n\nclass MyApp extends StatelessWidget {\n  // This widget is the root of your application.\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n        title: 'Fluid Action card display',\n        debugShowCheckedModeBanner: false,\n        home: Scaffold(\n          body: FluidActionCard(\n            color1: Colors.pinkAccent,\n            color2: Colors.black45,\n            backgroundcolor: Colors.grey[900]!,\n            borderRadius1: BorderRadius.circular(20),\n            borderRadius2: BorderRadius.circular(20),\n            height: 400.0,\n            width: 240.0,\n            cardCount: 6,\n            Position: 250.0,\n            shadow: BoxShadow(\n              color: Colors.black12,\n              blurRadius: 10.0,\n              spreadRadius: 0.2,\n              offset: Offset(0, 3),\n            ),\n            ontap: () {},\n           ),\n        )\n      );\n  }\n}\n```\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/64373963/153338603-e4072f98-1fcc-4bcb-a3b0-f2f0c4a979bf.png\" width=\"310\" height=\"460\"\u003e\n\n\u003e To add images to the animated cards follow this procedure:\n* First import the dependancy assets to pubspec.yaml\n\n```dart\nflutter:\n  uses-material-design: true\n\n  assets:\n    - assets/images/\n```\n\n```dart\nvoid main() =\u003e runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n  // This widget is the root of your application.\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n        title: 'Fluid Action card display',\n        debugShowCheckedModeBanner: false,\n        home: Scaffold(\n          body: FluidActionCard(\n            color1: Colors.greenAccent.shade400,\n            color2: Colors.black12,\n            backgroundcolor: Colors.grey[900]!,\n            borderRadius1: BorderRadius.circular(20),\n            borderRadius2: BorderRadius.circular(20),\n            TextPosition_Top: 22.0,\n            TextPosition_Down: 29.0,\n            height: 400.0,\n            width: 240.0,\n            CardCount: 3,\n            text1: Text(\n              \"Starts From\",\n              style: TextStyle(\n                  color: Colors.white,\n                  fontSize: 18.0,\n                  fontStyle: FontStyle.italic),\n            ),\n            text2: Text(\n              \"300\",\n              style: TextStyle(\n                color: Colors.white,\n                fontSize: 20.0,\n                fontWeight: FontWeight.w700,\n                letterSpacing: 2.0,\n              ),\n            ),\n            Position: 250.0,\n            shadow: BoxShadow(\n              color: Colors.black12,\n              blurRadius: 10.0,\n              spreadRadius: 0.2,\n              offset: Offset(0, 3),\n            ),\n            assetimage: 'assets/images/Xbox.png',\n            ontap: () {},\n          ),\n        ));\n  }\n}\n```\n# Support the Library\nYou can support the library by liking it on pub, staring in on Github and reporting any bugs you encounter.Feel Free to add to it and make it better by contributing to it\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshantanu66%2Ffluid-action-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshantanu66%2Ffluid-action-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshantanu66%2Ffluid-action-card/lists"}