Flutter Custom Cards

Flutter Custom Cards help developers to create beautiful custom cards and 3D cards with flutter.

Pub Badge License Dart Code Repo Size

Demo Screenshot

Getting Started

Add the package In your pubspec.yaml

flutter_custom_cards: ^0.2.1

Import and use

import 'package:flutter_custom_cards/flutter_custom_card.dart'

Basic Usages

To create a CustomCard

CustomCard(
  borderRadius: 10,
  color: Colors.yellow,
  hoverColor: Colors.indigo,
  onTap: () {},
  child: Text('Flutter'),
),

To Create a Custom3DCard

Custom3DCard(
  elevation: 4,
  child: SizedBox(
    height: 100,
    width: 100,
    child: Center(
      child: FlutterLogo(size: 65),
    ),
  ),
),

For Full Uses See Example Section

Major Changes

On version 0.2 the following major changes were done on the release

  • TextCard, ImageCard and WidgetCard have been merged into single card named CustomCard.
  • Now new CustomCards supports onTap, hoverColor, height, width and more.
  • Custom3DCard is introduced in this version that was not in the previous version.
  • Now there are only two cards CustomCard and Custom3DCard

CustomCard Options

The following options are available on CustomCard

Property Type Description
borderColor Color Border color of card
borderRadius double Radius of the card
borderWidth double Border width of card
child Widget child Widget of card
childPadding double Padding for the child widget (default is 5)
color Color Background Color for card
elevation double Elevation for the card (default is 3)
height double Height of the card (if null the height will be according to child widget)
hoverColor Color Hover color of card (only visible if onTap is not null)
key Key Key is an identifier for card
onTap GestureTapCallback Signature for when a tap has occurred.
shadowColor Color Shadow color of card
splashColor Color Splash color of card (only visible if onTap is not null
width double Width of the card (if null the width will be according to child widget)

Custom3DCard Options

The following options are available on Custom3DCard

Property Type Description
borderOnForeground bool If false, the border will be painted behind the child (default true)
child Widget Child widget of card
color Color Color of card
elevation double Elevation of card
key Key Key is an identifier for card
margin EdgeInsetsGeometry The empty space that surrounds the card
semanticContainer bool Whether this widget represents a single semantic container (default true)
shadowColor Color The color to paint the shadow below the card.
shadowSpread double Spread distance of shadow below card (default is 10)
shape ShapeBorder The shape of the card

Upcoming

The following features will rollout soon

  • onTap option on Custom3DCard as well
  • onHover option in both of the cards
  • onLongPressed and onDoubleTap option in both of the cards
  • style property in Custom3DCard using this we can create different types of 3d cards.

License

This project is licensed under the MIT license. See LICENSE for details.

Counter