{"id":15555001,"url":"https://github.com/abians/card_actions","last_synced_at":"2025-04-23T20:41:55.425Z","repository":{"id":65800408,"uuid":"600178531","full_name":"AbianS/card_actions","owner":"AbianS","description":"Empower Your Cards with Custom Actions and Enhancements using our Flutter Package.","archived":false,"fork":false,"pushed_at":"2023-02-11T17:03:48.000Z","size":4813,"stargazers_count":12,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-18T05:53:31.549Z","etag":null,"topics":["card","dart","dartlang","dartlanguage","flutter","flutter-card","flutter-package","flutter-ui","flutterpackage"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/card_actions","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AbianS.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-10T19:02:51.000Z","updated_at":"2024-11-02T15:59:31.000Z","dependencies_parsed_at":"2023-06-01T18:00:36.788Z","dependency_job_id":null,"html_url":"https://github.com/AbianS/card_actions","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/AbianS%2Fcard_actions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbianS%2Fcard_actions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbianS%2Fcard_actions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AbianS%2Fcard_actions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AbianS","download_url":"https://codeload.github.com/AbianS/card_actions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250513316,"owners_count":21443199,"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":["card","dart","dartlang","dartlanguage","flutter","flutter-card","flutter-package","flutter-ui","flutterpackage"],"created_at":"2024-10-02T15:05:35.841Z","updated_at":"2025-04-23T20:41:55.393Z","avatar_url":"https://github.com/AbianS.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](example/screenshots/logo.gif)\n\n## Features\n\n- ✨ Simple Use\n- ⚙️ Great Customization\n- 🌍 Expand the functionality of your cards\n- 🛑 Not use for mobile devices, will soon be available for use on those platforms.\n\n## Getting Started\n\nTo use this card actions package, you need to add the dependencies in `pubspec.yaml` file.\n\n```yaml\ndependencies:\n    card_actions: ^0.0.1\n```\n\n## Use\n\nTo use card actions is very simple, just wrap your **card** with our `CardActions` widget,\n\n```dart\nCardActions(\n    ...\n    child: YourCard() // here would be your card\n)\n```\n\n### Basic Setup\n\n**CardActions** needs the parameters `width`, `height` and `actions`\n\n- `width` is the width of the widget\n- `height` is the height of the widget\n- `actions` is a list of `CardActionButton`.\n\n```dart\nCardActions(\n    width: //your card width\n    height: // your card height\n    actions: \u003cCardActionButton\u003e[\n        CardActionButton(\n            icon: Icon(\n                Icons.edit,\n                color: Colors.white,\n            ), // Icon\n            label: 'edit',\n            onPress: () {},\n        ), // CardActionButton\n    ]\n    child: yourCard(), // here would be your card \n)\n```\n\n![](example/screenshots/first.gif)\n\nYou can add more buttons if you prefer\n\n```dart\n...\nactions: [\n    CardActionButton(\n        icon: Icon(\n            Icons.edit,\n            color: Colors.white,\n        ),\n        label: 'edit',\n        onPress: () {},\n    ),\n    CardActionButton(\n        icon: Icon(\n            Icons.payment_rounded,\n            color: Colors.white,\n        ),\n        label: 'Pay',\n        onPress: () {},\n    ),\n    CardActionButton(\n        icon: Icon(\n            Icons.remove_red_eye_sharp,\n            color: Colors.white,\n        ),\n        label: 'Preview',\n        onPress: () {},\n    ),\n]\n```\n![](example/screenshots/second.gif)\n\n### Axis Direction\n\nIf you want to change the direction of the hover, you can use the `axisDirection` property of the `CardAction` to change it.\n\nthe `axisDirection` property receives a **enum** of type `CardActionAxis` at the moment we only have **bottom** and **right**.\n\n| CardActionAxis.bottom | CardActionAxis.right     |\n|-----------------------|--------------------------|\n| ![](example/screenshots/second.gif) | ![](example/screenshots/horizontal.gif) |\n\n\n## Example\n\n![](example/screenshots/counter.gif)\n\nTo make this example, we will need to configure more things, but it will be very simple, the first thing is that we change the background color for it we have to use the property `backgroundColor` then an important part is that we change the design of the cursor when it is on top of the buttons and this we can do it in two ways:\n\n- In the `CardAction` we have the `buttonsCursor` property that serves to change the cursor to **ALL** the buttons.\n\n- In the `CardActionButton` we have the `cursor` property to change the cursor to that specific button.\n\n\u003e **Important**.\n\u003e If you use both options at the same time the button will prioritize its own `cursor` setting over the global setting with `buttonsCursor`.\n\nand finally we add the necessary functions to the buttons by means of its `onPress` method.\n\n```dart\n...\nactions: [\n    CardActionButton(\n        icon: Icon(\n            Icons.add,\n            color: Colors.white,\n            size: 30,\n        ),\n        label: 'Increment',\n        onPress: increment // method to increase the counter,\n    ),\n    CardActionButton(\n        icon: Icon(\n            Icons.restore_sharp,\n            color: Colors.white,\n            size: 30,\n        ),\n        label: 'Reset',\n        onPress: () {\n            // reset the counter\n            setState(() {\n            counter = 0;\n            });\n        },\n    ),\n    CardActionButton(\n        icon: Icon(\n            Icons.remove,\n            color: Colors.white,\n            size: 30,\n        ),\n        label: 'Decrement',\n        onPress: decrement // method for decrementing the counter\n    ),\n]\n```\n\n## RoadMap\n- Add options to handle card animation.\n- Make it usable on mobile devices, but instead of hover, click on the card, or hold down.\n- Add more axes and even be able to use several at the same time.\n\n## Parameters \n\n### CardActions\n\n| Property                     | Type           | Default                  | Description                                             |\n|------------------------------|----------------|--------------------------|---------------------------------------------------------|\n| width                        | double         | required                 | widget width                                            |\n| height                       | double         | required                 | widget height                                           |\n| cardCursor                   | MouseCursor    | SystemMouseCursors.basic | the type of cursor displayed when hovering on the card  |\n| buttonsCursor                | MouseCursor    | SystemMouseCursors.basic | the type of cursor displayed when hovering over buttons |\n| borderRadius                 | double         | 0                        | rounded card edges                                      |\n| showToolTip                  | bool           | true                     | Show/Hide toolTips                                      |\n| axisDirection                | CardActionAxis | CardActionAxis.bottom    | CardActions Axis Direction                              |\n| splashColor                  | Color          | Colors.white24           | Splash color when hovering                              |\n| backgroundColor              | Color          | Color(0xff242120)        | Background color                                        |\n| closeCardWhenExecuteFunction | bool           | false                    | close the card when you press a button                  |\n\n### CardActionButton\n\n| Property           | Type         | Default  | Description                                       |\n|--------------------|--------------|----------|---------------------------------------------------|\n| icon               | Icon         | required | Button icon                                       |\n| label              | String       | required | text to be displayed in the Tool Tip              |\n| onPress            | VoidCallback | required | callback to be executed when you press the button |\n| closeCardWhenPress | bool         | false    | when you press the button, the card closes.       |\n| cursor             | MouseCursor? | null     | Cursor displayed when hovering on the button      |","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabians%2Fcard_actions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabians%2Fcard_actions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabians%2Fcard_actions/lists"}