Features

• ✨ Simple Use
• ⚙️ Great Customization
• 🌍 Expand the functionality of your cards
• 🛑 Not use for mobile devices, will soon be available for use on those platforms.

Getting Started

To use this card actions package, you need to add the dependencies in pubspec.yaml file.

dependencies:
    card_actions: ^0.0.1

Use

To use card actions is very simple, just wrap your card with our CardActions widget,

CardActions(
    ...
    child: YourCard() // here would be your card
)

Basic Setup

CardActions needs the parameters width, height and actions

• width is the width of the widget
• height is the height of the widget
• actions is a list of CardActionButton.

CardActions(
    width: //your card width
    height: // your card height
    actions: <CardActionButton>[
        CardActionButton(
            icon: Icon(
                Icons.edit,
                color: Colors.white,
            ), // Icon
            label: 'edit',
            onPress: () {},
        ), // CardActionButton
    ]
    child: yourCard(), // here would be your card 
)

You can add more buttons if you prefer

...
actions: [
    CardActionButton(
        icon: Icon(
            Icons.edit,
            color: Colors.white,
        ),
        label: 'edit',
        onPress: () {},
    ),
    CardActionButton(
        icon: Icon(
            Icons.payment_rounded,
            color: Colors.white,
        ),
        label: 'Pay',
        onPress: () {},
    ),
    CardActionButton(
        icon: Icon(
            Icons.remove_red_eye_sharp,
            color: Colors.white,
        ),
        label: 'Preview',
        onPress: () {},
    ),
]

Axis Direction

If you want to change the direction of the hover, you can use the axisDirection property of the CardAction to change it.

the axisDirection property receives a enum of type CardActionAxis at the moment we only have bottom and right.

CardActionAxis.bottom	CardActionAxis.right

Example

To 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:

• In the CardAction we have the buttonsCursor property that serves to change the cursor to ALL the buttons.

• In the CardActionButton we have the cursor property to change the cursor to that specific button.

Important. If you use both options at the same time the button will prioritize its own cursor setting over the global setting with buttonsCursor.

and finally we add the necessary functions to the buttons by means of its onPress method.

...
actions: [
    CardActionButton(
        icon: Icon(
            Icons.add,
            color: Colors.white,
            size: 30,
        ),
        label: 'Increment',
        onPress: increment // method to increase the counter,
    ),
    CardActionButton(
        icon: Icon(
            Icons.restore_sharp,
            color: Colors.white,
            size: 30,
        ),
        label: 'Reset',
        onPress: () {
            // reset the counter
            setState(() {
            counter = 0;
            });
        },
    ),
    CardActionButton(
        icon: Icon(
            Icons.remove,
            color: Colors.white,
            size: 30,
        ),
        label: 'Decrement',
        onPress: decrement // method for decrementing the counter
    ),
]

RoadMap

• Add options to handle card animation.
• Make it usable on mobile devices, but instead of hover, click on the card, or hold down.
• Add more axes and even be able to use several at the same time.

Parameters

CardActions

Property	Type	Default	Description
width	double	required	widget width
height	double	required	widget height
cardCursor	MouseCursor	SystemMouseCursors.basic	the type of cursor displayed when hovering on the card
buttonsCursor	MouseCursor	SystemMouseCursors.basic	the type of cursor displayed when hovering over buttons
borderRadius	double	0	rounded card edges
showToolTip	bool	true	Show/Hide toolTips
axisDirection	CardActionAxis	CardActionAxis.bottom	CardActions Axis Direction
splashColor	Color	Colors.white24	Splash color when hovering
backgroundColor	Color	Color(0xff242120)	Background color
closeCardWhenExecuteFunction	bool	false	close the card when you press a button

CardActionButton

Property	Type	Default	Description
icon	Icon	required	Button icon
label	String	required	text to be displayed in the Tool Tip
onPress	VoidCallback	required	callback to be executed when you press the button
closeCardWhenPress	bool	false	when you press the button, the card closes.
cursor	MouseCursor?	null	Cursor displayed when hovering on the button