es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo crear un cronómetro en Flutter

03 Jun, 2023 Programación

Quiero hacer un cronómetro de minutos/segundos que no sea muy complejo en términos de código. Intenté usar la clase Stopwatch que devuelve su valor actual cuando se llama a su función, ¿hay alguna forma de usar la clase Stopwatch que actualice automáticamente mi widget de texto cada segundo? Estoy usando GetX como gestor de estado.

“`dart
import ‘package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
const title = ‘Grid List’;

return MaterialApp(
  title: title,
  home: Scaffold(
    appBar: AppBar(
      title: const Text(title),
    ),
    body: MyTimer(),
  ),
);

}
}

class MyTimer extends StatefulWidget {
const MyTimer({Key? key}) : super(key: key);

@override
_MyTimerState createState() => _MyTimerState();
}

class _MyTimerState extends State {
final stopWatchClass = Stopwatch();

@override
void initState() {
stopWatchClass.start();
super.initState();
}

@override
Widget build(BuildContext context) {
return Text(stopWatchClass.elapsedMilliseconds.toString());
}
}

0 se escribe en el widget Text, pero si comienza el cronómetro un poco antes, muestra el tiempo transcurrido correcto. El problema es que quiero que el widget de texto se actualice automáticamente cada vez que ha transcurrido un segundo, algo así como escuchar la clase stopWatchClass.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, puedes actualizar el widget de Texto cada segundo usando GetX. Aquí está el código actualizado:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const title = 'Grid List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: MyTimer(),
      ),
    );
  }
}

class MyTimer extends StatefulWidget {
  const MyTimer({Key? key}) : super(key: key);

  @override
  _MyTimerState createState() => _MyTimerState();
}

class _MyTimerState extends State<mytimer> {
  final stopWatchClass = Stopwatch();

  @override
  void initState() {
    stopWatchClass.start();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Obx(() => Text(stopWatchClass.elapsed.inSeconds.toString()));
  }

  @override
  void dispose() {
    stopWatchClass.stop();
    super.dispose();
  }
}

    Aquí, estamos usando GetX para actualizar automáticamente el widget de Texto cada segundo. Hemos reemplazado el widget Text con Obx(() => Text()), que escucha los cambios en stopWatchClass.elapsed.inSeconds y actualiza el widget de Texto cada segundo. También hemos agregado el método dispose para detener el cronómetro cuando se elimina el widget.

Comments are closed.