Citation Card

Inline citation card linking to source material with title and snippet. Rendered inside message bubbles when the AI provides source references.

Installation

$ flai add citation_card

Import

import 'package:my_app/flai/components/citation_card/citation_card.dart';

Preview

Preview
According to recent research, Flutter is used by over 1 million apps.
🔗 Flutter Growth Report 2025
🔗 Google I/O Flutter Update

Usage

// Inside a message with citations
MessageBubble(
  message: Message(
    id: '1',
    role: MessageRole.assistant,
    content: 'According to the Flutter docs...',
    timestamp: DateTime.now(),
    citations: [
      Citation(
        title: 'Flutter Widget Catalog',
        url: 'https://flutter.dev/docs/development/ui/widgets',
        snippet: 'A catalog of commonly used Flutter widgets...',
      ),
      Citation(
        title: 'State Management',
        url: 'https://flutter.dev/docs/development/data-and-backend/state-mgmt',
      ),
    ],
  ),
  onTapCitation: (citation) {
    launchUrl(Uri.parse(citation.url!));
  },
)

// Standalone citation card
FlaiCitationCard(
  citation: Citation(
    title: 'Dart Language Tour',
    url: 'https://dart.dev/language',
    snippet: 'A comprehensive guide to the Dart language.',
  ),
  onTap: () {
    // Open URL
  },
)

Properties

PropertyTypeDefaultDescription
citation Citation required The citation data to display.
onTap VoidCallback? null Called when the citation card is tapped.

Citation Model

class Citation {
  final String title;      // Source title (required)
  final String? url;       // Source URL
  final String? snippet;   // Preview text snippet
}