AnimatedCycler<T> class

A versatile animated widget that automatically cycles through a list of items with smooth bidirectional animations.

AnimatedCycler supports both vertical and horizontal directions and works with any data type using Dart generics. Perfect for creating rolling tickers, rotating banners, news feeds, or any content that needs cyclical display.

Basic Usage

Vertical Direction (Default)

AnimatedCycler<String>(
  direction: Axis.vertical,
  items: ['Message 1', 'Message 2', 'Message 3'],
  size: 50, // height
  itemBuilder: (context, message, index) {
    return Center(child: Text(message));
  },
)

Horizontal Direction

AnimatedCycler<Product>(
  direction: Axis.horizontal,
  items: productList,
  size: 200, // width
  itemBuilder: (context, product, index) {
    return ProductCard(product);
  },
)

Named Constructors

Use AnimatedCycler.vertical for vertical content like rankings or notifications. Use AnimatedCycler.horizontal for horizontal content like banners or carousels.

Manual Control

Access control methods through a GlobalKey:

final key = GlobalKey<AnimatedCyclerState>();

// In your widget
AnimatedCycler(key: key, ...)

// Control methods
key.currentState?.nextItem();
key.currentState?.previousItem();
key.currentState?.togglePlayPause();

Inheritance

Constructors

AnimatedCycler({required List<T> items, required Widget itemBuilder(BuildContext context, T item, int index), Key? key, Axis direction = Axis.vertical, Duration displayDuration = const Duration(seconds: 3), Duration animationDuration = const Duration(milliseconds: 800), double size = 50.0, bool autoPlay = true, Curve animationCurve = Curves.easeInOut, bool loop = true, void onItemTap(T item, int index)?, void onAnimationComplete(T item, int index)?, void onAnimationStart(T item, int index)?}): Creates an AnimatedCycler widget.
const
AnimatedCycler.horizontal({required List<T> items, required Widget itemBuilder(BuildContext context, T item, int index), Key? key, double? width, Duration displayDuration = const Duration(seconds: 3), Duration animationDuration = const Duration(milliseconds: 800), bool autoPlay = true, Curve animationCurve = Curves.easeInOut, bool loop = true, void onItemTap(T item, int index)?, void onAnimationComplete(T item, int index)?, void onAnimationStart(T item, int index)?}): Creates a horizontal AnimatedCycler optimized for horizontal content.
const
AnimatedCycler.vertical({required List<T> items, required Widget itemBuilder(BuildContext context, T item, int index), Key? key, double? height, Duration displayDuration = const Duration(seconds: 3), Duration animationDuration = const Duration(milliseconds: 800), bool autoPlay = true, Curve animationCurve = Curves.easeInOut, bool loop = true, void onItemTap(T item, int index)?, void onAnimationComplete(T item, int index)?, void onAnimationStart(T item, int index)?}): Creates a vertical AnimatedCycler optimized for vertical content.
const

Properties

animationCurve → Curve: The animation curve for transitions.
final
animationDuration → Duration: Duration of the transition animation between items.
final
autoPlay → bool: Whether to automatically cycle through items.
final
direction → Axis: The animation direction.
final
displayDuration → Duration: Duration each item is displayed before transitioning.
final
hashCode → int: The hash code for this object.
no setterinherited
itemBuilder → Widget Function(BuildContext context, T item, int index): Builder function to create the UI for each item.
final
items → List<T>: The list of items to cycle through.
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
loop → bool: Whether to loop back to the first item after the last item.
final
onAnimationComplete → void Function(T item, int index)?: Callback function called when an animation transition completes.
final
onAnimationStart → void Function(T item, int index)?: Callback function called when an animation transition starts.
final
onItemTap → void Function(T item, int index)?: Callback function called when an item is tapped.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
size → double: The size of the widget container.
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<AnimatedCycler<T>>: Creates the mutable state for this widget at a given location in the tree.
override
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.
override
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
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

Operators

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