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

PropertyTypeDescription
borderColorColorBorder color of card
borderRadiusdoubleRadius of the card
borderWidthdoubleBorder width of card
childWidgetchild Widget of card
childPaddingdoublePadding for the child widget (default is 5)
colorColorBackground Color for card
elevationdoubleElevation for the card (default is 3)
heightdoubleHeight of the card (if null the height will be according to child widget)
hoverColorColorHover color of card (only visible if onTap is not null)
keyKeyKey is an identifier for card
onTapGestureTapCallbackSignature for when a tap has occurred.
shadowColorColorShadow color of card
splashColorColorSplash color of card (only visible if onTap is not null
widthdoubleWidth of the card (if null the width will be according to child widget)

Custom3DCard Options

The following options are available on Custom3DCard

PropertyTypeDescription
borderOnForegroundboolIf false, the border will be painted behind the child (default true)
childWidgetChild widget of card
colorColorColor of card
elevationdoubleElevation of card
keyKeyKey is an identifier for card
marginEdgeInsetsGeometryThe empty space that surrounds the card
semanticContainerboolWhether this widget represents a single semantic container (default true)
shadowColorColorThe color to paint the shadow below the card.
shadowSpreaddoubleSpread distance of shadow below card (default is 10)
shapeShapeBorderThe 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

Libraries

flutter_custom_cards