A beautiful and customizable time planner for flutter

time planner

a beautiful, easy to use and customizable time planner for flutter mobile ��, desktop �� and web ��

this is a widget for show tasks to user on a time table.
each row show a hour and each column show a day but you can change the title of column and show any things else you want.

screenshots

mobile	dark

desktop	web

usage

1. add dependencies into you project pubspec.yaml file

dependencies:
  time_planner: ^0.0.2

2. import time planner lib

import 'package:time_planner/time_planner.dart';

3. use time planner

list<timeplannertask> tasks = [
  timeplannertask(
    // background color for task
    color: colors.purple,
    // day: index of header, hour: task will be begin at this hour
    // minutes: task will be begin at this minutes
    datetime: timeplannerdatetime(day: 0, hour: 14, minutes: 30),
    // duration of task
    minutes: 90,
    ontap: () {},
    child: text(
      'this is a task',
      style: textstyle(color: colors.grey[350], fontsize: 12),
    ),
  ),
];

timeplanner(
  // time will be start at this hour on table
  starthour: 6,
  // time will be end at this hour on table
  endhour: 24,
  // each header is a column and a day
  headers: [
    timeplannertitle(
      date: "3/10/2021",
      title: "sunday",
    ),
    timeplannertitle(
      date: "3/11/2021",
      title: "monday",
    ),
    timeplannertitle(
      date: "3/12/2021",
      title: "tuesday",
    ),
  ],
  // list of task will be show on the time planner
  tasks: tasks,
),

style

you can change style of time planner with timeplannerstyle :

style: timeplannerstyle(
  backgroundcolor: colors.bluegrey[900],
  // default value for height is 80
  cellheight: 60,
  // default value for width is 80
  cellwidth: 60,
  dividercolor: colors.white,
  showscrollbar: true,
),

when time planner widget loaded it will be scroll to current local hour and this futrue is true by default, you can turn this off like this:

currenttimeanimation: false,