⌚️Analog Clock widget for Flutter ⏰

Overview

Flutter Analog Clock Widget

pub package

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.0.1

Features

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

Usage

import 'package:analog_clock/analog_clock.dart';


AnalogClock(
	decoration: BoxDecoration(
	    border: Border.all(width: 2.0, color: Colors.black),
	    color: Colors.transparent,
	    shape: BoxShape.circle),
	width: 150.0,
	isLive: true,
	hourHandColor: Colors.black,
	minuteHandColor: Colors.black,
	showSecondHand: false,
	numberColor: Colors.black87,
	showNumbers: true,
	textScaleFactor: 1.4,
	showTicks: false,
	showDigitalClock: false,
	datetime: DateTime(2019, 1, 1, 9, 12, 15),
	);

Parameters

Flutter Analog Clock Parameters

Example

Demo app can be found in the example/ folder.

Comments
  • Changing the displayed time is not working

    Changing the displayed time is not working

    I have a static clock (isLive: false) that displays a time. Then, as a result of user action, it has to display a different time. This does not work. Instead of displaying the second time, the AnalogClock widget starts displaying the current system time.

    Minimal example to demonstrate the problem:

    import 'package:analog_clock/analog_clock.dart';
    import 'package:flutter/material.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      const MyHomePage({Key? key, required this.title}) : super(key: key);
      final String title;
    
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      DateTime time = DateTime(2022, 1, 1, 12, 30, 0);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: AnalogClock(
              isLive: false,
              datetime: time,
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () => setState(() => {
              time = time.add(const Duration(minutes: 15))
            }),
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        );
      }
    }
    

    When tapping the (+) button, the clock should show 12:45. Instead it shows the current time.

    opened by JogyBlack 4
  • Added support to nullsafety

    Added support to nullsafety

    Motivation

    This plugin is beautiful! It deserves to be updated to the nowadays standards.

    Description

    • Added support to nullsafety
    • Changed dart minimum version to 2.12
    • Changed example project to nullsafety too
    • Edited the changelog

    Checks

    • [x] Did you test your feature?
    • [x] Did it worked both on Android and iOS?
    opened by andersonfds 4
  • Military time option.

    Military time option.

    Currently when you turn on the digital clock it will always display in military time format. I made the clock default to standard 12-hour format with the option to use military time.

    If you are hard set on military time being the default I can make 12-hour format the extra option instead.

    Let me know if you have any questions.

    opened by KaeganClark 3
  • demo.dart is not working

    demo.dart is not working

    I commented the "void main() => runApp(MyApp());" line and uncommented the "void main() => runDemo();" line and built the project on andriod The app is displaying nothing but a white screen!

    opened by Yaseendev 2
  • Clock don't run when using datetime param is not current time

    Clock don't run when using datetime param is not current time

    Widget build(BuildContext context) {
        //DateTime d = DateTime.now();
        DateTime d = DateTime(2020,4,1,1,15,15,15,123);
        return Column(
          children: <Widget>[
            AnalogClock(
              datetime: d,
               isLive: true,
             ),
           ],
        );
    ...
    
    

    I used another datetime either fetching from server or creating any DateTime the clock don't run Have you ever seen ?

    opened by phong-et 2
  • The plugin `analog_clock` uses a deprecated version of the Android embedding.

    The plugin `analog_clock` uses a deprecated version of the Android embedding.

    The plugin analog_clock uses a deprecated version of the Android embedding. To avoid unexpected runtime failures, or future build failures, try to see if this plugin supports the Android V2 embedding. Otherwise, consider removing it since a future release of Flutter will remove these deprecated APIs. If you are plugin author, take a look at the docs for migrating the plugin to the V2 embedding: https://flutter.dev/go/android-plugin-migration.

    opened by Sully55 1
  • DateTime Property - No Change

    DateTime Property - No Change

    When changing the DateTime that is passed into the AnalogClock Widget based on some event the clock isn't updating on the device. Having taken a look at the code, I believe this is because you haven't overridden the didUpdateWidget method in the _AnalogClockState class.

    I believe you need a method like

    @override
      void didUpdateWidget(AnalogClock oldWidget) {
        super.didUpdateWidget(oldWidget);
        
        if(!widget.isLive && widget.datetime != oldWidget.datetime) {
          datetime = widget.datetime;
        }
      }
    
    opened by JayDev43 1
  • Added feature to show all the hour numbers.

    Added feature to show all the hour numbers.

    I have added a feature to add all the hour numbers in the analog clock and fixed kotlin version. Also, I added extra padding accidentally in the first commit which I have removed.

    opened by pidwid 1
  • pub.dev package links to timeline_list project instead of this one

    pub.dev package links to timeline_list project instead of this one

    1. Go to https://pub.dev/packages/analog_clock
    2. Click on Repository (Github) and View/report issues. These two links go to https://github.com/furkantektas/timeline_list instead of this repo.
    opened by maryx 1
Owner
Furkan Tektas
🤹‍♂️ Data
Furkan Tektas
This app is a good example of how adding animations can liven up a digital clock.

Animal Clock This app is a good example of how adding animations can liven up a digital clock. The lion's head bobbles along without any care in the w

sei 7 Jun 29, 2022
This clock face was inspired by neumorphic design.

Flutter Clock This clock face was inspired by neumorphic design. The main goal during development was simplicity and attention to details. Clock face'

Dominik Roszkowski 94 Dec 9, 2022
A simple Flutter widget to add in the widget tree when you want to show nothing, with minimal impact on performance.

nil A simple widget to add in the widget tree when you want to show nothing, with minimal impact on performance. Why? Sometimes, according to a condit

Romain Rastel 127 Dec 22, 2022
A flutter carousel widget, support infinite scroll, and custom child widget.

carousel_slider A carousel slider widget. Features Infinite scroll Custom child widgets Auto play Supported platforms Flutter Android Flutter iOS Flut

Bart T 1 Nov 25, 2021
A Flutter Widget to make interactive timeline widget.

Bubble Timeline Package A Flutter Widget to make interactive timeline widget. This widget can be used to make Event Timelines, or Timelines for certai

Vansh Goel 12 Sep 22, 2022
📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

?? Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Blue Fire 1.7k Jan 7, 2023
A widget lib that the widget in this lib can react to flutter ScrollController's offset

Language: English | 中文简体 linked_scroll_widgets A lib full of widgets that can react to the scrollController's offset change,to custom your UI effect.

WenJingRui 8 Oct 16, 2022
Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

lite_rolling_switch Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget https://github.com/pedromas

Eduardo Muñoz 48 Dec 1, 2022
Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

DISCONTINUED Checkout ArsDialog ars_progress_dialog Customizable progress dialog for Flutter applications with smooth animation for background dim col

Arsam 8 Apr 15, 2022
A Flutter widget that will give a Glitch Animation Effect to it's child widget.

GlitchEffect A Flutter widget that will give a Glitch Animation Effect to it's child widget. Installation Add the latest version of package to your pu

Sameer Singh 6 Nov 25, 2022
Widget, that can make any static located widget hidable

Installing See the official installing guidline from hidable/install Usage & Overview To start using Hidable widget, we have to create a ScrollControl

Anon 18 Dec 16, 2022
A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

MohammadAminZamani.afshar 22 Dec 13, 2022
Flutter Carousel Pro - A Flutter Carousel widget

Carousel Extended A Flutter Carousel widget. Usage As simple as using any flutter Widget. Based on Carousel Pro but extended to be able to navigate be

omid habibi 3 Dec 7, 2020
🟥 A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

?? A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

Andrei Lesnitsky 32 Oct 8, 2022
React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.

English | Português Flutter Hooks A Flutter implementation of React hooks: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 Ho

Remi Rousselet 2.6k Dec 29, 2022
A credit card widget for Flutter application.

A credit card widget for Flutter application.

Simform Solutions 281 Dec 27, 2022
A simple Flutter widget library that helps us to select days in a week.

A simple Flutter widget library that helps us to select days in a week.

Shan Shaji 4 Oct 9, 2022
Flutter debug helper widget with common and custom actions

Flutter debug helper widget with common and custom actions

Stanislav Ilin 43 Dec 7, 2022
A flutter plugin which provides Crop Widget for cropping images.

A flutter plugin which provides Crop Widget for cropping images.

Chooyan 97 Jan 5, 2023