VisorStatCard

VisorStatCard displays a single metric in a card container: a title, a large value, an optional change indicator, and an optional leading icon.

Preview

When to Use

• Rendering a single key metric on an admin dashboard or summary row
• Displaying a numeric KPI alongside a period-over-period delta
• Pairing a metric with a sparkline, icon, or small chart
• Composing admin dashboards or KPI summary rows

When Not to Use

• Marketing feature tiles (use a marketing card pattern instead)
• Long-form content cards with titles and descriptions (use a generic Card)
• Tabular data — prefer DataTable for multiple metrics in rows
• Showing a single value inline in body copy (use plain text)

Installation

npx visor add stat-card --target flutter

Or copy components/flutter/visor_stat_card/visor_stat_card.dart into your project.

Basic Usage

import 'package:ui/ui.dart';

VisorStatCard(
  title: 'Revenue',
  value: '\$12,430',
)

With Delta

// Positive change
VisorStatCard(
  title: 'Revenue',
  value: '\$12,430',
  delta: '+8.2%',
  deltaDirection: VisorDeltaDirection.up,
)

// Negative change
VisorStatCard(
  title: 'Churn',
  value: '3.1%',
  delta: '-0.4%',
  deltaDirection: VisorDeltaDirection.down,
)

// Flat / neutral
VisorStatCard(
  title: 'Active users',
  value: '1,204',
  delta: '0%',
  deltaDirection: VisorDeltaDirection.flat,
)

With Icon

import 'package:material_icons_extended/material_icons_extended.dart';

VisorStatCard(
  title: 'Revenue',
  value: '\$12,430',
  delta: '+8.2%',
  deltaDirection: VisorDeltaDirection.up,
  icon: Icons.trending_up,
)

Custom Accessibility Label

By default the accessibility label is composed as "Revenue: $12,430" (no delta) or "Revenue: $12,430, +8.2%" (with delta). Override it:

VisorStatCard(
  title: 'Revenue',
  value: '\$12,430',
  delta: '+8.2%',
  deltaDirection: VisorDeltaDirection.up,
  semanticLabel: 'Revenue is twelve thousand four hundred thirty, up 8.2 percent',
)

API Reference

VisorDeltaDirection

Source

• components/flutter/visor_stat_card/visor_stat_card.dart
• Quality contract audit row: docs/flutter-widget-quality-contract.md (Rec8)