animated_digit 3.2.3

A scroll numbers animation widget, any number that need scroll animation effects and easy to use.

example/lib/main.dart

import 'dart:math';
import 'dart:ui';

import 'package:animated_digit/animated_digit.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(AnimatedDigitWidgetExample());
}

class AnimatedDigitWidgetExample extends StatefulWidget {
  AnimatedDigitWidgetExample({Key? key}) : super(key: key);

  @override
  _AnimatedDigitWidgetExampleState createState() =>
      _AnimatedDigitWidgetExampleState();
}

class _AnimatedDigitWidgetExampleState extends State<AnimatedDigitWidgetExample>
    with SingleTickerProviderStateMixin {
  AnimatedDigitController _controller = AnimatedDigitController(111.987);

  double textscaleFactor = 1.0;

  @override
  void initState() {
    super.initState();
    textscaleFactor = MediaQuery.textScaleFactorOf(context);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _add() {
    _controller.addValue(Random().nextInt(DateTime.now().year + 1));
    setState(() {});
  }

  void _remove() {
    _controller.minusValue(Random().nextInt(DateTime.now().year));
    setState(() {});
  }

  void _reset() {
    _controller.resetValue(0);
    setState(() {});
  }

  void updateFontScale() {
    setState(() {
      textscaleFactor = textscaleFactor == 1.0 ? 1.2 : 1.0;
    });
  }

  void _addDecimal() {
    var val = num.parse(Random().nextDouble().toStringAsFixed(2));
    _controller.addValue(val);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      showPerformanceOverlay: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Animated Digit Widget Example"),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              SizedBox(height: 80),
              ValueListenableBuilder(
                valueListenable: _controller,
                builder: (BuildContext context, num value, Widget? child) {
                  return Text(
                    "current value:$value",
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 28,
                    ),
                  );
                },
              ),
              SizedBox(height: 80),
              Column(
                children: [
                  const Text(
                    '{Random Number}',
                    style: TextStyle(
                      fontSize: 30,
                      fontWeight: FontWeight.bold,
                      color: Colors.blueAccent,
                      fontFamily: "momofont",
                    ),
                  ),
                  AnimatedDigitWidget(
                    key: const ValueKey("teal"),
                    value: Random().nextInt(DateTime.now().year),
                    textStyle: TextStyle(
                      fontSize: 100,
                      fontWeight: FontWeight.bold,
                      color: Colors.blueAccent,
                      fontFamily: "momofont",
                    ),
                  )
                ],
              ),
              // AnimatedDigitWidget(
              //   controller: _controller,
              // ),
              // SizedBox(height: 30),
              // AnimatedDigitWidget(
              //   controller: _controller,
              //   textStyle: TextStyle(color: Colors.orange, fontSize: 30),
              //   enableSeparator: true,
              // ),
              // SizedBox(height: 30),
              // AnimatedDigitWidget(
              //   controller: _controller,
              //   textStyle: TextStyle(color: Colors.pinkAccent, fontSize: 30),
              //   enableSeparator: true,
              //   fractionDigits: 1,
              // ),
              // SizedBox(height: 30),
              AnimatedDigitWidget(
                key: const Key("ads"),
                value: _controller.value,
                textStyle: TextStyle(color: Colors.cyan, fontSize: 100),
                curve: Curves.easeOutCubic,
                enableSeparator: true,
                fractionDigits: 2,
                valueColors: [
                  ValueColor(
                    condition: () => _controller.value <= 0,
                    color: Colors.red,
                  ),
                  ValueColor(
                    condition: () => _controller.value >= 1999,
                    color: Colors.orange,
                  ),
                  ValueColor(
                    condition: () => _controller.value >= 2999,
                    color: Color.fromARGB(255, 247, 306, 24),
                  ),
                  ValueColor(
                    condition: () => _controller.value >= 3999,
                    color: Colors.green,
                  ),
                  ValueColor(
                    condition: () => _controller.value >= 4999,
                    color: Colors.cyan,
                  ),
                  ValueColor(
                    condition: () => _controller.value >= 5999,
                    color: Colors.blue,
                  ),
                  ValueColor(
                    condition: () => _controller.value >= 6999,
                    color: Colors.purple,
                  ),
                ],
              ),
              // SizedBox(height: 30),
              // AnimatedDigitWidget(
              //   controller: _controller,
              //   textStyle: TextStyle(
              //     color: Color.fromARGB(255, 85, 226, 179),
              //     fontSize: 30,
              //   ),
              //   fractionDigits: 3,
              //   enableSeparator: true,
              //   separateSymbol: "·",
              //   separateLength: 3,
              //   decimalSeparator: ",",
              //   prefix: "\$",
              //   suffix: "€",
              // ),
              // SizedBox(height: 30),
              // Container(
              //   width: 188,
              //   height: 50,
              //   decoration: BoxDecoration(
              //     color: Colors.black,
              //     borderRadius: BorderRadius.circular(50),
              //   ),
              //   child: SingleDigitProvider(
              //     data: SingleDigitData(
              //       useTextSize: false,
              //       builder: (size, value, isNumber, child) {
              //         return isNumber ? child : FlutterLogo();
              //       },
              //     ),
              //     child: AnimatedDigitWidget(
              //       controller: _controller,
              //       textStyle: TextStyle(color: Colors.pink[300], fontSize: 30),
              //       separateLength: 1,
              //       separateSymbol: "#",
              //       enableSeparator: true,
              //     ),
              //   ),
              // ),
              CupertinoTextField.borderless()
            ],
          ),
        ),
        floatingActionButton: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FloatingActionButton(
              onPressed: _add,
              child: Icon(Icons.add),
            ),
            SizedBox(
              height: 10,
            ),
            FloatingActionButton(
              onPressed: updateFontScale,
              child: Icon(Icons.font_download),
            ),
            SizedBox(
              height: 10,
            ),
            FloatingActionButton(
              onPressed: _reset,
              child: Icon(Icons.restart_alt),
            ),
            SizedBox(
              height: 10,
            ),
            FloatingActionButton(
              onPressed: _remove,
              child: Icon(Icons.remove),
            ),
            SizedBox(
              height: 10,
            ),
            FloatingActionButton(
              onPressed: _addDecimal,
              child: Icon(Icons.add_box_outlined),
              tooltip: "add decimal",
            ),
          ],
        ),
      ),
      builder: (context, home) {
        return MediaQuery(
          data:
              MediaQuery.of(context).copyWith(textScaleFactor: textscaleFactor),
          child: home!,
        );
      },
    );
  }
}