flutter_gantt 1.4.0

Flutter package for rendering an interactive and customizable Gantt chart widget.

Flutter Gantt Chart

A production-ready, fully customizable Gantt chart widget for Flutter applications.

---

Features

• 💓 Scrollable timeline view
• ↔ Draggable
• 🎈 Complete visual customization
• 🛳 Hierarchical activities with parent/child relationships
• 🙳 Activity custom builder
• 👅 Built-in date utilities and calculations
• 🚀 Optimized for performance
• 😱 Responsive across all platforms

---

Installation

Add to your pubspec.yaml:

yaml dependencies: flutter_gantt: <latest-version>

Then run:

bash flutter pub get

---

Quick Start

import 'package:flutter_gantt/flutter_gantt.dart';

Gantt(
  theme: GanttTheme.of(context),
  activitiesAsync: (startDate, endDate, activity) async => _activities,
  holidaysAsync: (startDate, endDate, holidays) async _holidays,
  onActivityChanged: (activity, start, end) {
    if (start != null && end != null) {
      debugPrint('$activity was moved (Event on widget)');
    } else if (start != null) {
      debugPrint(
        '$activity start was moved (Event on widget)',
      );
    } else if (end != null) {
      debugPrint('$activity end was moved (Event on widget)');
    }
  },
),

---

Documentation

Core Components

Gantt Widget

The main chart container with these key properties:

Property	Type	Description
startDate	DateTime	Initial visible date
activities	List	Activities to display
holidays	List	Special dates to highlight
theme	GanttTheme	Visual customization
controller	GanttController	Programmatic control
showIsoWeek	bool	Enables the ISO week-number row
activitiesListHeader	Widget?	Widget shown in the empty area above the activities list
activitiesListWidth	GanttActivitiesListWidth?	Resizable activities list width, with min/max bounds
collapseActionsBelowWidth	double?	List width below which row actions go in a "more" menu

GanttActivity

Represents a task with:

GanttActivity(
  start: DateTime.now(),
  end: DateTime.now().add(Duration(days: 5)),
  title: 'Task Name',
  color: Colors.blue,
  // Optional:
  progress: 0.4, // drawn as a line along the bottom of the cell
  children: [/* sub-tasks */],
  onCellTap: (activity) => print('Tapped ${activity.title}'),
)

---

Advanced Features

Programmatic Control

final controller = GanttController(
    startDate: DateTime.now(),
    daysViews: 30,
);

// Navigate timeline
controller.next(days: 7);   // Move forward
controller.prev(days: 14);  // Move backward

// Update data
controller.setActivities(newActivities);

Custom Builders

GanttActivity(
  cellBuilder: (date) => YourCustomWidget(date),
  titleWidget: YourTitleWidget(),
)

ISO Weeks

GanttActivity(
  showIsoWeek: true,
  ...
)

Activities List Header

Fill the empty area at the top of the activities list column, aligned with the calendar header:

Gantt(
  activitiesListHeader: Center(child: Text('Activities')),
  ...
)

Resizable Activities List

Pass a GanttActivitiesListWidth to let users resize the activities list column by dragging its edge. The width is expressed in logical pixels and is not persisted by the package: restore it through width and save it from onChanged, which is called when the drag ends.

Gantt(
  activitiesListWidth: GanttActivitiesListWidth(
    width: prefs.getDouble('ganttListWidth'), // null = derived from the flex ratio
    minWidth: 150,
    maxWidth: 500,
    onChanged: (width) => prefs.setDouble('ganttListWidth', width),
  ),
  ...
)

When activitiesListWidth is null, the column is not resizable and its width is driven by activitiesListFlex and gridAreaFlex.

---

Examples

Explore complete examples in the example folder.

---

Contributing

We welcome contributions!

---

License

MIT – See LICENSE for details.

Roadmap

• Added limitations when dragging
• Improving documentation
• Improving mobile usability