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

1. 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

example of day parts

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;
                  });
                },
              ),

grid in locale ‘en’

grid in locale ‘ar’

• 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;
                  });
                },
              ),

grid in locale ‘en’

grid in locale ‘ar’

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.

demo

time_slot | Flutter Package

time_slot/example at main · MohamedAbd0/time_slot

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.