Flutter Time Planner Example
In this article, we are going to create customizable flutter time planner in mobile application. You can also check out how to create events in calendar widget.
To create time planner or day planner in flutter application, we are using time_planner package. We can use this plugin for all platforms like mobile, desktop and web. Using this time planner widget, we can create our schedule for whole day or multiple days.
In this time planner widget UI, every column shows a day and every row shows a hour. We can also show specific day and hour in this widget. We can also customize text of date and its title. In this flutter example, we are creating random event on tap of add event button.
Time Planner Widget has many properties. headers property is used to display days in time planner widget. To create day, we need to use TimePlannerTitle widget. To create multiple days, we must add multiple TimePlannerTitle widgets in list and add this to headers property.
startHour attribute is used to start time from this hour. You need to add minimum hour 1. endHour property is used to end time at this hour. tasks property is used to display list widgets in time planner widget. We can also customize time planner widget using style property.
Add required dependency in your pubspec.yaml file
Flutter Time Planner Widget
appBar: AppBar(
title: Text(‘Flutter Time Planner Sample’),
centerTitle: true,
),
body: Center(
child: TimePlanner(
startHour: 6,
endHour: 24,
headers: [
TimePlannerTitle(
date: “8/23/2021”,
title: “Monday”,
dateStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
TimePlannerTitle(
date: “8/24/2021”,
title: “Tuesday”,
dateStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
TimePlannerTitle(
date: “8/25/2021”,
title: “Wednesday”,
dateStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
TimePlannerTitle(
date: “8/26/2021”,
title: “Thursday”,
dateStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
TimePlannerTitle(
date: “8/27/2021”,
title: “Friday”,
dateStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
TimePlannerTitle(
date: “8/28/2021”,
title: “Saturday”,
dateStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
TimePlannerTitle(
date: “8/29/2021”,
title: “Sunday”,
dateStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
TimePlannerTitle(
date: “8/30/2021”,
title: “Monday”,
dateStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
TimePlannerTitle(
date: “8/31/2021”,
title: “Tuesday”,
dateStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
TimePlannerTitle(
date: “9/01/2021”,
title: “Wednesday”,
dateStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
TimePlannerTitle(
date: “9/02/2021”,
title: “Thursday”,
dateStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
TimePlannerTitle(
date: “9/03/2021”,
title: “Friday”,
dateStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
titleStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
],
tasks: listTasks,
style: TimePlannerStyle(
showScrollBar: true
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => addEvent(context),
tooltip: ‘Add random event’,
child: Icon(Icons.add),
),
);
Add Event in Time Planner Widget
void addEvent(BuildContext context) {
List<Color> listColors = [
Colors.purple,
Colors.blue,
Colors.green,
Colors.orange,
Colors.cyan
];
setState(() {
listTasks.add(
TimePlannerTask(
color: listColors[Random().nextInt(listColors.length)],
dateTime: TimePlannerDateTime(
day: Random().nextInt(10),
hour: Random().nextInt(14) + 6,
minutes: Random().nextInt(60)),
minutesDuration: Random().nextInt(90) + 30,
daysDuration: Random().nextInt(4) + 1,
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(‘Time Planner Event is Clicked’)));
},
child: Text(
‘Demo Event’,
style: TextStyle(color: Colors.white, fontSize: 14),
),
),
);
});
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(‘Random event is added to time planner!’)));
}
Pingback: Flutter SfCalendar Tutorial Example - CodingWithDhrumil