animated_date_header 1.0.1

A Flutter widget that 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 automatically.

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