Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
slide_digital_clock cover
Package detailsv1.0.3

slide_digital_clock

Digital Clock for Flutter

pub.dev API documentation Source code
30-day downloads
720
Likes
58
Pub points
60

Install package

flutter pub add slide_digital_clock

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A sleek digital clock widget for Flutter that displays time with a smooth sliding animation. Designed to be minimal and customizable, it's ideal for apps requiring a clean, modern time display. The clock updates in real-time and supports various formatting options. Built with performance and simplicity in mind, it integrates seamlessly into any Flutter project. It is particularly suited for dashboards, home screens, or any UI element where time visibility is essential.

Use cases

  • Real-time time display in apps
  • Dashboard widgets
  • Home screen clocks
  • Minimalist UI designs
  • Digital watch interfaces

Key features

  • Smooth sliding time transition
  • Customizable time format
  • Lightweight and efficient
  • Easy integration with Flutter
  • Supports dark/light themes

Suitable for

  • Simple time displays
  • Flutter beginners
  • Minimalist app designs
  • Clock-based applications
  • UI components needing real-time updates

Considerations

  • No platform-specific features
  • Limited customization beyond time format
  • Does not support alarms or timers
  • No built-in localization
  • Requires manual theme handling

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Slide Digital Clock Plugin

Usage

To use plugin, just import package import 'package:slide_digital_clock/slide_digital_clock.dart';

Defaults

is24HourTimeFormat : `true`
showSecondsDigit : `true`  
areaAligment : `AlignmentDirectional.bottomCenter`   
digitAnimationStyle : `Curves.decelerate`
hourMinuteDigitTextStyle : `Theme.of(context).textTheme.bodyText1`
secondDigitTextStyle : `Theme.of(context).textTheme.caption!.copyWith(fontSize: 10))`
amPmDigitTextStyle : `Theme.of(context).textTheme.caption!.copyWith(fontSize: 10, fontWeight: FontWeight.bold)`

Demo

Demo:

Pics

Demo:

Example

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Slider Digital Clock Demo App",
      home: Scaffold(
        appBar: AppBar(
            title: const Text("Slider Digital Clock Demo App"),
            actions: [
              DigitalClock(
                hourMinuteDigitTextStyle: Theme.of(context)
                    .textTheme
                    .headline4!
                    .copyWith(color: Colors.white),
                secondDigitTextStyle: Theme.of(context)
                    .textTheme
                    .caption!
                    .copyWith(color: Colors.white),
                colon: Text(
                  ":",
                  style: Theme.of(context)
                      .textTheme
                      .subtitle1!
                      .copyWith(color: Colors.white),
                ),
              )
            ]),
        body: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                const Text("Custom Colon"),
                const SizedBox(width: 50),
                DigitalClock(
                  hourMinuteDigitTextStyle: const TextStyle(fontSize: 18),
                  colon: const Icon(Icons.ac_unit, size: 12),
                  colonDecoration: BoxDecoration(
                      border: Border.all(), shape: BoxShape.circle),
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                const Text("Custom Styles"),
                const SizedBox(width: 50),
                DigitalClock(
                  hourDigitDecoration: BoxDecoration(
                      color: Colors.yellow,
                      border: Border.all(color: Colors.blue, width: 2)),
                  minuteDigitDecoration: BoxDecoration(
                      color: Colors.yellow,
                      border: Border.all(color: Colors.red, width: 2)),
                  secondDigitDecoration: BoxDecoration(
                      color: Colors.blueGrey,
                      border: Border.all(color: Colors.blue),
                      shape: BoxShape.circle),
                  secondDigitTextStyle: Theme.of(context)
                      .textTheme
                      .caption!
                      .copyWith(color: Colors.white),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                const Text("Show AM-PM, Disable Seconds"),
                const SizedBox(width: 50),
                DigitalClock(
                  is24HourTimeFormat: false,
                  showSecondsDigit: false,
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Categories

Clock

Source repository

Projects using this package

No data available yet.