Flutter package for displaying grid view of daily task like Github Contributions

flutter_annual_daily task

flutter package for displaying grid view of daily task like github-contributions.

usage

make sure to check out example project.

annualtaskview(
  taskitem	// list<annualtaskitem>
),

installation

add to pubspec.yaml:

dependencies:
  flutter_annual_task: ^0.1.3

then import it to your project:

import 'package:flutter_annual_task/flutter_annual_task.dart';

and finally add annualtaskview widget in your project.

annualtaskview(
  taskitem	// list<annualtaskitem>
),

annualtaskitem

annualtaskitem

class annualtaskitem {
  final datetime date;
  final double proceeding;	// 0.0 ~ 1.0

  annualtaskitem(this.date, [this.proceeding = 1.0]);
  ...
}

the value of proceeding affects the opacity on the each cell of daily task.
– for showing the color in visual, the minimum value of displaying is 80(max: 255).

annualtaskcoloritem

if you want to specify color for each daily task, you can use annualtaskcoloritem.

class annualtaskcoloritem extends annualtaskitem {
  final color color;

  annualtaskcoloritem(
    datetime date, {
    double proceeding = 1.0,
    this.color,
  }) : super(date, proceeding);
  ...
}

you should generate list of annualtaskitem(list<annualtaskitem>) to use this package.
below is an example for building list of annualtaskitem.

//annualtaskitem
<your_item_list>.map(
  (item) => annualtaskitem(
    item.date,
    0.5,
  ),
)
.tolist();

//annualtaskcoloritem
<your_item_list>.map(
  (item) => annualtaskcoloritem(
    item.date,
    color: <color_for_each_item>
  ),
)
.tolist();

examples

cell shape

specify cellshape with annualtaskcellshape with annualtaskcellshape.rounded_square(default), annualtaskcellshape.square or annualtaskcellshape.circle.

square

square

annualtaskview(
  taskitem, // list<annualtaskitem>
  cellshape: annualtaskcellshape.square,
)

circle

circle

annualtaskview(
  taskitem, // list<annualtaskitem>
  cellshape: annualtaskcellshape.circle,
)

annualtaskcoloritem

circle

annualtaskview(
  taskitemwithcolor, // list<annualtaskcoloritem>
)

labels

you can edit the labels of week or the labels of month.

annualtaskview(
  taskitem, // list<annualtaskitem>
  showmonthlabel: false, //default : true
  showweekdaylabel: false, //default : true
)

without labels

custom label

custom labels

annualtaskview(
  taskitem, // list<annualtaskitem>
  weekdaylabels: ['', 'mon', '', 'wed', '', 'fri', ''],
  monthlabels: ['1','2','3','4','5','6','7','8','9','10','11','12'],
)

the type of weekdaylabels and monthlabels is list<string>.

• weekdaylabels starts from sunday.
• default value of `weekdaylabels’ is [‘s’, ‘m’, ‘t’, ‘w’, ‘t’, ‘f’, ‘s’].
• default value of monthlabels' is[‘jan’, ‘feb’, ‘mar’, ‘apr’, ‘may’, ‘jun’, ‘jul’, ‘aug’, ‘sep’, ‘oct’, ‘nov’, ‘dec’]`.
• you can also hide the label of each items with empty string(''). but, weekdaylabels should be length of 7 and, monthlabels should be length of 12.

styled label

styled label

annualtaskview(
  taskitem, // list<annualtaskitem>
  labelstyle: textstyle(
    color: colors.bluegrey,
    fontsize: 10,
    fontweight: fontweight.bold,
  ),	// default label style : textstyle(fontsize: 8)
)

props