Flutter时间显示插件clock的使用

插件概述

clock 包提供了 Clock 类，它封装了“当前时间”的概念，并提供对相对于当前时间的时间点的简单访问。不同的 Clock 可以有不同的当前时间概念，默认顶级 clock 的当前时间概念可以被替换，以便可靠地测试依赖于时间的代码。

使用示例

1. 在库中使用 clock

假设我们有一个函数 runWithTiming，它接收一个回调函数并打印出该回调执行所花费的时间：

// run_with_timing.dart
import 'package:clock/clock.dart';

/// Runs [callback] and prints how long it took.
T runWithTiming<T>(T Function() callback) {
  var stopwatch = clock.stopwatch()..start();
  var result = callback();
  print('It took ${stopwatch.elapsed}!');
  return result;
}

在这个例子中，我们使用了 clock.stopwatch() 来创建一个基于 clock 的 Stopwatch 实例，这样我们可以确保即使在测试环境中也能正确地模拟时间流逝。

2. 测试代码

为了测试上述函数，我们可以使用 fake_async 包来模拟时间流逝，同时自动覆盖当前的 clock：

// run_with_timing_test.dart
import 'run_with_timing.dart';
import 'package:fake_async/fake_async.dart';
import 'package:test/test.dart';

void main() {
  test('runWithTiming() prints the elapsed time', () {
    FakeAsync().run((async) {
      expect(() {
        runWithTiming(() {
          async.elapse(Duration(seconds: 10));
        });
      }, prints('It took 0:00:10.000000!\n'));
    });
  });
}

在这个测试中，我们通过 FakeAsync().run 创建了一个异步上下文，在这个上下文中，我们可以控制时间的流逝。通过调用 async.elapse(Duration(seconds: 10))，我们可以模拟经过了 10 秒钟的时间。然后，我们检查 runWithTiming 函数是否正确地打印出了经过的时间。

完整的 Demo 示例

下面是一个完整的 Demo 示例，展示了如何在 Flutter 应用中使用 clock 包来显示当前时间，并且可以通过模拟时间流逝来进行单元测试。

项目结构

lib/
  └── main.dart
test/
  └── main_test.dart
pubspec.yaml

main.dart

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  String currentTime = '';

  @override
  void initState() {
    super.initState();
    updateCurrentTime();
  }

  void updateCurrentTime() {
    setState(() {
      currentTime = clock.now().toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Clock Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Time:',
              style: TextStyle(fontSize: 24),
            ),
            Text(
              currentTime,
              style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: updateCurrentTime,
              child: Text('Update Time'),
            ),
          ],
        ),
      ),
    );
  }
}

main_test.dart

import 'package:flutter_test/flutter_test.dart';
import 'package:fake_async/fake_async.dart';
import 'package:flutter/material.dart';
import 'package:clock/clock.dart';
import 'package:flutter_clock_demo/main.dart';

void main() {
  testWidgets('Test current time display', (WidgetTester tester) async {
    // Wrap the test in a fake async environment
    fakeAsync((async) {
      // Set up the widget
      await tester.pumpWidget(MyApp());

      // Find the text widget displaying the current time
      Finder currentTimeTextFinder = find.textContaining('Current Time:');
      expect(currentTimeTextFinder, findsOneWidget);

      // Simulate time elapsing by 1 hour
      async.elapse(Duration(hours: 1));

      // Trigger a frame to update the UI with the new time
      await tester.tap(find.text('Update Time'));
      await tester.pump();

      // Verify that the time has been updated
      Finder updateTimeButtonFinder = find.text('Update Time');
      expect(updateTimeButtonFinder, findsOneWidget);

      // Since we're using fake_async, the actual time displayed will be based on the simulated time
      // So we check if the time is updated correctly
      Finder updatedTimeTextFinder = find.textContaining(clock.now().toString());
      expect(updatedTimeTextFinder, findsOneWidget);
    });
  });
}

pubspec.yaml

确保在 pubspec.yaml 中添加以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  clock: ^1.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  fake_async: ^1.2.0

总结

通过使用 clock 包，我们可以更灵活地处理与时间相关的代码，特别是在需要进行单元测试时。clock 包允许我们在测试中轻松模拟时间流逝，从而确保我们的代码在不同时间条件下都能正常工作。希望这个示例能帮助你更好地理解和使用 clock 包。