TMetricTile class

A versatile KPI Metric Tile widget used for displaying at-a-glance analytical metrics, counters, quantitative stats, and relationship KPI summary cards in dashboards and entity headers.

Basic Usage

TMetricTile(
  label: 'Attached Products',
  value: '14',
  icon: Icons.inventory_2_rounded,
  color: AppColors.primary,
  subtitle: 'Limit: 7/step',
)

Interactive with Trend

TMetricTile(
  label: 'Total Revenue',
  value: '\$24,500.00',
  icon: Icons.monetization_on_rounded,
  color: AppColors.success,
  trend: '+12.5%',
  trendUp: true,
  onTap: () => context.go('/admin/sales/orders'),
)

Inheritance

Available extensions

WidgetX

Constructors

TMetricTile({Key? key, required String label, required String value, String? subtitle, IconData? icon, Widget? iconWidget, Color? color, String? trend, bool? trendUp, Widget? trailing, Widget? badge, VoidCallback? onTap, EdgeInsetsGeometry? padding, BorderRadius? borderRadius, Color? backgroundColor, Color? borderColor, TextStyle? labelStyle, TextStyle? valueStyle, TextStyle? subtitleStyle, TVariant type = TVariant.tonal, bool compact = false, String? tooltip}): const

Properties

backgroundColor → Color?: Custom background color. Defaults to context.colors.surfaceContainerLow.
final
badge → Widget?: Optional status chip/badge text or widget.
final
borderColor → Color?: Custom border color.
final
borderRadius → BorderRadius?: Border radius of the tile. Defaults to BorderRadius.circular(10).
final
color → Color?: Accent theme color for the icon container and highlight styling.
final
compact → bool: If true, renders a more compact horizontal layout.
final
hashCode → int: The hash code for this object.
no setterinherited
icon → IconData?: Leading icon.
final
iconWidget → Widget?: Custom icon widget replacing icon.
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
label → String: Primary metric label (e.g. 'Total Revenue', 'Published Channels').
final
labelStyle → TextStyle?: Custom text style for the label.
final
onTap → VoidCallback?: Optional tap interaction callback.
final
padding → EdgeInsetsGeometry?: Padding around the content. Defaults to EdgeInsets.symmetric(horizontal: 14, vertical: 12).
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
subtitle → String?: Optional subtitle or contextual guidance text beneath the value.
final
subtitleStyle → TextStyle?: Custom text style for the subtitle.
final
tooltip → String?: Optional tooltip message.
final
trailing → Widget?: Optional trailing widget placed on the right side.
final
trend → String?: Optional trend text (e.g. '+12.4%', '-2.1%').
final
trendUp → bool?: Whether the trend is positive (true) or negative (false).
final
type → TVariant: Visual variant type (e.g. TVariant.tonal, TVariant.outline, TVariant.solid).
final
value → String: Primary metric numerical or status value (e.g. '$12,450', '24', 'Active').
final
valueStyle → TextStyle?: Custom text style for the value.
final

Methods

box({double minW = 0.0, double minH = 0.0, double maxW = double.infinity, double maxH = double.infinity}) → Widget: Available on Widget, provided by the WidgetX extension
Wraps this widget in a ConstrainedBox to apply layout constraints.
build(BuildContext context) → Widget: Describes the part of the user interface represented by this widget.
override
center({bool when = true}) → Widget: Available on Widget, provided by the WidgetX extension
Wraps this widget in a Center widget.
createElement() → StatelessElement: Creates a StatelessElement to manage this widget's location in the tree.
inherited
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
expanded({int flex = 1}) → Widget: Available on Widget, provided by the WidgetX extension
Wraps this widget in an Expanded widget.
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
padding([double left = 0.0, double top = 0.0, double right = 0.0, double bottom = 0.0]) → Widget: Available on Widget, provided by the WidgetX extension
Wraps this widget in a Padding with flexible edge control.
paddingSymmetric({double h = 0.0, double v = 0.0}) → Widget: Available on Widget, provided by the WidgetX extension
Wraps this widget in a Padding with symmetric horizontal and vertical spacing.
size({double? w, double? h}) → Widget: Available on Widget, provided by the WidgetX extension
Wraps this widget in a SizedBox to apply fixed width and/or height.
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited
visible(bool visible, {bool maintainState = false}) → Widget: Available on Widget, provided by the WidgetX extension
Wraps this widget in a Visibility widget.
when(bool condition) → Widget: Available on Widget, provided by the WidgetX extension
Returns this widget if condition is true, otherwise returns SizedBox.shrink(). Usage: Text('Hello').when(isVisible)

Operators

operator ==(Object other) → bool: The equality operator.
inherited