Flutter has been a great encounter from the earliest starting point. Building ravishing UI had never been speedier. It’s not difficult to become hopelessly enamored with Flutter, whether or not you’re an amateur or a cultivated developer. All software developers understand that dates are the trickiest thing. Likewise, schedules are no special case.
In mobile apps, there are many cases where a user needs to enter a date like date of birth, book a ticket, schedule a meeting, etc.
In this blog, we will Explore Customizable Time Planner In Flutter. We will also implement a demo program and create a customizable time planner using the time_planner package in your flutter applications.
time_planner | Flutter Package
A beautiful, easy to use and customizable time planner for flutter mobile 📱, desktop 🖥 and web 🌐 This is a widget…pub.dev
Table Of Contents::
Introduction:
A delightful, simple to utilize, and customizable time planner for flutter mobile, desktop, and web. This is a widget to show assignments to clients on a schedule. Each row shows an hour and every column shows a day, yet you can change the title of the section and show whatever else you need.
Demo Module :
This demo video shows how to create a customizable time planner in a flutter. It shows how the customizable time planner will work using the time_planner package in your flutter applications. It shows when the user taps on any row and column then a random time planner will be created. animated. It will be shown on your device.
Attributes:
There are some attributes of the Time Planner are:
- > startHour: These attributes are used to time start from this, it will start from 1.
- > endHour: These attributes are used to time end at this hour, the max value is 24.
- > headers: These attributes are used to create days from here, each day is a TimePlannerTitle. You should create at least one day.
- > tasks: These attributes are used to List widgets on the time planner.
- > style: These attributes are used to Style of time planner.
- > currentTimeAnimation: These attributes are used to widget loaded scroll to the current time with animation. Default is true.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
time_planner:
Step 2: Import
import 'package:time_planner/time_planner.dart';
Step 4: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
First, we create a list of TimePlannerTask called variable tasks.
List<TimePlannerTask> tasks = [];
We will create a _addObject() method. Inside, we will add a List of colors and add setState() function.
void _addObject(BuildContext context) {
List<Color?> colors = [
Colors.purple,
Colors.blue,
Colors.green,
Colors.orange,
Colors.cyan
];
setState(() {
tasks.add(
TimePlannerTask(
color: colors[Random().nextInt(colors.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('You click on time planner object')));
},
child: Text(
'this is a demo',
style: TextStyle(color: Colors.grey[350], fontSize: 12),
),
),
);
});
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Random task added to time planner!')));
}
In the function, we will add tasks.add()method. Inside, we will add TimePlannerTask() widget. In this widget, we will add color, date time, minutesDuration and daysDuration. We will also show snackBar messages when users tap on the time planner.
In the body, we will add TimePlanner() widget. Inside, we will add startHour, endHour, and headers. In headers, we will add some TimePlannerTitle(). Also, we will add tasks and styles.
TimePlanner(
startHour: 2,
endHour: 24,
headers: [
TimePlannerTitle(
date: "7/20/2021",
title: "tuesday",
),
TimePlannerTitle(
date: "7/21/2021",
title: "wednesday",
),
TimePlannerTitle(
date: "7/22/2021",
title: "thursday",
),
TimePlannerTitle(
date: "7/23/2021",
title: "friday",
),
TimePlannerTitle(
date: "7/24/2021",
title: "saturday",
),
TimePlannerTitle(
date: "7/25/2021",
title: "sunday",
),
TimePlannerTitle(
date: "7/26/2021",
title: "monday",
),
TimePlannerTitle(
date: "7/27/2021",
title: "tuesday",
),
TimePlannerTitle(
date: "7/28/2021",
title: "wednesday",
),
TimePlannerTitle(
date: "7/29/2021",
title: "thursday",
),
TimePlannerTitle(
date: "7/30/2021",
title: "friday",
),
TimePlannerTitle(
date: "7/31/2021",
title: "Saturday",
),
],
tasks: tasks,
style: TimePlannerStyle(
showScrollBar: true
),
),
Now, we will create a FloatingActionButton(). Inside, we will add onPressed, tooltip, and child.
floatingActionButton: FloatingActionButton(
onPressed: () => _addObject(context),
tooltip: 'Add random task',
child: Icon(Icons.add),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_customizable_time_plan/splash_screen.dart';
import 'package:time_planner/time_planner.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.dark(),
home: Splash()
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<TimePlannerTask> tasks = [];
void _addObject(BuildContext context) {
List<Color?> colors = [
Colors.purple,
Colors.blue,
Colors.green,
Colors.orange,
Colors.cyan
];
setState(() {
tasks.add(
TimePlannerTask(
color: colors[Random().nextInt(colors.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('You click on time planner object')));
},
child: Text(
'this is a demo',
style: TextStyle(color: Colors.grey[350], fontSize: 12),
),
),
);
});
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Random task added to time planner!')));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text(widget.title),
centerTitle: true,
),
body: Center(
child: TimePlanner(
startHour: 2,
endHour: 24,
headers: [
TimePlannerTitle(
date: "7/20/2021",
title: "tuesday",
),
TimePlannerTitle(
date: "7/21/2021",
title: "wednesday",
),
TimePlannerTitle(
date: "7/22/2021",
title: "thursday",
),
TimePlannerTitle(
date: "7/23/2021",
title: "friday",
),
TimePlannerTitle(
date: "7/24/2021",
title: "saturday",
),
TimePlannerTitle(
date: "7/25/2021",
title: "sunday",
),
TimePlannerTitle(
date: "7/26/2021",
title: "monday",
),
TimePlannerTitle(
date: "7/27/2021",
title: "tuesday",
),
TimePlannerTitle(
date: "7/28/2021",
title: "wednesday",
),
TimePlannerTitle(
date: "7/29/2021",
title: "thursday",
),
TimePlannerTitle(
date: "7/30/2021",
title: "friday",
),
TimePlannerTitle(
date: "7/31/2021",
title: "Saturday",
),
],
tasks: tasks,
style: TimePlannerStyle(
showScrollBar: true
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => _addObject(context),
tooltip: 'Add random task',
child: Icon(Icons.add),
),
);
}
}
Conclusion:
In the article, I have explained the basic structure of the Customizable Time Planner in a flutter; you can modify this code according to your choice. This was a small introduction to Customizable Time Planner On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Customizable Time Planner in your flutter projects. We will show you what the Introduction is?, some attributes using in Time Planner, and make a demo program for working Customizable Time Planner in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
