flutter_annual_task

用于显示类似 Github-Contributions 的每日任务网格视图的 Flutter 包。

用法

请务必查看 示例项目。

AnnualTaskView(
  taskItem	// List<AnnualTaskItem>
),

安装

添加到 pubspec.yaml

dependencies:
  flutter_annual_task: ^0.1.3

然后将其导入到您的项目中

import 'package:flutter_annual_task/flutter_annual_task.dart';

最后，请在您的项目中添加 AnnualTaskView 小部件。

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]);
  ...
}

proceeding 的值会影响每日任务每个单元格的透明度。
- 为了在视觉上显示颜色，显示的最小值为80（最大值：255）。

AnnualTaskColorItem

如果您想为每个每日任务指定颜色，可以使用 AnnualTaskColorItem。

class AnnualTaskColorItem extends AnnualTaskItem {
  final Color color;

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

您应该生成 AnnualTaskItem 列表（List<AnnualTaskItem>）来使用此包。
以下是构建 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();

示例

单元格形状

使用 AnnualTaskCellShape 指定单元格形状，可选值有 AnnualTaskCellShape.ROUNDED_SQUARE（默认）、AnnualTaskCellShape.SQUARE 或 AnnualTaskCellShape.CIRCLE。

方形

example_cellshape_square
方形 
AnnualTaskView(
  taskItem, // List<AnnualTaskItem>
  cellShape: AnnualTaskCellShape.SQUARE,
)

圆形

example_cellshape_circle
圆形 
AnnualTaskView(
  taskItem, // List<AnnualTaskItem>
  cellShape: AnnualTaskCellShape.CIRCLE,
)

AnnualTaskColorItem

example_cellshape_coloritem
圆形 
AnnualTaskView(
  taskItemWithColor, // List<AnnualTaskColorItem>
)

标签

您可以编辑星期标签或月份标签。

AnnualTaskView(
  taskItem, // List<AnnualTaskItem>
  showMonthLabel: false, //default : true
  showWeekDayLabel: false, //default : true
)
example_label_without
无标签

自定义标签

example_label_custom
自定义标签 
AnnualTaskView(
  taskItem, // List<AnnualTaskItem>
  weekDayLabels: ['', 'Mon', '', 'Wed', '', 'Fri', ''],
  monthLabels: ['1','2','3','4','5','6','7','8','9','10','11','12'],
)

weekDayLabels 和 monthLabels 的类型是 List<String>。

  • weekDayLabels 从星期日开始。
  • weekDayLabels 的默认值为 ['S', 'M', 'T', 'W', 'T', 'F', 'S']。
  • monthLabels 的默认值为 ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']。
  • 您也可以使用空字符串（''）隐藏每个项目的标签。但是，weekDayLabels 的长度应为7，monthLabels 的长度应为12。

样式化标签

example_label_style
样式化标签 
AnnualTaskView(
  taskItem, // List<AnnualTaskItem>
  labelStyle: TextStyle(
    color: Colors.blueGrey,
    fontSize: 10,
    fontWeight: FontWeight.bold,
  ),	// default label style : TextStyle(fontSize: 8)
)

Props

props 类型 描述
items List<AnnualTaskItem> AnnualTaskItem 列表
年份 整数 默认值：DateTime.now().year
激活颜色 颜色 默认值：Theme.of(context).primaryColor
空颜色 颜色 proceeding 为 0.0 或 items 不包含该天的单元格颜色。
默认值：Color(0xFFD0D0D0)
显示星期标签 布尔值 如果为 true，则显示星期标签。
默认值：true
单元格形状 AnnualTaskCellShape 单元格形状。可以是 AnnualTaskCellShape.ROUNDED_SQUARE、AnnualTaskCellShape.SQUARE 或 AnnualTaskCellShape.CIRCLE 之一。
默认值：AnnualTaskCellShape.ROUNDED_SQUARE
显示月份标签 布尔值 如果为 true，则显示月份标签。
默认值：true
月份标签 List<String> 月份的标签。
默认值：['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
星期标签 List<String> 星期的标签。
默认值：['S', 'M', 'T', 'W', 'T', 'F', 'S']
labelStyle TextStyle 标签的 TextStyle。
默认值：TextStyle(fontSize: 8)

GitHub

https://github.com/HuanSuh/flutter_annual_task