farhanfadila1717 / slide_countdown

A Flutter package to create easy slide animation countdown / countup timer.

⏱️ Slide Countdown

A Flutter package to create easy slide animation countdown / countup timer

• ⏱️ Support Count down and Count up
• ⏯️ Controll duration with StreamDuration package
• 🔔 Callback finished
• 🎨 Easily custom duration layout with RawSlideCountdown and RawDigitItem widget.

---

🌟 Open To Work

Farhan The author of this package is available for hiring as Flutter Engineer. See portofolio website here.

---

Example

Slidecountdown(Default)

SlideCountdown(
  duration: const Duration(days: 2),
)

Output SlideCountdown(Default)

SlideCountdownSeparated(Default)

SlideCountdownSeparated(
  duration: const Duration(days: 2),
)

Output SlideCountdownSeparated(Default)

CountUp is True

When the countup value is the same as the duration, it will call onDone. If you do not set a duration, the countup will continue infinitely and onDone will never be called.

SlideCountdown(
  duration: const Duration(days: 2),
  countUp: true,
)

Output Slidecountdown countUp

Slidecountdown sparatorType.title

SlideCountdown(
  duration: const Duration(days: 2),
  separatorType: SeparatorType.title,
  slideDirection: SlideDirection.up,
)

Output Slidecountdown sparatorType.title

---

🎨 Full Customize Slidecountdown

You can full customize slidecountdown with RawSlideCountdown and RawDigitItem see example here

Example Output Customize Slidecountdown

Example control duration

If you want to control duration more advanced, you can override property StreamDuration.
You can play, pause, change, add, subtract duration.

If you override/custom StreamDuration duration property has no effect anymore.
See Full example control duration here.

final streamDuration = StreamDuration(const Duration(hours: 2));

SlideCountdown(
  // This duration no effect if you customize stream duration
  duration: const Duration(seconds: 10),
  streamDuration: streamDuration,
),

---

🚧 Maintainer

Farhan Fadila

📫 Email: [email protected]

⛳ Website: farhanfadila.site

❤️ Donate for support this open source

slide_countdown's Issues

SlideCountdown does not work with onChanged.

SlideCountdown does not work with onChanged.
It works in SlideCountdownSeparated, but the minute is reduced not seconds.

onDone() in background state

First of all, thank you for creating such a great package. I'm really enjoying using it.

I want to send a push message using fcm when onDone() is called in the background.

This works on Android, but on IOS, onDone() is not called when in the background.

Is there any way to have onDone() called while the app is in the background?

how to make slideDirection with no any animate?

there is any way to have normal count down with out slideDirection from up or down?

stop count down

How to stop count down when the different duration is zero, in the SlideCountdownSeparated with zero duration the count down is moved on and goes to negative.

Feature: Add `replaceable` support.

Hi There,
[Feat]

1. Currently, replacement show ONLY if duration.inSeconds <= 0.
   could support a hook to show replacement earlier. something like bool replaceable(value) { return value.inSeconds == 3600; }.
   btw, even though replacement showed earlier, keep ticker alive until onDone.

2. Case separator set to SeparatorType.title, the time digits still padded as 01 hours 01 minutes. emmm... so weird,
   a padDigits option is nice, or remove pad.

[Other]
If disable seconds show, 0 < duration.inSeconds < 60, It's show nothing. Might keep show 0 minutes is better, but now it's completely OK .

thks

Option to add 'countdown titles' underneath the countdown (numbers)

Hello there fellow flutter'er!
I'm using your countdown timer, which works great! Though there's one thing missing for me.. being able to put the countdown titles underneath the countdown (numbers)!

A visual to represent what I'm looking for:

Underneath it, it simply says 'days', 'hours' and 'minutes'

Would be super dope if this is added!

about change the timer

This widget I added to my first screen (Home Screen) and on this screen, I called API to get the remaining time, after getting a response I add the duration into this package widget but the widget does not work properly. The widget does not accept my duration.
How can I solve it?

can you add localization for arabic

is there a way to change the locale of the numbers ?

The first second is always 00:00

When start countdown, it initialize with 00:00 value, and after first second it shows correct data.

Please see the attached video. While initialization it has 00 sec, and then comes correctly countdown

165701-720x1480.mp4

Error in SlideCountdownSeparated

In my case I set a duration of 10 minutes in the SlideCountdownSeparated widget and the count displayed is incorrect, I changed the widget to SlideCountdown and the count was displayed correctly.

Plugin Versión:
slide_countdown: ^0.5.0

Code:

SlideCountdownSeparated(
    duration: Duration(minutes: 10),
    separatorType: SeparatorType.symbol,
    height: ctrl.responsive.hp(4),
    width: ctrl.responsive.wp(8),
    decoration: BoxDecoration(
      color: Get.theme.colorScheme.secondary,
      borderRadius: BorderRadius.circular(
        ctrl.responsive.ip(0.5),
      ),
    ),
    textStyle: TextStyle(
      color: Get.theme.colorScheme.onSecondary,
      fontSize: ctrl.responsive.ip(1.8),
      fontWeight: FontWeight.bold,
    ),
    onDone: () {
      ctrl.countDownFinish();
    },
  )

Error image:

FUnction onDone not fired if streamDuration is configure

How can I fire the onDone function with a stremaDuration configured??

streamDuration bug

when use SlideCountdownSeparated,whatever streamDuration is provide and count up is true,time always count up with zero.
And the example of the streamDuration,click pause first and click play,time will not continue

"Play" message in the console

Visibility(
                          visible: _remoteConfig.getBool('*************'),
                            child: const SlideCountdown(
                         duration: Duration(days: 1),
                     )),

When the app is opened, a message is displayed in the console ("Play").
Small error? or wanted? Print call cannot be localized by me

Greetings :)

Bad state: Stream has already been listened to

Bad state: Stream has already been listened to

This does not happen in version 0.6.0, but the corresponding error occurs in version 1.0.0 or 1.0.1.

Multiple widget used SlideCountdown but dispose widget onchange steal called

strange behaviour in the count down

Decrease in a

strange way and disappear numbers in version 1.3.2

Screen.Recording.2023-11-24.at.14.52.31.mov

this is the code:

return SlideCountdown( streamDuration: streamDuration, style: Theme.of(context).textTheme.titleMedium!.copyWith(color: Colors.white), decoration: const BoxDecoration( borderRadius: BorderRadius.all( Radius.circular(Dimensions.borderRadiusDefault), ), color: ATColors.primary, ), );

can you add textDirection for lang rtl ?

can you add textDirection for lang rtl ?

Property "withDays" is unused for SlideCountdownSeparated widget

SlideCountdownSeparated widget has a boolean property with name withDays which is unused in code. Also, documentation for this property is wrong.

/// if you give or the remaining [duration] is less than one hour
/// and the property is set to true, the countdown hours will not show
final bool withDays;

Thank you for your work on this project.

Still can't access to StreamDuration.

Still can't access to StreamDuration. it doesn't ignore the normal duration. Tried everything.

Issue in use the DurationTitle property

Hii their,

I'm trying to use the property of this package but it's never working.
Plz help me out with this:

durationTitle: const DurationTitle(
days: 'D',
hours: 'H',
minutes: 'M',
seconds: 'S',
),

This text is never shown with the widget. How does it's work?

Is the withDays property useless? I don't want to show days, but I want to show hours and seconds, even if hours and seconds are zero. How does it work? 0.3.3

Is the withDays property useless? I don't want to show days, but I want to show hours and seconds, even if hours and seconds are zero. How does it work?
slide_countdown 0.3.3

Effect 00:12:69

Digits switch to the max value + 1 (60 seconds/minutes, 24 hours) before switching to the next digit (59 seconds/minutes, 23 hours)

The minute and second countdown digits quickly switches from 0 to 60 before switching to 59. It should go from 0 to 59 without the switch.
I assume the same happens with hours, where it would quickly switch from 0 to 24 before switching to 23, but I haven't tested that.

This should not be possible and is just a sneaky fix that most don't see, myself included until now :P

Demonstration video:
https://user-images.githubusercontent.com/94898347/196671664-bdbdff28-f672-4cad-a81b-207f24a458a7.mov

"Bad state: Stream has already been listened to" in 1.0.2

When I use hot reload, this error will be reported on 1.0.2. Strangely, I saw a more detailed description of 1.0.2 that fixed this error.

The following StateError was thrown building RawSlideCountdown:
Bad state: Stream has already been listened to.

Use Listenable instead of Stream

When this issue has fixed, the package is'nt depending on StreamDuration package anymore. StreamDuration has limited feature when StreamDuration package use Stream. SlideCountdown need more controll duration e.g restart duration. with Stream i cant avoid restart feature.

Countup after countdown finishes

Your plugin is awesome, I was just adding it to a 2nd app I am coding but I am a bit stuck and I could really use your help.

What I want to do is edit your plugin so it counts up after it reaches 0. Would you be able to give me any hints on how I could achieve this?

Thank you very much :)

minutes display error when it is zero

The color value of the same color has deviation

Text(
IntlTool.tr('1:1231'),
style: set_font(16, color: const Color(0xff188863)),
),
SlideCountdownSeparated(
separatorType: SeparatorType.symbol,
duration: const Duration(seconds: 10000),
decoration: const BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(4)), color: Colors.transparent),
textStyle: const TextStyle(fontSize:16, color: Color(0xff188863), fontWeight: FontWeight.normal),
separatorStyle: const TextStyle(fontSize:16, color: Color(0xff188863)),
separator: ':',
height: 32.w,
width: 28.w,
),

Text for Days, hours, minutes, sec

Can we add the text for days, hours, minutes, sec below the counter ?

When used with onChanged, minutes rather than seconds are counted down.

When used with onChanged, minutes rather than seconds are counted down.

both SlideCountdownSeparated and SlideCountdown

Migrate to separated widget

Currently this package write with helper method. It's bad for performance, i'm planning to migrate to Separated widget.

Context

Readme Add documentation `start`, `stop`, `changeDuration`.

Override StreamDuration example for start, stop, changeDuration countdown.

When a specific number is changed, the next number is displayed in advance.

In the process of changing from 0 to 9, 9 is exposed first.

The phenomenon was confirmed in version 1.4.0,
This phenomenon did not occur in the previous 0.5.0 version.

Can you solve this problem?

[code]
return SlideCountdown( duration: Duration(days: 1) );

v1.4.0 - issue

Screen_Recording_20231208-111456_v1.4.0.mp4

v0.5.0

Screen_Recording_20231208-111002_v0.5.0.mp4

Countdown: characters and numbers correspond, there is a deviation at present, is there a solution?

Countdown: characters and numbers correspond, there is a deviation at present, is there a solution?

Bad state: Stream has already been listened to.

u need to fix this and make it brodcast stream

Restart the counter

When the counter ends and I want to turn it on again and give it another value, it won't run unless I close the application and run it again. Is there a solution?

cpu usage issue

Thank you very much for this library, the animation is very smooth, you did a really great job.

But I ran into a small problem with cpu usage. I have observed that this widget animation uses about 15% of cpu on my m1 macbook air. Tried slideDirection: SlideDirection.none, but the situation is still the same. Can you add a configuration to not show the animation at all, so that I can disable it when the window loses focus and save cpu resources?

`duration` is always required even when `streamDuration` is provided

It would be good if duration was not added as required so that one could add a streamDuration without having to add the duration argument. Instead an assert could be used in the constructor that checks so that one of them is provided, something like this:

assert(
  duration != null ^ streamDuration != null,
  'Either duration or streamDuration has to be provided',
)

I could send a PR for this if you want.

Incorrect Display of Minutes and Seconds

The numbers displayed in the image are in Persian numerals, showing 74 seconds and 92 minutes.

Version: 1.5.2

Flutter Version: 3.16.4

First, I would like to express my gratitude for this plugin.
The bug is evident in the image I have attached. This issue has also been discussed in Issue #43, and it seemed to have been resolved in version 0.6.0. You reported that this bug was fixed in version 0.6.0, which was using Flutter version 2.17. and yes. it's work for me in version 0.6.0.

However, I have encountered this problem again with this version of Flutter (3.16.4). I also tested versions 1.0.0, among a few others, and found that the problem persists.

Possible Solution

I understand now that the issue is due to the right-to-left (RTL) of the persian language.

Thank you for your commitment to open source.

Reset countdown time

Hello, After the SlideCountdown component is added, set the countdown time. When the countdown time expires, the device will not move until a new countdown time is set.

Feature : SeparatorType.title's Position, LTRB.

Hi there, Actually I am trying to show circular countdown in which I have used your Slide Coundown as the middle TimerText of Circle. The problem is SeparatorType.title shows on the right side of time only, which makes text go out of Circle if kept diameter less.

Is there any property that set SeparatorType.title position to Bottom, Up, or Left, I could not find any? As I have already used durationTitle: DurationTitle.enShort(), but it will be nice feature if added.

When I run the timer, an unknown number appears and then disappears.

I set it up so that a 5 second timer starts when the button is clicked.
In version 1.2.1, when I click the button, an unknown number, 93, appears and then disappears.
In the 0.6.0 version, that number does not appear.

I didn't put anything in there except the duration property.

return SlideCountdown(duration: Duration(milliseconds: 5000));

[0.6.0]
https://github.com/farhanfadila1717/slide_countdown/assets/106897491/784531dd-3495-4947-ac2b-9bd88db9184d

[1.2.1 - bug]
https://github.com/farhanfadila1717/slide_countdown/assets/106897491/7d194638-adbb-476e-8362-495e3731b84d

restart countdown

i habe trouble with restarting count down, if its done

SlideCountdownSeparated digits are flipped

In my app I noticed that my countdown is suddenly flipped.
Then I tried it with your sample project in a completely new Flutter project, and the same thing is happening as you can see in the video below.

Simulator.Screen.Recording.-.iPhone.14.Pro.Max.-.2023-03-07.at.13.09.12.mp4