card_actions 0.0.1 copy "card_actions: ^0.0.1" to clipboard
card_actions: ^0.0.1 copied to clipboard

Empower Your Cards with Custom Actions and Enhancements using our Flutter Package.

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
58
likes
160
pub points
77%
popularity

Publisher

unverified uploader

Empower Your Cards with Custom Actions and Enhancements using our Flutter Package.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, provider

More

Packages that depend on card_actions