¿Cómo construir un temporizador con un reloj elegante usando Flutter?

¿Qué es el aleteo?

Aleteo es un kit de desarrollo de software de interfaz de usuario de código abierto creado por Google. Se utiliza para crear aplicaciones compiladas de forma nativa para dispositivos móviles, web y de escritorio a partir de una única base de código. Flutter utiliza el lenguaje de programación Dart y proporciona un amplio conjunto de widgets y herramientas prediseñados para crear interfaces de usuario hermosas y eficaces.

¡Acerca de este tutorial!

Si está interesado en practicar la codificación y el desarrollo de UI con Flutter, puede seguir un tutorial sobre cómo crear una aplicación de temporizador. Este tutorial lo guiará a través del proceso de creación de un temporizador con funcionalidad de inicio, pausa y reinicio, así como una interfaz de usuario visualmente atractiva. Al completar este tutorial, podrá adquirir experiencia práctica con Flutter y mejorar sus habilidades en codificación y desarrollo de UI.

Crea tu aplicación Flutter

A continuación se muestra un ejemplo de aplicación Flutter que incluye un temporizador y un cronómetro. Utiliza el flutter_analog_clock paquete para una elegante visualización de reloj analógico.

flutter create flutter_analog_clock

Requisitos

Primero, agregue el paquete requerido a su pubspec.yaml archivo:

dependencies:
  flutter:
    sdk: flutter
  flutter_analog_clock: ^3.1.0

Entonces corre flutter pub get para buscar el paquete.

El código

Ahora, puedes usar el siguiente código Dart para crear una aplicación Flutter con un temporizador, cronómetro y un elegante reloj analógico:

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_analog_clock/flutter_analog_clock.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Timer and Stopwatch',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isTimerActive = false;
  int timerSeconds = 0;
  int stopwatchSeconds = 0;
  Stopwatch stopwatch = Stopwatch();
  Timer? timer;

  @override
  void dispose() {
    timer?.cancel();
    super.dispose();
  }

  void startTimer() {
    timer = Timer.periodic(Duration(seconds: 1), (Timer t) {
      setState(() {
        timerSeconds++;
      });
    });
  }

  void stopTimer() {
    timer?.cancel();
  }

  void resetTimer() {
    setState(() {
      timerSeconds = 0;
    });
  }

  void startStopwatch() {
    stopwatch.start();
  }

  void stopStopwatch() {
    stopwatch.stop();
    setState(() {
      stopwatchSeconds = stopwatch.elapsed.inSeconds;
    });
  }

  void resetStopwatch() {
    stopwatch.reset();
    setState(() {
      stopwatchSeconds = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Timer and Stopwatch'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlutterAnalogClock(
              dateTime: DateTime(2022, 1, 1, 12, 0),
              dialPlateColor: Colors.white,
              hourHandColor: Colors.black,
              minuteHandColor: Colors.black,
              secondHandColor: Colors.red,
              numberColor: Colors.black,
              borderColor: Colors.black,
              tickColor: Colors.black,
              centerPointColor: Colors.black,
              showBorder: true,
              showTicks: true,
              showMinuteHand: true,
              showSecondHand: true,
              showNumber: true,
              borderWidth: 8.0,
              hourNumberScale: 0.1,
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  onPressed: isTimerActive ? stopTimer : startTimer,
                  child: Text(isTimerActive ? 'Stop Timer' : 'Start Timer'),
                ),
                ElevatedButton(
                  onPressed: resetTimer,
                  child: Text('Reset Timer'),
                ),
              ],
            ),
            SizedBox(height: 20),
            Text(
              'Timer: $timerSeconds seconds',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 40),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  onPressed: stopwatch.isRunning ? stopStopwatch : startStopwatch,
                  child: Text(stopwatch.isRunning ? 'Stop Stopwatch' : 'Start Stopwatch'),
                ),
                ElevatedButton(
                  onPressed: resetStopwatch,
                  child: Text('Reset Stopwatch'),
                ),
              ],
            ),
            SizedBox(height: 20),
            Text(
              'Stopwatch: $stopwatchSeconds seconds',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

¡Última palabra!

En este ejemplo exploras:

• El flutter_analog_clock El paquete se utiliza para crear un elegante reloj analógico.
• El temporizador se implementa mediante un Timer que incrementa un contador cada segundo.
• El cronógrafo se implementa usando el Stopwatch clase proporcionada por Dart.

No dude en personalizar aún más el código según sus requisitos y estilos visuales preferidos.