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
| 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
}