SfHijriDateRangePicker class

A material design date range picker.

A SfHijriDateRangePicker can be used to select single date, multiple dates, and range of dates in month view alone and provided month, year and decade view options to quickly navigate to the desired date, it supports minDate,maxDate and disabled date to restrict the date selection.

Default displays the HijriDatePickerView.month view with single selection mode.

Set the view property with the desired HijriDatePickerView to navigate to different views, or tap the SfHijriDateRangePicker header to navigate to the next different view in the hierarchy.

The hierarchy of views is followed by

• HijriDatePickerView.month
• HijriDatePickerView.year
• HijriDatePickerView.decade

To change the selection mode, set the selectionMode property with the DateRangePickerSelectionMode option.

To restrict the date navigation and selection interaction use minDate, maxDate, the dates beyond this will be restricted.

When the selected dates or ranges change, the widget will call the onSelectionChanged callback with new selected dates or ranges.

When the visible view changes, the widget will call the onViewChanged callback with the current view and the current view visible dates.

Requires one of its ancestors to be a Material widget. This is typically provided by a Scaffold widget.

Requires one of its ancestors to be a MediaQuery widget. Typically, a MediaQuery widget is introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree.

Note: The picker widget allows to customize its appearance using SfDateRangePickerThemeData available from SfDateRangePickerTheme widget or the SfTheme.dateRangePickerTheme widget. It can also be customized using the properties available in DateRangePickerHeaderStyle, DateRangePickerViewHeaderStyle, HijriDatePickerMonthViewSettings, HijriDatePickerYearCellStyle, HijriDatePickerMonthCellStyle

See also:

• SfDateRangePickerThemeData, which used to set consistent look for the hijri date range picker element.
• DateRangePickerHeaderStyle, which used to customize the header view of the hijri date range picker.
• DateRangePickerViewHeaderStyle, which used to customize the view header view of the hijri date range picker.
• HijriDatePickerMonthViewSettings, which used to customize the month view of the hijri date range picker.
• HijriDatePickerYearCellStyle, which used to customize the year, decade and century views cell of the hijri date range picker.
• HijriDatePickerMonthCellStyle, which used to customize the month cells of month view in hijri date range picker.
• SfDateRangePicker, Material widget, which used to display and handle the gregorian date time values.
• Knowledge base: How to use hijri date picker

class MyApp extends StatefulWidget {
 @override
 MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       body: SfHijriDateRangePicker(
         view: HijriDatePickerView.month,
         selectionMode: DateRangePickerSelectionMode.range,
         minDate: HijriDateTime(1440, 02, 05),
         maxDate: HijriDateTime(1450, 12, 06),
         onSelectionChanged: (DateRangePickerSelectionChangedArgs args) {
           final dynamic value = args.value;
         },
         onViewChanged: (HijriDatePickerViewChangedArgs args) {
           final HijriDateRange visibleDates = args.visibleDateRange;
           final HijriDatePickerView view = args.view;
         },
       ),
     ),
   );
 }
}

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatelessWidget
• SfHijriDateRangePicker

Annotations

• @immutable

Constructors

SfHijriDateRangePicker({Key? key, HijriDatePickerView view = HijriDatePickerView.month, DateRangePickerSelectionMode selectionMode = DateRangePickerSelectionMode.single, double headerHeight = 40, Color? todayHighlightColor, Color? backgroundColor, HijriDateTime? initialSelectedDate, List<HijriDateTime>? initialSelectedDates, HijriDateRange? initialSelectedRange, List<HijriDateRange>? initialSelectedRanges, bool toggleDaySelection = false, bool enablePastDates = true, bool showNavigationArrow = false, String confirmText = 'OK', String cancelText = 'CANCEL', bool showActionButtons = false, DateRangePickerSelectionShape selectionShape = DateRangePickerSelectionShape.circle, DateRangePickerNavigationDirection navigationDirection = DateRangePickerNavigationDirection.horizontal, DateRangePickerNavigationMode navigationMode = DateRangePickerNavigationMode.snap, bool allowViewNavigation = true, bool enableMultiView = false, HijriDatePickerController? controller, HijriDatePickerViewChangedCallback? onViewChanged, DateRangePickerSelectionChangedCallback? onSelectionChanged, VoidCallback? onCancel, dynamic onSubmit(Object?)?, DateRangePickerHeaderStyle headerStyle = const DateRangePickerHeaderStyle(), HijriDatePickerYearCellStyle yearCellStyle = const HijriDatePickerYearCellStyle(), HijriDatePickerMonthViewSettings monthViewSettings = const HijriDatePickerMonthViewSettings(), HijriDateTime? initialDisplayDate, HijriDateTime? minDate, HijriDateTime? maxDate, HijriDatePickerMonthCellStyle monthCellStyle = const HijriDatePickerMonthCellStyle(), double viewSpacing = 20, double selectionRadius = -1, Color? selectionColor, Color? startRangeSelectionColor, Color? endRangeSelectionColor, Color? rangeSelectionColor, TextStyle? selectionTextStyle, TextStyle? rangeTextStyle, String? monthFormat, HijriDateRangePickerCellBuilder? cellBuilder, bool showTodayButton = false, HijriDatePickerSelectableDayPredicate? selectableDayPredicate, ExtendableRangeSelectionDirection extendableRangeSelectionDirection = ExtendableRangeSelectionDirection.both})

Creates a material design date range picker.

Properties

allowViewNavigation → bool

Used to enable or disable the view switching between HijriDatePickerView through interaction in the SfHijriDateRangePicker header.

final

backgroundColor → Color?

The color to fill the background of the SfHijriDateRangePicker.

final

cancelText → String

Text that displays on the cancel button.

final

cellBuilder → HijriDateRangePickerCellBuilder?

A builder that builds a widget that replaces the cell in a month, year, and decade views. The month cell, year cell, decade cell, was differentiated by picker view.

final

confirmText → String

Text that displays on the confirm button.

final

controller → HijriDatePickerController?

An object that used for programmatic date navigation, date and range selection and view switching in SfHijriDateRangePicker.

final

enableMultiView → bool

Used to enable or disable showing multiple views

final

enablePastDates → bool

Allows to disable the dates falls before the today date in SfHijriDateRangePicker.

final

endRangeSelectionColor → Color?

The color which fills the SfHijriDateRangePicker selection view of the range end date.

final

extendableRangeSelectionDirection → ExtendableRangeSelectionDirection

Allows to customize the extendable range selection direction.

final

hashCode → int

The hash code for this object.

no setter, inherited

headerHeight → double

The height for header view to layout within this in SfHijriDateRangePicker.

final

headerStyle → DateRangePickerHeaderStyle

Sets the style for customizing the SfHijriDateRangePicker header view.

final

initialDisplayDate → HijriDateTime

The initial date to show on the SfHijriDateRangePicker

final

initialSelectedDate → HijriDateTime?

The date to initially select on the SfHijriDateRangePicker.

final

initialSelectedDates → List<HijriDateTime>?

The collection of dates to initially select on the SfHijriDateRangePicker.

final

initialSelectedRange → HijriDateRange?

The date range to initially select on the SfHijriDateRangePicker.

final

initialSelectedRanges → List<HijriDateRange>?

The date ranges to initially select on the SfHijriDateRangePicker.

final

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

maxDate → HijriDateTime

The maximum date as much as the SfHijriDateRangePicker will navigate.

final

minDate → HijriDateTime

The minimum date as much as the SfHijriDateRangePicker will navigate.

final

monthCellStyle → HijriDatePickerMonthCellStyle

Options to customize the month cells of the SfHijriDateRangePicker.

final

monthFormat → String?

Allows to change the month text format in SfHijriDateRangePicker.

final

monthViewSettings → HijriDatePickerMonthViewSettings

Options to customize the month view of the SfHijriDateRangePicker.

final

navigationDirection → DateRangePickerNavigationDirection

The direction that SfHijriDateRangePicker is navigating in.

final

navigationMode → DateRangePickerNavigationMode

Defines the view navigation mode based on its navigationDirection for SfHijriDateRangePicker.

final

onCancel → VoidCallback?

Called whenever the cancel button tapped on date range picker. It reset the selected values to confirmed selected values.

final

onSelectionChanged → DateRangePickerSelectionChangedCallback?

Called when the new dates or date ranges selected.

final

onSubmit → dynamic Function(Object?)?

Called whenever the confirm button tapped on date range picker. The dates or ranges that have been selected are confirmed and the selected value is available in the value argument.

final

onViewChanged → HijriDatePickerViewChangedCallback?

Called when the current visible view or visible date range changes.

final

rangeSelectionColor → Color?

The color which fills the SfHijriDateRangePicker selection view for the range of dates which falls between the HijriDateRange.startDate and HijriDateRange.endDate.

final

rangeTextStyle → TextStyle?

The text style for the text in the selected range or ranges cell of SfHijriDateRangePicker month view.

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

selectableDayPredicate → HijriDatePickerSelectableDayPredicate?

An selectableDayPredicate callback to decide whether the cell is selectable or not in hijri date range picker.

final

selectionColor → Color?

The color which fills the SfHijriDateRangePicker selection view.

final

selectionMode → DateRangePickerSelectionMode

Defines the selection mode for SfHijriDateRangePicker.

final

selectionRadius → double

The radius for the SfHijriDateRangePicker selection circle.

final

selectionShape → DateRangePickerSelectionShape

Defines the shape for the selection view in SfHijriDateRangePicker.

final

selectionTextStyle → TextStyle?

The text style for the text in the selected date or dates cell of SfHijriDateRangePicker.

final

showActionButtons → bool

Displays confirm and cancel buttons on the date range picker to perform the confirm and cancel actions.

final

showNavigationArrow → bool

Displays the navigation arrows on the header view of SfHijriDateRangePicker.

final

showTodayButton → bool

Displays the today button on the bottom of the SfHijriDateRangePicker.

final

startRangeSelectionColor → Color?

The color which fills the SfHijriDateRangePicker selection view of the range start date.

final

todayHighlightColor → Color?

Color that highlights the today date cell in SfHijriDateRangePicker.

final

toggleDaySelection → bool

Allows to deselect a date when the DateRangePickerSelectionMode set as DateRangePickerSelectionMode.single.

final

view → HijriDatePickerView

Defines the view for the SfHijriDateRangePicker.

final

viewSpacing → double

Used to define the spacedouble between multiple views when the enableMultiView is enabled. Otherwise, the viewSpacing value as not applied in SfHijriDateRangePicker.

final

yearCellStyle → HijriDatePickerYearCellStyle

Options to customize the year and decade view of the SfHijriDateRangePicker.

final

Methods

build(BuildContext context) → Widget

Describes the part of the user interface represented by this widget.

override

createElement() → StatelessElement

Creates a StatelessElement to manage this widget's location in the tree.

inherited

debugDescribeChildren() → List<DiagnosticsNode>

Returns a list of DiagnosticsNode objects describing this node's children.

inherited

debugFillProperties(DiagnosticPropertiesBuilder properties) → void

Add additional properties associated with the node.

override

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode

Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.

inherited

toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String

A string representation of this object.

inherited

toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String

Returns a string representation of this node and its descendants.

inherited

toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String

Returns a one-line detailed description of the object.

inherited

toStringShort() → String

A short, textual description of this widget.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

inherited