TTile class

A versatile tile widget containing a leading icon/image container, title, subtitle, optional description, and optional trailing widget.

TTile can be used standalone, inside cards, lists, accordions, product catalogs, and table cells. Sizing uses the unified TSize system, with presets TTileSize.h1 through TTileSize.h7 for headings and TTileSize.sm, TTileSize.md, TTileSize.lg for image/product tiles, available via size or named constructors TTile.h1 through TTile.h7 and TTile.sm through TTile.lg. All visual properties including icon colors, background colors, padding, border radius, text styles, and spacing are fully configurable.

Inheritance
Available extensions

Constructors

TTile({Key? key, TSize size = TTileSize.h5, String? title, Widget? titleWidget, String? subtitle, Widget? subtitleWidget, String? desc, Widget? descWidget, TextStyle? descStyle, dynamic icon, dynamic leading, String? imageUrl, List<TKeyValue>? values, TKeyValueMode? valuesMode, double? valuesSpacing, Color? iconColor, Color? hoveredIconColor, Color? expandedIconColor, Color? iconBackgroundColor, Color? hoveredIconBackgroundColor, Color? expandedIconBackgroundColor, EdgeInsetsGeometry? iconPadding, BorderRadius? iconBorderRadius, double? iconSize, TextStyle? titleStyle, TextStyle? subtitleStyle, double? spacing, CrossAxisAlignment? crossAxisAlignment, Widget? trailing, VoidCallback? onTap, EdgeInsetsGeometry? padding, BorderRadius? borderRadius, bool isHovered = false, bool isExpanded = false, bool iconOnTop = false})
const
TTile.h1({Key? key, String? title, Widget? titleWidget, String? subtitle, Widget? subtitleWidget, String? desc, Widget? descWidget, TextStyle? descStyle, dynamic icon, dynamic leading, String? imageUrl, List<TKeyValue>? values, TKeyValueMode? valuesMode, double? valuesSpacing, Color? iconColor, Color? hoveredIconColor, Color? expandedIconColor, Color? iconBackgroundColor, Color? hoveredIconBackgroundColor, Color? expandedIconBackgroundColor, EdgeInsetsGeometry? iconPadding, BorderRadius? iconBorderRadius, double? iconSize, TextStyle? titleStyle, TextStyle? subtitleStyle, double? spacing, CrossAxisAlignment? crossAxisAlignment, Widget? trailing, VoidCallback? onTap, EdgeInsetsGeometry? padding, BorderRadius? borderRadius, bool isHovered = false, bool isExpanded = false, bool iconOnTop = false})
const
TTile.h2({Key? key, String? title, Widget? titleWidget, String? subtitle, Widget? subtitleWidget, String? desc, Widget? descWidget, TextStyle? descStyle, dynamic icon, dynamic leading, String? imageUrl, List<TKeyValue>? values, TKeyValueMode? valuesMode, double? valuesSpacing, Color? iconColor, Color? hoveredIconColor, Color? expandedIconColor, Color? iconBackgroundColor, Color? hoveredIconBackgroundColor, Color? expandedIconBackgroundColor, EdgeInsetsGeometry? iconPadding, BorderRadius? iconBorderRadius, double? iconSize, TextStyle? titleStyle, TextStyle? subtitleStyle, double? spacing, CrossAxisAlignment? crossAxisAlignment, Widget? trailing, VoidCallback? onTap, EdgeInsetsGeometry? padding, BorderRadius? borderRadius, bool isHovered = false, bool isExpanded = false, bool iconOnTop = false})
Heading 2: Large tile for major section headers and modal titles.
const
TTile.h3({Key? key, String? title, Widget? titleWidget, String? subtitle, Widget? subtitleWidget, String? desc, Widget? descWidget, TextStyle? descStyle, dynamic icon, dynamic leading, String? imageUrl, List<TKeyValue>? values, TKeyValueMode? valuesMode, double? valuesSpacing, Color? iconColor, Color? hoveredIconColor, Color? expandedIconColor, Color? iconBackgroundColor, Color? hoveredIconBackgroundColor, Color? expandedIconBackgroundColor, EdgeInsetsGeometry? iconPadding, BorderRadius? iconBorderRadius, double? iconSize, TextStyle? titleStyle, TextStyle? subtitleStyle, double? spacing, CrossAxisAlignment? crossAxisAlignment, Widget? trailing, VoidCallback? onTap, EdgeInsetsGeometry? padding, BorderRadius? borderRadius, bool isHovered = false, bool isExpanded = false, bool iconOnTop = false})
Heading 3: Medium-large tile for secondary sections and large card headers.
const
TTile.h4({Key? key, String? title, Widget? titleWidget, String? subtitle, Widget? subtitleWidget, String? desc, Widget? descWidget, TextStyle? descStyle, dynamic icon, dynamic leading, String? imageUrl, List<TKeyValue>? values, TKeyValueMode? valuesMode, double? valuesSpacing, Color? iconColor, Color? hoveredIconColor, Color? expandedIconColor, Color? iconBackgroundColor, Color? hoveredIconBackgroundColor, Color? expandedIconBackgroundColor, EdgeInsetsGeometry? iconPadding, BorderRadius? iconBorderRadius, double? iconSize, TextStyle? titleStyle, TextStyle? subtitleStyle, double? spacing, CrossAxisAlignment? crossAxisAlignment, Widget? trailing, VoidCallback? onTap, EdgeInsetsGeometry? padding, BorderRadius? borderRadius, bool isHovered = false, bool isExpanded = false, bool iconOnTop = false})
Heading 4: Standard prominent tile for regular cards and dialog sections.
const
TTile.h5({Key? key, String? title, Widget? titleWidget, String? subtitle, Widget? subtitleWidget, String? desc, Widget? descWidget, TextStyle? descStyle, dynamic icon, dynamic leading, String? imageUrl, List<TKeyValue>? values, TKeyValueMode? valuesMode, double? valuesSpacing, Color? iconColor, Color? hoveredIconColor, Color? expandedIconColor, Color? iconBackgroundColor, Color? hoveredIconBackgroundColor, Color? expandedIconBackgroundColor, EdgeInsetsGeometry? iconPadding, BorderRadius? iconBorderRadius, double? iconSize, TextStyle? titleStyle, TextStyle? subtitleStyle, double? spacing, CrossAxisAlignment? crossAxisAlignment, Widget? trailing, VoidCallback? onTap, EdgeInsetsGeometry? padding, BorderRadius? borderRadius, bool isHovered = false, bool isExpanded = false, bool iconOnTop = false})
Heading 5: Standard default tile for lists, accordions, and table cells.
const
TTile.h6({Key? key, String? title, Widget? titleWidget, String? subtitle, Widget? subtitleWidget, String? desc, Widget? descWidget, TextStyle? descStyle, dynamic icon, dynamic leading, String? imageUrl, List<TKeyValue>? values, TKeyValueMode? valuesMode, double? valuesSpacing, Color? iconColor, Color? hoveredIconColor, Color? expandedIconColor, Color? iconBackgroundColor, Color? hoveredIconBackgroundColor, Color? expandedIconBackgroundColor, EdgeInsetsGeometry? iconPadding, BorderRadius? iconBorderRadius, double? iconSize, TextStyle? titleStyle, TextStyle? subtitleStyle, double? spacing, CrossAxisAlignment? crossAxisAlignment, Widget? trailing, VoidCallback? onTap, EdgeInsetsGeometry? padding, BorderRadius? borderRadius, bool isHovered = false, bool isExpanded = false, bool iconOnTop = false})
Heading 6: Compact/dense tile for tight lists, sidebars, and dense table rows.
const
TTile.h7({Key? key, String? title, Widget? titleWidget, String? subtitle, Widget? subtitleWidget, String? desc, Widget? descWidget, TextStyle? descStyle, dynamic icon, dynamic leading, String? imageUrl, List<TKeyValue>? values, TKeyValueMode? valuesMode, double? valuesSpacing, Color? iconColor, Color? hoveredIconColor, Color? expandedIconColor, Color? iconBackgroundColor, Color? hoveredIconBackgroundColor, Color? expandedIconBackgroundColor, EdgeInsetsGeometry? iconPadding, BorderRadius? iconBorderRadius, double? iconSize, TextStyle? titleStyle, TextStyle? subtitleStyle, double? spacing, CrossAxisAlignment? crossAxisAlignment, Widget? trailing, VoidCallback? onTap, EdgeInsetsGeometry? padding, BorderRadius? borderRadius, bool isHovered = false, bool isExpanded = false, bool iconOnTop = false})
Heading 7: Extra-compact tile for nested rows such as batch lines.
const
TTile.lg({Key? key, String? title, Widget? titleWidget, String? subtitle, Widget? subtitleWidget, String? desc, Widget? descWidget, TextStyle? descStyle, dynamic icon, dynamic leading, String? imageUrl, List<TKeyValue>? values, TKeyValueMode? valuesMode, double? valuesSpacing, Color? iconColor, Color? hoveredIconColor, Color? expandedIconColor, Color? iconBackgroundColor, Color? hoveredIconBackgroundColor, Color? expandedIconBackgroundColor, EdgeInsetsGeometry? iconPadding, BorderRadius? iconBorderRadius, double? iconSize, TextStyle? titleStyle, TextStyle? subtitleStyle, double? spacing, CrossAxisAlignment? crossAxisAlignment, Widget? trailing, VoidCallback? onTap, EdgeInsetsGeometry? padding, BorderRadius? borderRadius, bool isHovered = false, bool isExpanded = false, bool iconOnTop = false})
Large product / image tile (100px image, 18px font).
const
TTile.md({Key? key, String? title, Widget? titleWidget, String? subtitle, Widget? subtitleWidget, String? desc, Widget? descWidget, TextStyle? descStyle, dynamic icon, dynamic leading, String? imageUrl, List<TKeyValue>? values, TKeyValueMode? valuesMode, double? valuesSpacing, Color? iconColor, Color? hoveredIconColor, Color? expandedIconColor, Color? iconBackgroundColor, Color? hoveredIconBackgroundColor, Color? expandedIconBackgroundColor, EdgeInsetsGeometry? iconPadding, BorderRadius? iconBorderRadius, double? iconSize, TextStyle? titleStyle, TextStyle? subtitleStyle, double? spacing, CrossAxisAlignment? crossAxisAlignment, Widget? trailing, VoidCallback? onTap, EdgeInsetsGeometry? padding, BorderRadius? borderRadius, bool isHovered = false, bool isExpanded = false, bool iconOnTop = false})
Medium product / image tile (75px image, 16px font).
const
TTile.sm({Key? key, String? title, Widget? titleWidget, String? subtitle, Widget? subtitleWidget, String? desc, Widget? descWidget, TextStyle? descStyle, dynamic icon, dynamic leading, String? imageUrl, List<TKeyValue>? values, TKeyValueMode? valuesMode, double? valuesSpacing, Color? iconColor, Color? hoveredIconColor, Color? expandedIconColor, Color? iconBackgroundColor, Color? hoveredIconBackgroundColor, Color? expandedIconBackgroundColor, EdgeInsetsGeometry? iconPadding, BorderRadius? iconBorderRadius, double? iconSize, TextStyle? titleStyle, TextStyle? subtitleStyle, double? spacing, CrossAxisAlignment? crossAxisAlignment, Widget? trailing, VoidCallback? onTap, EdgeInsetsGeometry? padding, BorderRadius? borderRadius, bool isHovered = false, bool isExpanded = false, bool iconOnTop = false})
Small product / image tile (50px image, 14px font).
const

Properties

borderRadius → BorderRadius?
Border radius of the tile when clickable.
final
crossAxisAlignment → CrossAxisAlignment?
Cross axis alignment of the row.
final
desc → String?
Optional description text displayed below the image/icon and title/subtitle row.
final
descStyle → TextStyle?
Text style for the description. Merged on top of default sizing style if provided.
final
descWidget → Widget?
Custom widget for the description.
final
expandedIconBackgroundColor → Color?
Background color of the leading icon container when expanded/active.
final
expandedIconColor → Color?
Color of the leading icon when expanded/active.
final
hashCode → int
The hash code for this object.
no setterinherited
hoveredIconBackgroundColor → Color?
Background color of the leading icon container when hovered.
final
hoveredIconColor → Color?
Color of the leading icon when hovered.
final
icon → dynamic
Leading icon. Supports IconData, HugeIcon, or Widget.
final
iconBackgroundColor → Color?
Background color of the leading icon container.
final
iconBorderRadius → BorderRadius?
Border radius of the leading icon container.
final
iconColor → Color?
Color of the leading icon.
final
iconOnTop → bool
Stacks the leading icon/image above the title block instead of beside it.
final
iconPadding → EdgeInsetsGeometry?
Padding inside the leading icon container.
final
iconSize → double?
Size of the leading icon.
final
imageUrl → String?
Optional image URL for entity/product thumbnail. Used when icon and leading are null.
final
isExpanded → bool
Whether the tile is currently in an expanded/active state.
final
isHovered → bool
Whether the tile is currently in a hovered state.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
leading → dynamic
Leading icon. Alias for icon.
final
onTap → VoidCallback?
Callback when the tile is tapped.
final
padding → EdgeInsetsGeometry?
Internal padding around the tile.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
size → TSize
The size configuration of the tile. Defaults to TTileSize.h5.
final
spacing → double?
Horizontal spacing between the leading icon and title/subtitle column.
final
subtitle → String?
Optional subtitle text displayed below the title.
final
subtitleStyle → TextStyle?
Text style for the subtitle. Merged on top of default sizing style if provided.
final
subtitleWidget → Widget?
Custom widget for the subtitle.
final
title → String?
The title text to display.
final
titleStyle → TextStyle?
Text style for the title. Merged on top of default sizing style if provided.
final
titleWidget → Widget?
Custom widget for the title.
final
trailing → Widget?
Optional trailing widget.
final
values → List<TKeyValue>?
Optional key-value items to display below the tile content.
final
valuesMode → TKeyValueMode?
Layout mode for values. Defaults to TKeyValueMode.inlineFlow.
final
valuesSpacing → double?
Vertical spacing between the tile content and the values key-value section.
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
card({TCardShadow shadow = TCardShadow.none, EdgeInsetsGeometry padding = const EdgeInsets.all(12), EdgeInsetsGeometry margin = EdgeInsets.zero, BorderRadius? borderRadius, Color? backgroundColor, Color? borderColor, VoidCallback? onTap}) → Widget

Available on Widget, provided by the WidgetX extension

Wraps this widget in a TCard with a preset shadow depth.
cardLg({EdgeInsetsGeometry padding = const EdgeInsets.all(12), VoidCallback? onTap}) → Widget

Available on Widget, provided by the WidgetX extension

card with a prominent TCardShadow.lg shadow.
cardMd({EdgeInsetsGeometry padding = const EdgeInsets.all(12), VoidCallback? onTap}) → Widget

Available on Widget, provided by the WidgetX extension

card with a standard TCardShadow.md shadow.
cardSm({EdgeInsetsGeometry padding = const EdgeInsets.all(12), VoidCallback? onTap}) → Widget

Available on Widget, provided by the WidgetX extension

card with a subtle TCardShadow.sm shadow.
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
estimateWidth(BuildContext context) → double
Estimates the natural single-line width of this tile (leading, title / subtitle text measured with their resolved styles, padding, trailing).
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

Static Methods

task({Key? key, required String title, String? subtitle, String? meta, String? status, Color? statusColor, int? done, int? total, dynamic icon, bool selected = false, VoidCallback? onTap}) → Widget
Heading 1: Extra-large tile for hero headers, primary dashboards, and page titles. Creates a touch-friendly task card for mobile task lists.