Activity Calendar

pub package

Github-like activity calendar widget.

Vertical Horizontal
Vertical screenshot Vertical screenshot


  • Activity Calendar for any days count
  • Customizable view
  • Optional tooltip for each item
  • Optional on tap listener for each item


For use ActivityCalendar all you need to do is push List<int> that represent count of activity per day.

  activities: activities,

Also ActivityCalendar have some arguments to customize it's view.


Tooltip example

When you need to have a tooltips for each item, then all you need to do is pass TooltipBuilder? tooltipBuilder argument to ActivityCalendar. TooltipBuilder can be created with one of two constructors:

// Simple text
// Builder must return String
  builder: (int i) => '${activities[i]} contributions',
  textStyle: TextStyle(fontWeight: FontWeight.bold),

// Rich text
// Builder must return InlineSpan
  builder: (int i) => TextSpan(
    children: [
        text: '${activities[i]} contributions',
        style: TextStyle(fontWeight: FontWeight.bold),
        text: ' on ${calculateDate(i)}',

Both TooltipBuilder constructors have an arguments to customize tooltips, such as padding, margin, etc.

Activity Calendar is the Scroll View

You need to remember, that ActivityCalendar use GridView under the hood. So, if you want to use it inside another ScrollView with same scrollDirection, then you need to use shrinkWrap: true or NestedScrollView.

ActivityCalendar have all arguments, that GridView has, so, you can customize it behavior.

(If you want to know more about nested scrolls, then look for this video by Flutter team)