animated_date_header

animated_date_header demo

A Flutter widget that beautifully animates day number and month name transitions with blur, slide, scale, and bounce effects.

Just pass a DateTime — the widget handles per-letter staggered animations, auto-measured character widths, and smooth transitions automatically.

Features

  • Per-letter animation — month name transitions animate each letter independently with staggered delays
  • Auto-sized characters — no fixed widths; wide letters like "M" get more space than "i" automatically
  • Blur + slide + scale + bounce — multiple layered effects for a premium feel
  • Fully customizable — styles, timing, spacing, and localization are all configurable
  • Zero opinions on layout — only animates the date text; you own the buttons, lists, and page structure
  • Standalone AnimatedDigit — use the core animation widget on its own for any text transition

Installation

Add to your pubspec.yaml:

dependencies:
  animated_date_header: ^0.1.0

Quick Start

import 'package:animated_date_header/animated_date_header.dart';

// That's it — just pass a date
AnimatedDateHeader(date: selectedDate)

Change the date via setState and the widget animates automatically:

setState(() {
  selectedDate = selectedDate.add(const Duration(days: 1));
});

Usage

Basic

AnimatedDateHeader(
  date: _selectedDate,
)

With Custom Styles

AnimatedDateHeader(
  date: _selectedDate,
  style: const AnimatedDateHeaderStyle(
    dayStyle: TextStyle(
      fontSize: 48,
      fontWeight: FontWeight.w900,
      color: Color(0xFFE94560),
      height: 1,
    ),
    monthStyle: TextStyle(
      fontSize: 48,
      fontWeight: FontWeight.w900,
      color: Color(0xFF0F3460),
      height: 1,
    ),
    dayDigitHeight: 54,
    monthLetterHeight: 54,
    dayMonthSpacing: 10,
    monthLetterStagger: Duration(milliseconds: 50),
  ),
)

With Localization

AnimatedDateHeader(
  date: _selectedDate,
  monthNames: const [
    'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
    'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre',
  ],
)

In an App Bar (Your Layout, Your Buttons)

Row(
  children: [
    // YOUR back button
    IconButton(
      onPressed: goToPreviousMonth,
      icon: const Icon(Icons.chevron_left),
    ),

    // The package widget — only the animated text
    Expanded(
      child: AnimatedDateHeader(date: _selectedDate),
    ),

    // YOUR action buttons
    IconButton(
      onPressed: openSettings,
      icon: const Icon(Icons.settings),
    ),
  ],
)

Standalone AnimatedDigit

Use AnimatedDigit on its own for any animated character transitions:

final GlobalKey<AnimatedDigitState> _key = GlobalKey();

AnimatedDigit(
  key: _key,
  digit: '0',
  textStyle: const TextStyle(fontSize: 80, fontWeight: FontWeight.w900),
  containerHeight: 90,
)

// Trigger animation programmatically
_key.currentState?.animateTo('5', Duration.zero);

API Reference

AnimatedDateHeader

Property Type Default Description
date DateTime required The date to display. Changes trigger animation.
style AnimatedDateHeaderStyle const AnimatedDateHeaderStyle() Visual style configuration.
monthNames List<String>? English names Custom month names for localization.
crossAxisAlignment CrossAxisAlignment .start Vertical alignment of day and month.

AnimatedDateHeaderStyle

Property Type Default Description
dayStyle TextStyle Black 26px bold Text style for day digits.
monthStyle TextStyle Black 26px bold Text style for month letters.
dayDigitHeight double 30 Height of day digit containers.
dayDigitWidth double? auto-measured Fixed width per day digit.
monthLetterHeight double 30 Height of month letter containers.
dayMonthSpacing double 4 Gap between day number and month name.
monthLetterStagger Duration 30ms Delay between each month letter animation.
dayDigitStagger Duration 100ms Delay between tens and ones digit animations.

AnimatedDigit

Property Type Default Description
digit String required The character to display.
textStyle TextStyle required Text style for the character.
containerWidth double? auto-measured Fixed width. Null = auto-measure.
containerHeight double 30 Height of the container.
forceAnimate bool false Animate even when character hasn't changed.

AnimatedDigitState Methods

Method Description
animateTo(String newDigit, Duration delay) Animate to a new character after an optional delay. Returns a Future.
isAnimating Whether an animation is currently running.

Design Philosophy

This package only provides the animated date display. It does not include:

  • Navigation buttons (back/forward)
  • Date picker lists or calendars
  • Action buttons or menus
  • Page layouts or scaffolds

This is intentional. Every app has different UI needs — this package gives you the animation magic and lets you build everything else your way.

License

MIT

Libraries

animated_date_header
Animated date header package.