How to make the count up stops randomly after the start button is clicked in flutter

[king2636]

Select Topic Area

Question

Body

Countup(
begin: 0,
end: 100,
duration: Duration(seconds: 5),
separator: ',',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
),
)

This is my code above, how can I make the count up to stop automatically in a random way without the stop button click. There must be 2 ways for the timer to stop, e.g the user has to click stop at a certain figures or the count up stops automatically. Please help.

I had built the count up of numbers it's running perfectly, but i want it to stop automatically or the user has to click the stop button provided the user has not click the button the countup must stop automatically at random based

[king2636]

Thank you, let me do that...

[LiteBrite82]

Thanks for posting in the GitHub Community, @king2636 !

We’ve moved your post to our Programming Help 🧑‍💻 category, which is more appropriate for this type of discussion.

Please review our guidelines about the Programming Help category for more information.

[king2636]

Thank you, let me do that...

​👋You can achieve the desired effect by integrating a Random library and stopping the animation randomly after a certain duration. Start by adding the random_pkgs dependency to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  random_pkgs: ^2.0.0

Next, wrap the CountUp widget with a StatefulWidget and add the Random controller:

class AutoStopCountUp extends StatefulWidget {
  @override
  _AutoStopCountUpState createState() => _AutoStopCountUpState();
}

class _AutoStopCountUpState extends State<AutoStopCountUp> {
  late Stopwatch stopWatch;
  bool stoppedManually = false;
  int stopValue = 0;

  void handleStopClick(double val) {
    setState(() {
      stoppedManually = true;
      stopValue = val.round();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CountUp(
          begin: 0,
          end: 100,
          duration: const Duration(seconds: 5),
          separator: ',',
          style: const TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 22,
          ),
          onDone: () {},
          onTick: (value) {},
          onStart: () {
            stopWatch = Stopwatch()..start();
            Future.delayed(Duration(milliseconds: 500 + Random().nextInt(2000)), () {
              handleStopClick(value);
            });
          },
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
                child: stoppedManually
                    ? Text('Stopped Manually at : ${stopValue.toString()}')
                    : Text(''),
              width: 200,
            ),
            FloatingActionButton(
              heroTag: ValueKey(widget),
              onPressed: () {
                handleStopClick(stopWatch.elapsedMilliseconds / 1000.0);
              },
              child: Icon(Icons.stop),
            ),
          ],
        ),
      ],
    );
  }
}

In this example, a Stopwatch is started when the animation begins, and a delay is introduced with a random millisecond range between 500 ms and 2500 ms. The animation will be stopped by the handleStopClick callback when the delay expires.

Adjust the timing and ranges as needed to fit your design criteria.

Sorry, the above guven solution is giving that error below when I try to debug
Waiting for connection from debug service on Chrome...
lib/main.dart:39:11: Error: No named parameter with the name 'onTick'.
onTick: (value) {},
^^^^^^
lib/countup.dart:22:3: Context: Found this candidate, but the arguments don't match.
Countup({
^^^^^^^

[king2636]

Please help, the above solution posted earlier its failing to compile due to the error below:

lib/main.dart:39:11: Error: No named parameter with the name 'onTick'.
onTick: (value) {},
^^^^^^
lib/countup.dart:22:3: Context: Found this candidate, but the arguments don't match.
Countup({
^^^^^^^

[ebndev]

Hey @king2636 - did you ever get this to work?

[king2636]

No it's giving the below error on debugging.

lib/main.dart:39:11: Error: No named parameter with the name 'onTick'.
onTick: (value) {},
^^^^^^
lib/countup.dart:22:3: Context: Found this candidate, but the arguments don't match.
Countup({
^^^^^^^