Flutter Analog Clock Widget

Clean and fully customizable analog clock widget.

Flutter Analog Clock Screenshot

Installation

In your pubspec.yaml file within your Flutter Project:

dependencies:
  analog_clock: ^0.1.0

Features

Modern and clean analog clock interface.
Fully customizable.
Live clock.
Custom datetime.

Usage

Here is an example of how to use the AnalogClock widget:

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: AnalogClock(
            decoration: BoxDecoration(
              border: Border.all(width: 2.0, color: Colors.black),
              color: Colors.transparent,
              shape: BoxShape.circle,
            ),
            width: 200.0,
            isLive: true,
            hourHandColor: Colors.black,
            minuteHandColor: Colors.black,
            showSecondHand: true,
            numberColor: Colors.black87,
            showNumbers: true,
            showAllNumbers: false,
            textScaleFactor: 1.4,
            showTicks: true,
            showDigitalClock: false,
            datetime: DateTime.now(),
          ),
        ),
      ),
    );
  }
}

Parameters

Flutter Analog Clock Parameters

Example

A demo app can be found in the example/ folder.

Full Example Code

Here is a complete example of a Flutter application using the AnalogClock widget:

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Analog Clock Example'),
        ),
        body: Center(
          child: AnalogClock(
            decoration: BoxDecoration(
              border: Border.all(width: 2.0, color: Colors.black),
              color: Colors.transparent,
              shape: BoxShape.circle,
            ),
            width: 300.0,
            isLive: true,
            hourHandColor: Colors.black,
            minuteHandColor: Colors.black,
            showSecondHand: true,
            numberColor: Colors.black87,
            showNumbers: true,
            showAllNumbers: true,
            textScaleFactor: 1.4,
            showTicks: true,
            showDigitalClock: false,
            datetime: DateTime.now(),
          ),
        ),
      ),
    );
  }
}

This example demonstrates how to create a simple Flutter application with an analog clock that updates in real-time. You can customize various properties of the clock, such as the hand colors, numbers, and ticks, to fit your design needs.

songsunli 1楼•3 个月前

更多关于Flutter模拟时钟插件analog_clock的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中使用analog_clock插件的示例代码。这个插件可以帮助你轻松地在你的Flutter应用中添加一个模拟时钟小部件。

首先，确保你已经在pubspec.yaml文件中添加了analog_clock依赖：

dependencies:
  flutter:
    sdk: flutter
  analog_clock: ^1.1.0  # 请检查最新版本号

然后，运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中使用AnalogClock小部件。以下是一个完整的示例代码，展示如何在一个简单的Flutter应用中集成AnalogClock：

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

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

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

class ClockScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Analog Clock Example'),
      ),
      body: Center(
        child: AnalogClock(
          // 你可以在这里自定义AnalogClock的属性
          numberStyle: TextStyle(
            color: Colors.black,
            fontSize: 24,
          ),
          handStyle: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
          ),
          backgroundColor: Colors.white,
          dialColor: Colors.grey[200]!,
          // 其他可配置属性...
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，它包含一个AnalogClock小部件。AnalogClock小部件有多个可配置的属性，比如数字样式（numberStyle）、指针样式（handStyle）、背景颜色（backgroundColor）和表盘颜色（dialColor）等。你可以根据需要调整这些属性来自定义时钟的外观。

运行这个应用，你将会看到一个模拟时钟显示在屏幕中央。这个时钟会根据系统时间实时更新。

请注意，analog_clock插件可能在未来更新，所以请查阅最新的官方文档以获取最新的使用指南和属性配置。