Flutter时钟显示插件simple_clock的使用

Flutter时钟显示插件simple_clock的使用

SimpleClock 是一个简单的 Flutter 包，提供了一个实时更新的当前时间流。您可以使用这个流在您的 Flutter 应用程序中显示当前时间和日期。这个包特别适用于需要实现实时更新时间的应用场景。

特性

• 每秒更新的当前时间流。
• 可以与 Riverpod 集成或独立使用。
• 包含示例用法。

开始使用

要开始在项目中使用 SimpleClock，请按照以下步骤操作：

1. 在 pubspec.yaml 文件中添加依赖：

   dependencies:
     simple_clock: <最新版本>
   

2. 运行 flutter pub get 来安装包。

3. 在 Dart 代码中导入包：

   import 'package:simple_clock/simple_clock.dart';
   

使用示例

独立示例

以下是一个独立使用 SimpleClock 的示例：

import 'package:flutter/material.dart';
import 'package:simple_clock/simple_clock.dart';
import 'package:intl/intl.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Clock Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'FlutterClock Example'),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late SimpleClock _simpleClock;
  late DateTime _currentTime;

  // 初始化时钟和流
  @override
  void initState() {
    super.initState();
    _simpleClock = SimpleClock();
    _currentTime = _simpleClock.getCurrentTime();
    _simpleClock.timeStream.listen((event) {
      setState(() {
        _currentTime = event;
      });
    });
  }

  @override
  void dispose() {
    _simpleClock.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final String currentTime = DateFormat('HH:mm:ss').format(_currentTime);
    final String today = DateFormat("yMMMMEEEEd").format(_currentTime);
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              currentTime,
              style: Theme.of(context).textTheme.displayLarge,
            ),
            Text(
              today,
              style: Theme.of(context).textTheme.headlineSmall,
            ),
          ],
        ),
      ),
    );
  }
}

与 Riverpod 结合使用的示例

对于更高级的用法，可以参考 Riverpod 示例目录中的实现。

1. 定义提供者：

   import 'package:simple_clock/simple_clock.dart';
   import 'package:flutter_riverpod/flutter_riverpod.dart';
   
   /// 通过依赖注入 [SimpleClock]，避免单例模式
   final simpleClockProvider = Provider((ref) => SimpleClock());
   
   /// StreamProvider 用于 [SimpleClock.timeStream]
   final clockProvider = StreamProvider<DateTime>((ref) {
     final clock = ref.watch(simpleClockProvider);
     ref.onDispose(clock.dispose);
     return clock.timeStream;
   });
   

2. 使用 ProviderScope 包裹您的应用来使用 Riverpod 提供器：

   void main() {
     runApp(const ProviderScope(child: MyApp()));
   }
   

3. 使用 ref.watch() 监听提供器：

   import 'package:example_with_riverpod/providers/clock_provider.dart';
   import 'package:example_with_riverpod/views/widgets/time_display_widget.dart';
   import 'package:flutter/material.dart';
   import 'package:flutter_riverpod/flutter_riverpod.dart';
   import 'package:intl/intl.dart';
   
   class HomeScreen extends ConsumerWidget {
     const HomeScreen({super.key, required this.title});
     final String title;
   
     @override
     Widget build(BuildContext context, WidgetRef ref) {
       final asyncTime = ref.watch(clockProvider);
   
       return Scaffold(
         appBar: AppBar(
           backgroundColor: Theme.of(context).colorScheme.inversePrimary,
           title: Text(title),
         ),
         body: Center(
           child: asyncTime.when(
             data: (time) {
               final formattedTime = DateFormat.Hms().format(time);
               final formattedDate = DateFormat.yMMMMEEEEd().format(time);
               return TimeDisplay(context: context, formattedTime: formattedTime, formattedDate: formattedDate);
             },
             loading: () {
               final currentTime = ref.watch(simpleClockProvider).getCurrentTime();
               final formattedTime = DateFormat.Hms().format(currentTime);
               final formattedDate = DateFormat.yMMMMEEEEd().format(currentTime);
               return TimeDisplay(context: context, formattedTime: formattedTime, formattedDate: formattedDate);
             },
             error: (error, stack) => Text('Error: $error'),
           ),
         ),
       );
     }
   }
   

其他信息

• 如果需要格式化时间和日期，您需要添加 intl 包：

  dependencies:
    intl: ^0.17.0