Citation Card
Inline citation card linking to source material with title and snippet. Rendered inside message bubbles when the AI provides source references.
Preview
Preview
According to recent research, Flutter is used by over 1 million apps.
🔗 Flutter Growth Report 2025
🔗 Google I/O Flutter Update
Installation
$
flai add citation_card
Import
import 'package:my_app/flai/components/citation_card/citation_card.dart';
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
| Property | Type | Default | Description |
|---|---|---|---|
| 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
}