flutter_ticker 0.0.1+3 copy "flutter_ticker: ^0.0.1+3" to clipboard
flutter_ticker: ^0.0.1+3 copied to clipboard

An Flutter text widget with scrolling text change animation.

example/lib/main.dart

import 'dart:async';
import 'dart:math';

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final rdm = Random();
  late double number = _nextNumber();
  late final Timer timer;
  int progress = 0;
  DateTime now = DateTime.now();

  /// Next random number
  double _nextNumber() => rdm.nextDouble() * rdm.nextInt(1000);

  /// Number string
  String get numberString => number.toStringAsFixed(2);

  @override
  void initState() {
    super.initState();
    timer = Timer.periodic(Duration(milliseconds: 1000), (timer) {
      setState(() {
        if (timer.tick.isOdd) progress = (progress + 1) % 101;
        now = DateTime.now();
      });
    });
  }

  @override
  void dispose() {
    timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Ticker example')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              color: const Color(0xFF21CE99),
              width: double.infinity,
              child: Ticker(
                text: '\$$numberString',
                style: const TextStyle(fontSize: 50, color: Colors.white),
              ),
            ),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              spacing: 5,
              children: [
                FilledButton(
                  onPressed: () => setState(() => number += 1),
                  child: const Text('+1'),
                ),
                FilledButton(
                  onPressed: () => setState(() => number = 0),
                  child: const Text('0'),
                ),
                FilledButton(
                  onPressed: () => setState(() => number -= 1),
                  child: const Text('-1'),
                ),
                FilledButton(
                  onPressed: () => setState(() => number = _nextNumber()),
                  child: const Text('Random'),
                ),
              ],
            ),
            const SizedBox(height: 50),
            Container(
              decoration: const BoxDecoration(
                color: Color(0xFF21CE99),
                borderRadius: BorderRadius.all(Radius.circular(2)),
              ),
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: Ticker(
                text: '$progress%',
                duration: const Duration(milliseconds: 1000),
                style: const TextStyle(fontSize: 60, color: Colors.white),
              ),
            ),
            const SizedBox(height: 50),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 6),
                  decoration: const BoxDecoration(
                    color: Color(0xFF21CE99),
                    borderRadius: BorderRadius.all(Radius.circular(6)),
                  ),
                  child: Ticker(
                    text: now.hour.toString().padLeft(2, '0'),
                    style: const TextStyle(fontSize: 60, color: Colors.white),
                  ),
                ),
                Text(':', style: const TextStyle(fontSize: 60)),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 6),
                  decoration: const BoxDecoration(
                    color: Color(0xFF21CE99),
                    borderRadius: BorderRadius.all(Radius.circular(6)),
                  ),
                  child: Ticker(
                    text: now.minute.toString().padLeft(2, '0'),
                    style: const TextStyle(fontSize: 60, color: Colors.white),
                  ),
                ),
                Text(':', style: const TextStyle(fontSize: 60)),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 6),
                  decoration: const BoxDecoration(
                    color: Color(0xFF21CE99),
                    borderRadius: BorderRadius.all(Radius.circular(6)),
                  ),
                  child: Ticker(
                    text: now.second.toString().padLeft(2, '0'),
                    style: const TextStyle(fontSize: 60, color: Colors.white),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
3
likes
160
points
9
downloads
screenshot

Publisher

unverified uploader

Weekly Downloads

An Flutter text widget with scrolling text change animation.

Repository (GitHub)
View/report issues

Topics

#ticker #text #animation #countdown #progress

Documentation

API reference

License

Apache-2.0 (license)

Dependencies

flutter

More

Packages that depend on flutter_ticker