Muchas aplicaciones, como la aplicación Todo, la aplicación Ejercicio, requieren relojes de alarma para realizar un seguimiento del tiempo en las actividades. O si desea crear una aplicación de despertador para usted, aprenderá esto hoy. Si su aplicación contiene funciones como configurar la alarma o configurar el temporizador, ¿cómo puede hacer esto en Flutter? No te preocupes, es fácil con el paquete flutter_alarm_clock . En este artículo, vamos a conocer la implementación de la creación de la alarma y los temporizadores.
Antes de comenzar con la parte de codificación, primero agregue la siguiente dependencia en su archivo pubspec.yaml .
Paso 1: Agregar dependencia
Dart
dependencies: flutter_alarm_clock: ^0.0.1
Ahora, ejecute pub get para instalarlo.
Paso 2: ahora, importa la biblioteca en el archivo donde deseas trabajar con el reloj.
Dart
import 'package:flutter_alarm_clock/flutter_alarm_clock.dart';
Crear una alarma:
Ahora, escribamos un código que nos active una alarma. Aquí, he envuelto dos TextField en una fila de widgets. Estamos tomando horas y minutos en los que se configurará la alarma en la entrada. Creó dos TextEditingController : hourController y minuteController para tomar horas y minutos en sus respectivos campos de texto. Luego, al presionar el botón «Crear alarma», se configura una alarma para ese momento en particular. Se mostrará un snackbar para indicar que se ha creado una alarma con respecto a la hora actual.
Dart
Center(
child: Column(children: <Widget>[
SizedBox(height: 30),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.yellow,
borderRadius: BorderRadius.circular(11)),
child: Center(
child: TextField(
controller: hourController,
keyboardType: TextInputType.number,
),
),
),
SizedBox(width: 20),
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.yellow,
borderRadius: BorderRadius.circular(11)),
child: Center(
child: TextField(
controller: minuteController,
keyboardType: TextInputType.number,
),
),
),
],
),
Container(
margin: const EdgeInsets.all(25),
child: TextButton(
child: const Text(
'Create alarm',
style: TextStyle(fontSize: 20.0),
),
onPressed: () {
int hour;
int minutes;
hour = int.parse(hourController.text);
minutes = int.parse(minuteController.text);
FlutterAlarmClock.createAlarm(hour, minutes);
},
),
),
Luego, hay otro botón «Mostrar alarmas» al presionarlo, que lo dirigirá a la aplicación de reloj que muestra las alarmas que se han configurado.
Crear temporizador:
Ahora, configuremos un temporizador para recordarnos que se acabó el tiempo. Estoy usando los minutos tomados como entrada en el código anterior para configurar el temporizador. Tenga en cuenta que FlutterAlarmClock.createTimer() toma segundos como entradas. Entonces, estamos convirtiendo minutos en segundos multiplicándolos por 60 para configurar el temporizador. Cuando se presiona el botón «Crear temporizador», el temporizador está configurado y aparecerá una ventana emergente que muestra «Temporizador configurado». Hay un botón adicional que dice «Mostrar temporizadores», lo redirigirá a la aplicación de reloj para mostrar el temporizador. Cuando se acabe el tiempo, se mostrará una notificación de la aplicación de reloj de que se acabó el tiempo, restablecer o agregar más minutos al temporizador.
El código se muestra a continuación junto con la salida.
Dart
Container(
margin: const EdgeInsets.all(25),
child: TextButton(
child: const Text(
'Create timer',
style: TextStyle(fontSize: 20.0),
),
onPressed: () {
int minutes;
minutes = int.parse(minuteController.text);
FlutterAlarmClock.createTimer(minutes*60);
showDialog(
context: context,
builder: (context) {
return AboutDialog(
children: [
Center(
child: Text("Timer is set",
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.bold)),
)
],
);
});
}),
),
ElevatedButton(
onPressed: () {
FlutterAlarmClock.showTimers();
},
child: Text(
"Show Timers",
style: TextStyle(fontSize: 17),
),
)
Código fuente completo:
Dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_alarm_clock/flutter_alarm_clock.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Alarm Clock',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// creating text ediiting controller to take hour
// and minute as input
TextEditingController hourController = TextEditingController();
TextEditingController minuteController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('GeeksForGeeks'),
centerTitle: true,
),
body: Center(
child: Column(children: <Widget>[
SizedBox(height: 30),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.yellow,
borderRadius: BorderRadius.circular(11)),
child: Center(
child: TextField(
controller: hourController,
keyboardType: TextInputType.number,
),
),
),
SizedBox(width: 20),
Container(
height: 40,
width: 60,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.yellow,
borderRadius: BorderRadius.circular(11)),
child: Center(
child: TextField(
controller: minuteController,
keyboardType: TextInputType.number,
),
),
),
],
),
Container(
margin: const EdgeInsets.all(25),
child: TextButton(
child: const Text(
'Create alarm',
style: TextStyle(fontSize: 20.0),
),
onPressed: () {
int hour;
int minutes;
hour = int.parse(hourController.text);
minutes = int.parse(minuteController.text);
// creating alarm after converting hour
// and minute into integer
FlutterAlarmClock.createAlarm(hour, minutes);
},
),
),
ElevatedButton(
onPressed: () {
// show alarm
FlutterAlarmClock.showAlarms();
},
child: const Text(
'Show Alarms',
style: TextStyle(fontSize: 20.0),
),
),
Container(
margin: const EdgeInsets.all(25),
child: TextButton(
child: const Text(
'Create timer',
style: TextStyle(fontSize: 20.0),
),
onPressed: () {
int minutes;
minutes = int.parse(minuteController.text);
// create timer
FlutterAlarmClock.createTimer(minutes);
showDialog(
context: context,
builder: (context) {
return AboutDialog(
children: [
Center(
child: Text("Timer is set",
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.bold)),
)
],
);
});
}),
),
ElevatedButton(
onPressed: () {
// show timers
FlutterAlarmClock.showTimers();
},
child: Text(
"Show Timers",
style: TextStyle(fontSize: 17),
),
)
])),
);
}
}
