Legacy Gantt Chart #

A flexible and performant Gantt chart widget for Flutter. Supports interactive drag-and-drop, resizing, dynamic data loading, and extensive theming.

Features #

• Performant Rendering: Uses CustomPainter for efficient rendering of a large number of tasks and grid lines.
• Dynamic Data Loading: Fetch tasks asynchronously for the visible date range using a LegacyGanttController.
• Interactive Tasks: Built-in support for dragging, dropping, and resizing tasks.
• Task Options Menu: Right-click or tap a task's option icon to access actions like copy, delete, and dependency management.
• Interactive Dependency Creation: Users can visually create dependencies by dragging a connector from one task to another.
• Task Dependencies: Define and visualize relationships between tasks. Supports Finish-to-Start, Start-to-Start, Finish-to-Finish, Start-to-Finish, and Contained dependency types.
• Task Stacking: Automatically stacks overlapping tasks within the same row.
• Customization:
  • Extensive theming support via LegacyGanttTheme.
  • Use custom builders (taskBarBuilder, taskContentBuilder) to render completely unique task widgets.
• Timeline Navigation: Includes a LegacyGanttTimelineScrubber widget for an intuitive overview and navigation of the entire timeline.
• Special Task Types & Visual Cues: The chart uses specific visual patterns to convey important information at a glance:
  • Summary Bars (Angled Pattern): A summary bar depicts a resource's overall time allocation (e.g., a developer's work week). The angled pattern signifies it's a container for other tasks. Child rows underneath show the specific tasks that consume this allocated time, making it easy to see how the resource's time is being used and whether they have availability.
  • Conflict Indicators (Red Angled Pattern): This pattern is used to raise awareness of contemporaneous activity that exceeds capacity. It typically appears when more tasks are scheduled in a row than the rowMaxStackDepth allows, highlighting over-allocation or scheduling issues.
  • Background Highlights: Simple colored rectangles used to denote special time ranges like weekends, holidays, or periods of unavailability for a specific resource.

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  legacy_gantt_chart: ^0.5.1 # Replace with the latest version

Then, you can install the package using the command-line:

flutter pub get

Now, import it in your Dart code:

import 'package:legacy_gantt_chart/legacy_gantt_chart.dart';

Quick Start #

Here is a minimal example of how to create a static Gantt chart.

import 'package:flutter/material.dart';
import 'package:legacy_gantt_chart/legacy_gantt_chart.dart';

class MinimalGanttChart extends StatelessWidget {
  const MinimalGanttChart({super.key});

  @override
  Widget build(BuildContext context) {
    // 1. Define rows for your chart
    final rows = [
      LegacyGanttRow(id: 'row1', name: 'Development'),
      LegacyGanttRow(id: 'row2', name: 'QA'),
    ];

    // 2. Define tasks and assign them to rows
    final tasks = [
      LegacyGanttTask(
        id: 'task1',
        rowId: 'row1',
        name: 'Implement Feature A',
        start: DateTime.now().subtract(const Duration(days: 5)),
        end: DateTime.now().add(const Duration(days: 2)),
      ),
      LegacyGanttTask(
        id: 'task2',
        rowId: 'row2',
        name: 'Test Feature A',
        start: DateTime.now().add(const Duration(days: 2)),
        end: DateTime.now().add(const Duration(days: 4)),
      ),
    ];

    // 3. Create the widget
    return LegacyGanttChartWidget(
      data: tasks,
      visibleRows: rows,
      rowMaxStackDepth: const {'row1': 1, 'row2': 1},
      gridMin: DateTime.now().subtract(const Duration(days: 10)).millisecondsSinceEpoch.toDouble(),
      gridMax: DateTime.now().add(const Duration(days: 15)).millisecondsSinceEpoch.toDouble(),
    );
  }
}

Running the Example #

To see a full-featured demo of the legacy_gantt_chart in action, you can run the example application included in the repository.

1. Navigate to the example directory:

   cd example
   

2. Install dependencies:

   flutter pub get
   

3. Run the app:

   flutter run
   

Advanced Usage #

Dynamic Data Loading with LegacyGanttController #

For real-world applications, you'll often need to load data from a server based on the visible date range. The LegacyGanttController is designed for this purpose.

class DynamicGanttChartPage extends StatefulWidget {
  @override
  _DynamicGanttChartPageState createState() => _DynamicGanttChartPageState();
}

class _DynamicGanttChartPageState extends State<DynamicGanttChartPage> {
  late final LegacyGanttController _controller;
  final List<LegacyGanttRow> _rows = [LegacyGanttRow(id: 'row1')];

  @override
  void initState() {
    super.initState();
    _controller = LegacyGanttController(
      initialVisibleStartDate: DateTime.now().subtract(const Duration(days: 15)),
      initialVisibleEndDate: DateTime.now().add(const Duration(days: 15)),
      tasksAsync: _fetchTasks, // Your data fetching function
    );
  }

  Future<List<LegacyGanttTask>> _fetchTasks(DateTime start, DateTime end) async {
    // In a real app, you would make a network request here.
    await Future.delayed(const Duration(seconds: 1));
    return [ /* ... your fetched tasks ... */ ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dynamic Gantt Chart')),
      body: LegacyGanttChartWidget(
        controller: _controller,
        visibleRows: _rows,
        rowMaxStackDepth: const {'row1': 1},
      ),
    );
  }
}

Timeline Navigation with LegacyGanttTimelineScrubber #

Combine the LegacyGanttController with the LegacyGanttTimelineScrubber to provide users with a powerful way to navigate the chart's timeline.

Column(
  children: [
    Expanded(
      child: LegacyGanttChartWidget(
        controller: _controller,
        // ... other properties
      ),
    ),
    LegacyGanttTimelineScrubber(
      totalStartDate: DateTime(2023, 1, 1),
      totalEndDate: DateTime(2024, 12, 31),
      visibleStartDate: _controller.visibleStartDate,
      visibleEndDate: _controller.visibleEndDate,
      tasks: _controller.tasks,
      onWindowChanged: (newStart, newEnd) {
        _controller.setVisibleRange(newStart, newEnd);
      },
    ),
  ],
)

Interactive Tasks (Drag & Drop, Resize) #

Enable interactivity and listen for updates using the onTaskUpdate callback.

LegacyGanttChartWidget(
  // ... other properties
  enableDragAndDrop: true,
  enableResize: true,
  onTaskUpdate: (task, newStart, newEnd) {
    // Here you would update your state and likely call an API
    // to persist the changes.
  },
)

Custom Task Appearance #

Use taskContentBuilder to replace the content inside the task bar, or taskBarBuilder to replace the entire task bar widget for full control.

LegacyGanttChartWidget(
  // ... other properties
  taskContentBuilder: (task) {
    return Text(task.name ?? '', style: const TextStyle(color: Colors.white));
  },
)

Theming #

Customize colors, text styles, and more by providing a LegacyGanttTheme.

LegacyGanttChartWidget(
  // ... other properties
  theme: LegacyGanttTheme.fromTheme(Theme.of(context)).copyWith(
    barColorPrimary: Colors.green,
    gridColor: Colors.grey.shade800,
  ),
)

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

This project is licensed under the MIT License.