TTimeline class

A timeline widget displaying sequential events, milestones, or activity logs.

Features:

  • Circular indicators surrounded by colored rings (TTimelineIndicator).
  • Customizable colors resolved via theme variants (TVariant).
  • Customizable connecting lines with dashed, solid, or dotted styles (TDashedLine).
  • Comprehensive item layout supporting title, subtitle, description, and trailing/time metadata.
  • Rich content embedding (cards, action buttons, image attachments).
  • Both vertical and horizontal timeline orientations.

Example Usage

TTimeline(
  lineStyle: TTimelineLineStyle.dashed,
  items: [
    TTimelineItem(
      titleText: 'Order Placed',
      subtitleText: 'Order #ORD-98234 has been created',
      descriptionText: 'Payment received via Credit Card ending in 4242.',
      timeText: '10:30 AM',
      iconData: Icons.shopping_bag_outlined,
      color: context.theme.success,
      isCompleted: true,
    ),
    TTimelineItem(
      titleText: 'Processing',
      subtitleText: 'Item packed and ready for dispatch',
      descriptionText: 'Package inspected and handed over to logistics courier.',
      timeText: '01:15 PM',
      iconData: Icons.inventory_2_outlined,
      color: context.theme.primary,
      isActive: true,
    ),
    TTimelineItem(
      titleText: 'Out for Delivery',
      subtitleText: 'Driver is on the way',
      descriptionText: 'Estimated delivery between 4:00 PM and 6:00 PM.',
      iconData: Icons.local_shipping_outlined,
    ),
  ],
)
Inheritance
Available extensions

Constructors

TTimeline({Key? key, required List<TTimelineItem> items, Axis direction = Axis.vertical, TTimelineLineStyle lineStyle = TTimelineLineStyle.dashed, double dashLength = 5.0, double dashGap = 3.5, double lineWidth = 2.0, Color? lineColor, double indicatorSize = 24.0, double ringWidth = 2.0, double ringGap = 2.5, TVariant variant = TVariant.outline, double itemGap = 16.0, double contentGap = 14.0, double lineGap = 5.0, TTimelineIndicatorAlignment indicatorAlignment = TTimelineIndicatorAlignment.top, EdgeInsetsGeometry? padding, ValueChanged<int>? onItemTap, TextStyle? titleStyle, TextStyle? subtitleStyle, TextStyle? descriptionStyle, TextStyle? timeStyle})
const

Properties

contentGap → double
Horizontal spacing between the indicator and the text content. Defaults to 14.0.
final
dashGap → double
Gap between dashes for dashed lines. Defaults to 3.5.
final
dashLength → double
Length of each dash segment for dashed lines. Defaults to 5.0.
final
descriptionStyle → TextStyle?
Custom text style for descriptions.
final
direction → Axis
Direction of the timeline (vertical or horizontal). Defaults to Axis.vertical.
final
hashCode → int
The hash code for this object.
no setterinherited
indicatorAlignment → TTimelineIndicatorAlignment
Alignment of the indicator relative to the content column.
final
indicatorSize → double
Outer diameter of the circular indicator. Defaults to 24.0.
final
itemGap → double
Vertical (or horizontal) spacing between timeline items. Defaults to 16.0.
final
items → List<TTimelineItem>
The list of items in the timeline.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
lineColor → Color?
Default color of the connecting line. Defaults to theme's outlineVariant.
final
lineGap → double
Gap between the indicator and the start/end of the connecting line. Defaults to 5.0.
final
lineStyle → TTimelineLineStyle
Default line style for connecting lines (dashed, solid, dotted, none). Defaults to TTimelineLineStyle.dashed.
final
lineWidth → double
Thickness of the connecting line. Defaults to 2.0.
final
onItemTap → ValueChanged<int>?
Callback fired when an item is tapped.
final
padding → EdgeInsetsGeometry?
Padding around the entire timeline widget.
final
ringGap → double
Spacing gap between the outer ring and inner circle. Defaults to 2.5.
final
ringWidth → double
Thickness of the outer ring around each circle. Defaults to 2.0.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
subtitleStyle → TextStyle?
Custom text style for subtitles.
final
timeStyle → TextStyle?
Custom text style for trailing/time texts.
final
titleStyle → TextStyle?
Custom text style for titles.
final
variant → TVariant
Default visual variant of the indicators (solid, tonal, outline, etc.). Defaults to TVariant.tonal.
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