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

Overview

flutter_annual_task

flutter_annual_task

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

Example example

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

Image
square
AnnualTaskView(
  taskItem, // List<AnnualTaskItem>
  cellShape: AnnualTaskCellShape.SQUARE,
)

Circle

Image
circle
AnnualTaskView(
  taskItem, // List<AnnualTaskItem>
  cellShape: AnnualTaskCellShape.CIRCLE,
)

AnnualTaskColorItem

Image
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
)
Image
without labels

Custom label

Image
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

Image
Styled label
AnnualTaskView(
  taskItem, // List<AnnualTaskItem>
  labelStyle: TextStyle(
    color: Colors.blueGrey,
    fontSize: 10,
    fontWeight: FontWeight.bold,
  ),	// default label style : TextStyle(fontSize: 8)
)

Props

props type desc
items List<AnnualTaskItem> List of AnnualTaskItem
year int default : DateTime.now().year
activateColor Color default : Theme.of(context).primaryColor
emptyColor Color Color of cell with proceeding 0.0 or the day which items doesn't contain.
default : Color(0xFFD0D0D0)
showWeekDayLabel bool Show the labels of week, if true.
default : true
cellShape AnnualTaskCellShape Shape of cell. One of AnnualTaskCellShape.ROUNDED_SQUARE, AnnualTaskCellShape.SQUARE or AnnualTaskCellShape.CIRCLE.
default: AnnualTaskCellShape.ROUNDED_SQUARE
showMonthLabel bool Show the labels of month, if true.
default : true
monthLabels List<String> Labels of month.
default: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
weekDayLabels List<String> Labels of week.
default: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
labelStyle TextStyle TextStyle of labels.
default: TextStyle(fontSize: 8)
You might also like...

Flutter Github Following Application, Using Flutter Provider and Flutter HTTP to get data from Github API.

Flutter Github Following Application, Using Flutter Provider and Flutter HTTP to get data from Github API.

Flutter Github Following Application Watch it on Youtube Previous Designs Checkout my Youtube channel Installation Please remember, after cloning this

Dec 23, 2022

Github-search - Allows users to search users on github Uses flutter

Github-search - Allows users to search users on github Uses flutter

Github Search Github Search is a cross-platform mobile application powered by Flutter Framework and Github API. The application was built with simplic

Sep 13, 2022

An open-source unofficial GitHub mobile client, that aims to deliver the ultimate GitHub experience on mobile devices.

An open-source unofficial GitHub mobile client, that aims to deliver the ultimate GitHub experience on mobile devices.

DioHub for Github Summary Features Roadmap Support Screenshots Build Instructions Summary DioHub is an open-source unofficial GitHub mobile client, th

Jan 4, 2023

Flutter package for displaying and animating Scalable Vector Graphics 1.1 files. The package has been written solely in Dart Language.

Flutter package for displaying and animating Scalable Vector   Graphics 1.1 files. The package has been written solely in Dart Language.

Animated SVG | Flutter Package Flutter package for displaying and animating Scalable Vector Graphics 1.1 files. The package has been written solely in

Jul 19, 2022

Flutter list view - An unofficial list view for flutter

Flutter list view - An unofficial list view for flutter

Flutter List View I don't like official list view. There are some features don't

Dec 15, 2022

Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

swipeable_button_view You can create ripple animated pages with swipeable_button

Apr 22, 2022

-UNDER DEVELOPMENT- a project built demonstrating model view view model architecture

mvvm_project A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

Nov 28, 2022

This is an auction application just like eBay. Using firebase as the backend for signup & sign-in functionality. In addition to that, it's a two pages application with user bid in input and count down view.

This is an auction application just like eBay. Using firebase as the backend for signup & sign-in functionality.  In addition to that, it's a two pages application with user bid in input and count down view.

Nilam This is an auction application just like eBay. Using firebase as the backend for signup & sign-in functionality. In addition to that, it's a two

Nov 9, 2022

A iOS like table view including section, row, section header and divider

A iOS like table view including section, row, section header and divider

flutter_section_table_view A iOS like table view including section, row, section header and divider Support both Android and iOS Support drop-down ref

Nov 4, 2022
Comments
  • Not populating colored box between April and November

    Not populating colored box between April and November

    Hi @HuanSuh ,

    I liked your Flutter package and started to use it, but after trying it out, I noticed how it does not populate colored boxes in the middle of the year between April and November across all types of calendars in your example project.

    Screenshot: screenshot

    When I try to color a box in between this empty space, it doesn't show up. Please let me know how I can fix this. Thanks!

    invalid 
    opened by mihir-chauhan 1
Daily-Task-Manager a daily task manager application project created in flutter

This is a daily task manager application project created in flutter. Install this application on Android - Install from Play Store

DVS 0 May 10, 2022
A grid-based layout system for Flutter, inspired by CSS Grid Layout

Flutter Layout Grid A powerful grid layout system for Flutter, optimized for complex user interface design. Click images to see their code ✨ Featuring

Felt 307 Dec 24, 2022
A grid-based layout system for Flutter, inspired by CSS Grid Layout

Flutter Layout Grid A powerful grid layout system for Flutter, optimized for complex user interface design. Click images to see their code ✨ Featuring

Felt 307 Dec 24, 2022
Github-apps-flutter - Github Apps Build Using bloc 8.0 and Github API

Github_apps Inspiration This app is made to build using bloc 8.0 and github API.

Irvan Lutfi Gunawan 18 Apr 14, 2022
Daily Horoscopes - It is a flutter application where you can follow daily horoscope information.

Daily Horoscopes It is a flutter application where you can follow daily horoscope information. Tech and Libraries MVVM Architecture State Management w

Merthan Kavak 59 Nov 23, 2022
Sticky Grid View For Flutter

Features Listing images in gridview wrapped listview gives bad performance (disp

null 1 Nov 14, 2022
UTS Mobile Programming membuat Grid view

uts_181021450006 A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

null 1 Mar 30, 2022
Android view for displaying PDFs rendered with PdfiumAndroid

Looking for new maintainer! Android PdfViewer AndroidPdfViewer 1.x is available on AndroidPdfViewerV1 repo, where can be developed independently. Vers

null 7.5k Jan 2, 2023
Create responsive dashboard Daily Task design using Flutter

Daily Task Watch it on YouTube Dashboard Screen This dashboard page is designed for the daily task. This design contains profile, task overview, calen

Firgia 242 Jan 5, 2023
Dusyeri provider task - Dusyeri provider task built using flutter

Düşyeri Provider Task https://github.com/alper-mf/dusyeri_provider_task/blob/7d1

null 1 May 9, 2022