cometchat_cards 1.0.0

CometChat Card Schema renderer — converts Card JSON into Flutter widgets.

cometchat_cards

A Flutter renderer for the CometChat Card Schema. Pass in card JSON, get back a native Flutter widget tree. Taps on interactive elements are emitted to your app through a single callback — the package never executes actions itself.

What it does

• Parses Card Schema JSON into typed models
• Renders 20 element types (text, image, icon, avatar, badge, divider, spacer, chip, progressBar, codeBlock, markdown, row, column, grid, accordion, tabs, button, iconButton, link, table)
• Resolves theme-aware colors and image URLs for auto, light, and dark modes, with optional theme overrides
• Emits taps on buttons, icon buttons, and links to your onAction callback as typed CometChatCardActionEvents

The package is a pure renderer. It doesn't talk to the CometChat SDK, doesn't manage message lifecycle, and doesn't know about your app's navigation. You decide what each action does.

Installation

dependencies:
  cometchat_cards: ^1.0.0

Usage

import 'package:cometchat_cards/cometchat_cards.dart';
import 'package:flutter/material.dart';

class CardScreen extends StatelessWidget {
  const CardScreen({super.key, required this.cardJson});

  final String cardJson;

  @override
  Widget build(BuildContext context) {
    return CometChatCardView(
      cardJson: cardJson,
      themeMode: CometChatCardThemeMode.auto,
      onAction: (event) {
        // Handle the action — navigate, send a message, open a URL, etc.
        debugPrint('action: ${event.type} from ${event.elementId}');
      },
    );
  }
}

Theming

The renderer falls back to a built-in default theme when JSON omits colors. To override defaults, pass a CometChatCardThemeOverride:

CometChatCardView(
  cardJson: cardJson,
  themeMode: CometChatCardThemeMode.dark,
  themeOverride: CometChatCardThemeOverride(
    primaryColor: const CometChatCardColorValue(
      light: '#1A73E8',
      dark: '#8AB4F8',
    ),
  ),
);

Any ColorValue in the schema is resolved to its light or dark variant based on the effective theme mode.

Actions

When a user taps a button, iconButton, or link, the package invokes onAction with a CometChatCardActionEvent containing:

• type — one of the 9 supported action types
• params — action payload from the schema
• elementId — id of the tapped element
• cardJson — the card JSON the action originated from

If you don't pass onAction, taps are ignored.

More

See the example/ app for runnable samples and the design.md document for the full schema reference.