animated_date_header

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