gantt_view

Description:

gantt view

A customisable Gantt Chart view for Flutter.

Currently under development

Features #

Sticky Title Column to display task names
Sticky Legend Row to display dates
Customisable task bar colors
Customisable task bar height
Customisable gaps between task bars
Customisable task bar corner radius
Ability to switch from day view to week view
Display weekends in a different color
Customisable weekend color
Custom highlighted dates
Customisable highlighted date color
Tooltip on hover, or tap, of task bar
Customisable tooltip style

Usage #

All that is required is a GanttChart<T> widget with a List<GridRow> passed in. The List<GridRow> is a list of <ActivityGridRow> and TaskGridRow, an example of how to construct is in example\lib\main.dart.
There are basic theming options available for customising the look and feel of the GanttChart, such as changing how rows look, and if headers should be displayed.
ActivityGridRow and TaskGridRow are the two types of rows that can be displayed in the GanttChart. ActivityGridRow is a row that displays a header for a group of tasks, and TaskGridRow is a row that displays a task. To customise the look of the rows, a GanttRowStyle can be provided to the GanttChart widget. The GanttRowStyle has 2 fields, activityLabelBuilder and taskLabelBuilder, which are used to customise the look of the ActivityGridRow and TaskGridRow respectively.
Other customisation options include the ability to change the color of the grid lines, the color of the weekend columns, and the color of the highlighted dates. The GanttChart also has the ability to display a tooltip when a task is hovered over, or tapped on.
GanttChart<ExampleEventItem>(
rows: _items.toRows(),
style: GanttStyle(
columnWidth: 100,
barHeight: 16,
timelineAxisType: TimelineAxisType.daily,
tooltipType: TooltipType.hover,
taskBarColor: Colors.blue.shade400,
activityLabelColor: Colors.blue.shade500,
taskLabelColor: Colors.blue.shade900,
taskLabelBuilder: (task) => TaskLabel(task),
gridColor: Colors.grey.shade300,
taskBarRadius: 8,
activityLabelBuilder: (activity) => ActivityLabel(activity),
axisDividerColor: Colors.grey.shade500,
tooltipColor: Colors.redAccent,
tooltipPadding:
const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
weekendColor: Colors.grey.shade200,
snapToDay: false,
),
dateLines: [
GanttDateLine(
date: DateTime.timestamp(), width: 2, color: Colors.orangeAccent),
GanttDateLine(
date: DateTime.timestamp().add(const Duration(days: 2)),
),
],
)
copied to clipboard
Styling #



Property
Type




taskBarColor
Color


taskBarRadius
double


taskLabelColor
Color


activityLabelColor
Color


chartTitleBuilder
Widget Function()?


taskLabelBuilder
Widget Function(TaskGridRow


activityLabelBuilder
Widget Function(ActivityGridRow activity)?


yearLabelBuilder
Widget Function(int year)


monthLabelBuilder
Widget Function(Month month)


dayLabelBuilder
Widget Function(int day)


gridColor
Color?


weekendColor
Color?


holidayColor
Color


axisDividerColor
Color?


tooltipColor
Color


tooltipStyle
TextStyle


tooltipPadding
EdgeInsets


tooltipRadius
double


barHeight
double


columnWidth
double


tooltipWidth
double


labelColumnWidth
double


snapToDay
bool


showYear
bool


showMonth
bool


showDay
bool


timelineAxisType
TimelineAxisType


tooltipType
TooltipType



Additional information #
This is a WIP project and is not yet ready for production use. The API is subject to change. Any feedback is welcome, as are pull requests.
TODO #

❌ Add zooming functionality
✅ Add ability to customise individual task bar colors
❌ Add ability to define custom start and end times for the entire chart
❌ Tests
❌ Add ability to define legend height, label column width, which overrides the autocalculated values
❌ Add ability to hide the legend
❌ Add ability to hide the title/labels
❌ Add ability to set the first day of the week
❌ Add ability to make highlighted days and weekend days a solid colour, so that the task bar is not visible
❌ Add scrollbars
✅ Add date lines for the user to be able to display important dates

Current Known Issues #

❌ Sometimes when instantiated, the pan offset of the chart is not correctly updated when panning, resulting in a slower pan speed than expected.
❌ Large lists of items can cause the chart to be slow to render, due to:

Sorting a large amount of data into Activities and Tasks;
Calculating the width of the label column based on the longest label;

This is done currently via a utility function being run for each label and getting the width, then taking the max width of all the labels, which is not efficient.




✅ When resizing, the chart can try to render further than it's bounds, instead of updating the pan offset to the new bounds.
❌ Dates not in UTC time can cause issues when crossing into daylight savings time (DST), as the chart does not take into account DST.
❌ Sometimes on web, scrolling horizontally with a horizontal mouse wheel doesn't work