Elapsed Time Display Widget #

A self updating Elapsed time display widget for flutter.

Installation #

1. include in your pubspec.yaml file:

dependencies:
  elapsed_time_display: ^x.x.x

2. Run flutter pub get

Usage #

To make the widget available to your code, import the package like so:

import 'package:elapsed_time_display/elapsed_time_display.dart';

It can then be used in your widget tree:

DateTime startTime = DateTime.now();

@override
Widget build(BuildContext context) {
  return Center(
    child: ElapsedTimeDisplay(
      startTime: startTime,
    ),
  );
}

Props #

Example of Formatting #

Here is an example of formatting the Elapsed Time string by adding hundredths of a second, and rebuilding the widget more often using the interval prop.

DateTime startTime = DateTime.now();

@override
Widget build(BuildContext context) {
  return Center(
    child: ElapsedTimeDisplay(
      startTime: DateTime.now(),
      interval: const Duration(milliseconds: 50),
      formatter: (elapsedTime) {
        String hoursStr = elapsedTime.hours.toString().padLeft(2, '0');
        String minutesStr =
            elapsedTime.minutes.toString().padLeft(2, '0');
        String secondsStr =
            elapsedTime.seconds.toString().padLeft(2, '0');
        String hundredthSecondsStr = (elapsedTime.milliseconds / 10)
            .truncate()
            .toString()
            .padLeft(2, '0');

        return '$hoursStr:$minutesStr:$secondsStr:$hundredthSecondsStr';
      },
    ),
  );
}