Flutter翻页时钟插件flutter_flip_clock的使用

这是一个用于像图像、倒计时或时钟这样的翻转面板项目的包，并且内置了动画效果。由于flip_panel插件的开发者未作出响应，我们对其进行了更新，添加了一些改进并修复了一些问题。

开始使用

这个项目是一个Flutter插件包的起点，它包含针对Android和/或iOS平台的特定实现代码。

对于刚开始使用Flutter的用户，可以查看我们的在线文档，其中包含了教程、示例、移动开发指南以及完整的API参考。

如何使用

首先，导入flutter_flip_clock包：

import 'package:flutter_flip_clock/flutter_flip_clock.dart';

从可迭代源创建翻转面板

final digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

FlipPanel.builder(
    itemBuilder: (context, index) => Container(
       color: Colors.black,
       padding: const EdgeInsets.symmetric(horizontal: 6.0),
       child: Text(
         '${digits[index]}',
         style: TextStyle(
             fontWeight: FontWeight.bold,
             fontSize: 50.0,
             color: Colors.white),
       ),
     ),
    itemsCount: digits.length,
    period: const Duration(milliseconds: 1000),
    loop: 1,
)

从流源创建翻转面板

FlipPanel<int>.stream(
      itemStream: Stream.periodic(Duration(milliseconds: 1000), (count) => count % 10),
      itemBuilder: (context, value) => Container(
        color: Colors.black,
        padding: const EdgeInsets.symmetric(horizontal: 6.0),
        child: Text(
          '$value',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 50.0,
            color: Colors.white
          ),
        ),
      ),
      initValue: 0,
  );

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用flutter_flip_clock插件。

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

import 'package:flutter/services.dart';
import 'package:flutter_flip_clock/flutter_flip_clock.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter翻页时钟'),
        ),
        body: Center(
          child: SizedBox(
            height: 200,
            child: FlipClock.simple(
              height: 40.0,
              width: 40.0,
              digitColor: Colors.white,
              backgroundColor: Colors.black,
              digitSize: 14.0,
              borderRadius: const BorderRadius.all(Radius.circular(3.0)),
              startTime: DateTime(2033, 12, 12),
              timeLeft: const Duration(minutes: 1),
            ),
          ),
        ),
      ),
    );
  }
}