- Display an analog clock and a digital clock in UI.
- Analog clock includes markers for 12, 3, 6, and 9 positions.
- Digital clock is updated in real-time using a stream service.
![](https://private-user-images.githubusercontent.com/117360930/327018788-84544108-abfd-4973-b421-fda1c2b11a60.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg3NjcyMTMsIm5iZiI6MTcxODc2NjkxMywicGF0aCI6Ii8xMTczNjA5MzAvMzI3MDE4Nzg4LTg0NTQ0MTA4LWFiZmQtNDk3My1iNDIxLWZkYTFjMmIxMWE2MC5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjE5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYxOVQwMzE1MTNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01ZGE3YzBmNWVhZDc5NTE2NDgzMzE4ZmM4MmZjNTQwYTQ0OTkxYWZiZjdiNGU3MzYyZWNjZGFkM2UzZjk0MzdmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.V2ukb2toq4_6fj3lDkTZxYaTenkVnnLdr4wijRZDOm8)
Add clock_widget
to your pubspec.yaml
file:
dependencies:
clock_widget: ^0.0.4 # Use the latest version
import 'package:flutter/material.dart';
import 'package:clock_widget/clock_widget.dart';
To show the clock widgets, use the ClockWidget()
method:
// Display an analog clock
ClockWidget(
clockType: ClockType.analog,
// Prop to customize the background color
bgColor: Colors.white,
),
// Display a digital clock
ClockWidget(
clockType: ClockType.digital,
// Prop to customize the background color
bgColor: Colors.white,
),