UsingTime slots in the flutter app
Time Slot is a Flutter package that provides a set of classes and functions for generating time slots with a given time interval or list of date times, and getting the day part name of the time. The package is designed to be highly customizable and supports localization in both Arabic and English.
To generate time slots, the package provides a function that takes a start and end time, a time interval or list of date times, and returns a list of time slots. The time slots are represented as a list of “DateTime” objects and can be customized using a variety of parameters such as the time zone, the format of the time slots, and more.
To get the day part name of the time, the package provides a function that takes a “DateTime” object and returns the day part name (such as “morning”, “afternoon”, “evening”, or “night”) based on the time. The package also supports localization in Arabic and English and provides localized messages for the day part names in both languages.
Features
- Creating time slots with given time interval
- Creating time slots with given list date times
- Get the day part name of the time
Installation
- Add this to your package’s
pubspec.yaml
file:
dependencies:
time_slot: any
2. Get the package using your IDE’s GUI or via the command line with
$ pub get
3. Import the time_slot.dart
file in your app
import 'package:time_slot/time_slot.dart';
Usage
DayPartController
DayPartController dayPartController = DayPartController();
to get day part of the time
DayParts dayPart = dayPartController.getDayPartOfTime(
time: DateTime(2023, 1, 1, 10, 30),
); /// DayParts.morning
to get the day part name from DayParts
DayParts dayPart = dayPartController.getDayPartName(dayPart: dayPart),);
/// morning
The list of day parts is flexible, you can pass your custom list
bypassing listDayParts in the constructor of DayPartController such as :
DayPartController dayPartController = DayPartController(listDayParts : [
DayPartInfo(dayPart: DayParts.morning, start: 5, end: 12),
DayPartInfo(dayPart: DayParts.afternoon, start: 12, end: 18),
]);
The default day parts are :
[
DayPartInfo(dayPart: DayParts.morning, start: 5, end: 12),
DayPartInfo(dayPart: DayParts.afternoon, start: 12, end: 18),
DayPartInfo(dayPart: DayParts.evening, start: 18, end: 22),
DayPartInfo(dayPart: DayParts.night, start: 22, end: 5),
],
Times Slot GridView
In this class you can draw a grid view of a slot time list, this list can be a list of datetime or interval between two dates, with localization[‘ar’,’en’].
- TimesSlotGridViewFromInterval
to build a time slot grid view from intervals (10:00 AM to 10:00 PM) every hour,
we will use TimesSlotGridViewFromInterval widget and pass their parameters
locale : is localization value ['ar','en'] the default is 'en'.
initTime : initial selected time value.
crossAxisCount : number of columns in grid, the default is 3.
timeSlotInterval : the TimeSlotInterval have start, end and interval.
onChange : return selected datetime.
icon : icon widget in card of timeslot.
selectedColor : color of selected card of timeslot.
unSelectedColor : color of unselected card of timeslot.
TimesSlotGridViewFromInterval(
locale: "en",
initTime: selectTime,
crossAxisCount: 4,
timeSlotInterval: const TimeSlotInterval(
start: TimeOfDay(hour: 10, minute: 00),
end: TimeOfDay(hour: 22, minute: 0),
interval: Duration(hours: 1, minutes: 0),
),
onChange: (value) {
setState(() {
selectTime = value;
});
},
),
- TimesSlotGridViewFromList
to build a time slot grid view from the list date,
we will use TimesSlotGridViewFromList widget and pass there parameters :
locale : is localization value ['ar','en'] the default is 'en'.
initTime : initial selected time value.
crossAxisCount : number of columns in grid, the default is 3.
listDates : list of datetime.
onChange : return selected datetime.
icon : icon widget in card of timeslot.
selectedColor : color of selected card of timeslot.
unSelectedColor : color of unselected card of timeslot.
TimesSlotGridViewFromList(
locale: "en",
initTime: selectTime,
crossAxisCount: 4,
listDates: [
DateTime(2023, 1, 1, 10, 30),
DateTime(2023, 1, 1, 11, 30),
DateTime(2023, 1, 1, 12, 30),
DateTime(2023, 1, 1, 13, 30),
DateTime(2023, 1, 1, 14, 30),
DateTime(2023, 1, 1, 15, 30)
],
onChange: (value) {
setState(() {
selectTime = value;
});
},
),
Overall, the “time_slot” package is a useful tool for developers who need to generate time slots with a given time interval or list of date times and get the day part name of the time with support for localization in Arabic and English.
I hope you all liked this blog and it helped you get started with Flutter! Don’t forget to smash that clap button and leave a comment down below.
Meet you at the next one.