Flutter Ticker #

A Flutter widget for smooth, animated text transitions with scrolling effects. This library provides a customizable ticker widget that animates text changes with a scrolling effect, similar to what you might see in financial tickers, departure boards, or digital clocks.

Features #

• Smooth scrolling animations when text changes
• Customizable animation duration, curve, and direction
• Support for different character sets (numbers, alphabets, custom characters)
• Flexible alignment and positioning options
• Precise character spacing and layout control
• Optimized text rendering with custom painting

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_ticker: ^0.1.0

Usage #

Basic Example #

import 'package:flutter/material.dart';
import 'package:flutter_ticker/flutter_ticker.dart';

class TickerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TickerWidget(
      text: "12345",
      textSize: 24.0,
      textColor: Colors.blue,
      characterLists: [TickerUtils.provideNumberList()],
    );
  }
}

Customizing the Ticker #

TickerWidget(
  text: "FLUTTER",
  textSize: 30.0,
  textColor: Colors.orange,
  characterLists: [TickerUtils.provideAlphabeticalList()],
  preferredScrollingDirection: ScrollingDirection.up,
  animationDuration: 800,
  animationCurve: Curves.easeOutQuad,
  gravity: Alignment.center,
  letterSpacing: 2.0,
)

Updating Text with Animation #

// Store a reference to the ticker state
final GlobalKey<TickerWidgetState> tickerKey = GlobalKey();

// In your widget build method
TickerWidget(
  key: tickerKey,
  text: "0.00",
  textSize: 24.0,
  textColor: Colors.green,
  characterLists: [TickerUtils.provideNumberList() + "."],
)

// Later, update the text with animation
tickerKey.currentState?.setText("42.50");

Customizing Animation Duration #

// Change the animation duration dynamically
tickerKey.currentState?.setAnimationDuration(1200);

API Reference #

TickerWidget #

The main widget that displays animated text transitions.

Constructor Parameters

TickerWidgetState #

The state object for the TickerWidget, which provides methods to control the widget.

Methods

TickerUtils #

Utility class providing helper methods for the ticker.

Methods

ScrollingDirection #

Enum defining the direction of scrolling animations.

License #

This project is licensed under the Apache License, Version 2.0 - see the LICENSE file for details.

Attribution #

This library is based on the original Ticker implementation by Robinhood Markets, Inc. and has been refactored into a Flutter library with clean architecture by Narayan Babu.

The implementation follows clean architecture principles with separation of concerns:

• State Management Layer: Implemented through domain entities like ticker_column_manager.dart
• Business Logic Layer: Core logic in entities like ticker_character_list.dart and ticker_column.dart
• Presentation Layer: UI components in ticker_widget.dart