Github-like activity calendar widget.
Vertical | Horizontal |
---|---|
![]() |
![]() |
- 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.
ActivityCalendar(
activities: activities,
)
Also ActivityCalendar
have some arguments to customize it's view.
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
TooltipBuilder.text(
builder: (int i) => '${activities[i]} contributions',
textStyle: TextStyle(fontWeight: FontWeight.bold),
);
// Rich text
// Builder must return InlineSpan
TooltipBuilder.rich(
builder: (int i) => TextSpan(
children: [
TextSpan(
text: '${activities[i]} contributions',
style: TextStyle(fontWeight: FontWeight.bold),
),
TextSpan(
text: ' on ${calculateDate(i)}',
),
],
),
);
Both TooltipBuilder
constructors have an arguments to customize tooltips, such as padding
, margin
, etc.
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)