Building a Project Timeline Tracker Widget in Flutter
Project management often relies on clear visualization of tasks, milestones, and deadlines. A project timeline tracker widget in a Flutter application provides an intuitive and interactive way to display the progression of a project, enhancing user understanding and engagement. This article will guide you through the process of creating a professional and customizable timeline tracker widget in Flutter, covering the data model, UI design, and implementation details.
1. Defining the Project Task Data Model
First, we need a data structure to represent each event or task in our timeline. This model should include essential information such as the task title, description, date, and perhaps its completion status.
class ProjectTask {
final String title;
final String description;
final DateTime date;
final bool isCompleted;
ProjectTask({
required this.title,
required this.description,
required this.date,
this.isCompleted = false,
});
}
2. Crafting the Timeline Item Widget
Each individual entry on the timeline will be represented by a TimelineItem widget. This widget will display the task's details alongside a visual indicator (a dot) and a connecting line.
import 'package:flutter/material.dart';
import 'package:intl/intl.dart'; // For date formatting
// Assuming ProjectTask class is defined above
class TimelineItem extends StatelessWidget {
final ProjectTask task;
final bool isFirst;
final bool isLast;
final Color lineColor;
final double dotRadius;
const TimelineItem({
Key? key,
required this.task,
this.isFirst = false,
this.isLast = false,
this.lineColor = Colors.blue,
this.dotRadius = 6.0,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Timeline visual (line and dot)
Column(
children: [
// Top line (if not the first item)
Expanded(
child: Container(
width: 2.0,
color: isFirst ? Colors.transparent : lineColor,
),
),
// Dot
Container(
width: dotRadius * 2,
height: dotRadius * 2,
decoration: BoxDecoration(
color: task.isCompleted ? Colors.green : lineColor,
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 2.0),
),
),
// Bottom line (if not the last item)
Expanded(
child: Container(
width: 2.0,
color: isLast ? Colors.transparent : lineColor,
),
),
],
),
const SizedBox(width: 16.0),
// Task content
Expanded(
child: Padding(
padding: const EdgeInsets.only(bottom: 24.0), // Space between items
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
DateFormat('MMM dd, yyyy').format(task.date),
style: const TextStyle(
fontSize: 12.0,
color: Colors.grey,
),
),
const SizedBox(height: 4.0),
Text(
task.title,
style: const TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 4.0),
Text(
task.description,
style: const TextStyle(fontSize: 14.0),
),
],
),
),
),
],
),
);
}
}
Note: For DateFormat, you'll need to add the intl package to your pubspec.yaml:
dependencies:
flutter:
sdk: flutter
intl: ^0.18.1 # Use the latest stable version
3. Building the Project Timeline Tracker Widget
Now, let's combine multiple TimelineItem widgets into a scrollable list to form the complete timeline tracker.
import 'package:flutter/material.dart';
// import 'timeline_item.dart'; // Assuming TimelineItem and ProjectTask are in a separate file or defined above
class ProjectTimelineTracker extends StatelessWidget {
final List tasks;
final Color lineColor;
final double dotRadius;
const ProjectTimelineTracker({
Key? key,
required this.tasks,
this.lineColor = Colors.blue,
this.dotRadius = 6.0,
}) : super(key: key);
@override
Widget build(BuildContext context) {
if (tasks.isEmpty) {
return const Center(
child: Text('No tasks to display in the timeline.'),
);
}
return ListView.builder(
padding: const EdgeInsets.all(16.0),
itemCount: tasks.length,
itemBuilder: (context, index) {
final task = tasks[index];
return TimelineItem(
task: task,
isFirst: index == 0,
isLast: index == tasks.length - 1,
lineColor: lineColor,
dotRadius: dotRadius,
);
},
);
}
}
4. Integrating into Your Flutter Application
To use the ProjectTimelineTracker, simply provide it with a list of ProjectTask objects. You can place it within any part of your widget tree, for example, in a Scaffold's body.
import 'package:flutter/material.dart';
// import 'project_timeline_tracker.dart'; // Assuming the widgets are in a separate file
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Project Timeline App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
final List _sampleTasks = [
ProjectTask(
title: 'Project Kick-off',
description: 'Initial meeting and project planning.',
date: DateTime(2023, 1, 10),
isCompleted: true,
),
ProjectTask(
title: 'Requirement Gathering',
description: 'Collect detailed requirements from stakeholders.',
date: DateTime(2023, 1, 25),
isCompleted: true,
),
ProjectTask(
title: 'UI/UX Design Phase',
description: 'Design mockups and user flows.',
date: DateTime(2023, 2, 15),
isCompleted: false,
),
ProjectTask(
title: 'Backend Development',
description: 'Implement API and database structures.',
date: DateTime(2023, 3, 1),
isCompleted: false,
),
ProjectTask(
title: 'Frontend Implementation',
description: 'Develop the user interface using Flutter.',
date: DateTime(2023, 4, 10),
isCompleted: false,
),
ProjectTask(
title: 'Testing and QA',
description: 'Perform unit, integration, and user acceptance testing.',
date: DateTime(2023, 5, 5),
isCompleted: false,
),
ProjectTask(
title: 'Deployment',
description: 'Launch the application to production environment.',
date: DateTime(2023, 5, 30),
isCompleted: false,
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Project Timeline Tracker'),
),
body: ProjectTimelineTracker(
tasks: _sampleTasks,
lineColor: Colors.purple, // Example of customization
dotRadius: 8.0,
),
);
}
}
5. Further Enhancements and Considerations
This basic timeline tracker can be significantly enhanced:
- Customizable Styles: Allow more parameters for colors, fonts, line thickness, and dot shapes to match various app themes.
- Interactive Elements: Add tap functionality to timeline items to show more details or navigate to a task-specific screen.
- Dynamic Data: Integrate with a backend service or a local database to fetch and update project tasks dynamically.
- Animations: Incorporate subtle animations when tasks are added, removed, or updated, or when the timeline is first loaded.
- Horizontal Timeline: Adapt the layout to support a horizontal scrolling timeline for different use cases.
- Progress Indicators: Add progress bars or percentages to tasks to give a clearer view of completion status.
Conclusion
Building a project timeline tracker in Flutter is a straightforward process that greatly enhances the user experience for project management applications. By defining a clear data model and constructing modular widgets for individual timeline items and the overall tracker, you can create a flexible and visually appealing component. This guide provides a solid foundation, and with further customization and interactivity, your Flutter timeline widget can become a powerful tool for project visualization.
