Flutter – Building an Alarm Clock App
Many applications like the Todo app, Exercise App, require alarm clocks to keep track of time in activities. Or if you want to create an alarm clock app for yourself, you will learn this today. If your app contains features like setting the alarm or setting the timer, how you can do this in Flutter? Don’t worry, it’s easy with the flutter_alarm_clock package. In this article, we are going to know the implementation of creating the alarm and timers.
Before we begin with the coding part, first add the following dependency in your pubspec.yaml file.
Step 1: Add dependency
Now, run pub get to install it.
Step 2: Now, import the library in the file where you want to work with the clock.
Create an Alarm:
Now, let’s write a code that is going to set an alarm for us. Here, I have wrapped two TextField in a row widgets. We are taking hours and minutes at which the alarm is to be set in input. Created two TextEditingController : hourController and minuteController to take hour and minute in their respective TextField. Then on pressing the button “Create Alarm”, an alarm is being set for that particular time. A snackbar will be shown to show that an alarm has been created with respect to the current time.
Then there is another button “Show Alarms” on pressing which will direct to the clock app showing the alarms that have been set.
Now, let us set a timer for reminding us that time is up. I am using the minutes taken as input in the above code to set the timer. Note that FlutterAlarmClock.createTimer() takes seconds as inputs. So, we are converting minutes into seconds by multiplying it with 60 to set the timer. When the button “Create Timer” is pressed, the timer is set and a pop-up will show up displaying “Timer is set”. There is an additional button that says “Show Timers”, it will redirect to the clock app to show the timer. When the time is up, a notification by the clock app will be shown that time is up, reset, or add more minutes to the timer.
The code is shown below along with the output.
Complete Source Code: