Merge pull request #1295 from syncfusion-content/FLUT-965289-UG-datepicker-hotfix

FLUT-965289 - [Feature] Updated ug pages for Date Range Picker widget in hotfix branch.

Author: VijayakumarMariappan

Flutter/DateRangePicker/Callbacks.md

@@ -8,27 +8,29 @@ documentation: ug
 ---
 
 # Callbacks in Flutter Date Range Picker (SfDateRangePicker)
-Calendar supports the `ViewChangedCallback` and `SelectionChangedCallback` to interact with the Flutter date range picker.
+
+Calendar supports the [ViewChangedCallback](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewChangedCallback.html) and [SelectionChangedCallback](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionChangedCallback.html) to interact with the Flutter date range picker.
 
 ## View changed callback
+
 The [onViewChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onViewChanged.html) callback triggers when the current view swiped to previous or next view, picker view switched to another picker view.
 
-* `visibleDateRange` - returns the start and end dates of the current visible month.
+* [visibleDateRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewChangedArgs/visibleDateRange.html) - returns the start and end dates of the current visible month.
 
 {% tabs %}
 {% highlight dart hl_lines="6 7 8" %}
 
-@override
-Widget build(BuildContext context) {
-  return Scaffold(
-    body: SfDateRangePicker(
-      view: DateRangePickerView.month,
-      onViewChanged: (DateRangePickerViewChangedArgs args) {
-        var visibleDates = args.visibleDateRange;
-      },
-    ),
-  );
-}
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: SfDateRangePicker(
+        view: DateRangePickerView.month,
+        onViewChanged: (DateRangePickerViewChangedArgs args) {
+          var visibleDates = args.visibleDateRange;
+        },
+      ),
+    );
+  }
 
 {% endhighlight %}
 {% endtabs %}
@@ -37,34 +39,35 @@ Widget build(BuildContext context) {
 * Use [HijriDatePickerViewChangedArgs](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerViewChangedArgs-class.html) for the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html).
 
 ## Selection changed callback
+
 The [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSelectionChanged.html) callback triggers when selecting the dates from the date picker.
 
 * `args.value` - returns the dates based on the selection mode.
 
 {% tabs %}
 {% highlight dart hl_lines="7 8 9 10 11 12 13 14 15 16 17 18" %}
 
-@override
-Widget build(BuildContext context) {
-  return Scaffold(
-    body: SfDateRangePicker(
-      view: DateRangePickerView.month,
-      selectionMode: DateRangePickerSelectionMode.range,
-      onSelectionChanged: (DateRangePickerSelectionChangedArgs args) {
-        if (args.value is PickerDateRange) {
-          final DateTime rangeStartDate = args.value.startDate;
-          final DateTime rangeEndDate = args.value.endDate;
-        } else if (args.value is DateTime) {
-          final DateTime selectedDate = args.value;
-        } else if (args.value is List<DateTime>) {
-          final List<DateTime> selectedDates = args.value;
-        } else {
-          final List<PickerDateRange> selectedRanges = args.value;
-        }
-      },
-    ),
-  );
-}
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: SfDateRangePicker(
+        view: DateRangePickerView.month,
+        selectionMode: DateRangePickerSelectionMode.range,
+        onSelectionChanged: (DateRangePickerSelectionChangedArgs args) {
+          if (args.value is PickerDateRange) {
+            final DateTime rangeStartDate = args.value.startDate;
+            final DateTime rangeEndDate = args.value.endDate;
+          } else if (args.value is DateTime) {
+            final DateTime selectedDate = args.value;
+          } else if (args.value is List<DateTime>) {
+            final List<DateTime> selectedDates = args.value;
+          } else {
+            final List<PickerDateRange> selectedRanges = args.value;
+          }
+        },
+      ),
+    );
+  }
 
 {% endhighlight %}
 {% endtabs %}

Flutter/DateRangePicker/accessibility.md

@@ -10,7 +10,7 @@ documentation: ug
 # Accessibility in Flutter DateRangePicker (SfDateRangePicker)
 
 ## Screen reader support
-The `SfDateRangePicker` can easily be accessed by screen readers. Please find the following table to get spoken feedback about the inner element contents of the screen.
+The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) can easily be accessed by screen readers. Please find the following table to get spoken feedback about the inner element contents of the screen.
 
 ### Month view
 
@@ -56,7 +56,7 @@ The `SfDateRangePicker` can easily be accessed by screen readers. Please find th
 
 ## Sufficient contrast
 
-The `SfDateRangePicker` [theming](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all the UI elements.
+The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) [theming](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all the UI elements.
 
 The following APIs allows you to customize the colors of the following elements.
 * [viewHeaderStyle](https://help.syncfusion.com/flutter/daterangepicker/headers#view-header) 
@@ -75,7 +75,7 @@ The following APIs allows you to customize the colors of the following elements.
 
 ## Large fonts
 
-The `SfDateRangePicker` font size can be adjusted automatically based on device settings and the font size scaled based on the `MediaQueryData.textScaleFactor`. It also allows you to change the font size of all elements in date range picker.
+The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [MediaQueryData.textScaleFactor](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaleFactor.html). It also allows you to change the font size of all elements in date range picker.
 * [todayTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
 * [leadingDatesTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
 * [trailingDatesTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
@@ -89,7 +89,7 @@ The `SfDateRangePicker` font size can be adjusted automatically based on device
 
 ## Keyboard navigation
 
-The following keyboard interactions are supported by the `SfDateRangePicker`.
+The following keyboard interactions are supported by the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).
 
 | Key                   | Description                     									  					                         |
 |-----------------------|----------------------------------------------------------------------------------------------------------------|

Flutter/DateRangePicker/builders.md

@@ -7,9 +7,11 @@ control: SfDateRangePicker
 documentation: ug
 ---
 # Builders in Flutter Date Range Picker (SfDateRangePicker)
+
 The date range picker allows you to create a responsive UI with the conditions based on a widget’s details, and to design and create your custom view to the month cells and year cells in the date range picker.
 
 ## Cell builder
+
 The [DateRangePickerCellBuilder](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerCellBuilder.html) allows you to design your custom view and assign the view to the month and year view cells of the date range picker by returning an appropriate widget in the [cellBuilder](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/cellBuilder.html) of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).
 
 [DateRangePickerCellDetails](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerCellDetails-class.html): Returns the details of the cell.
@@ -29,63 +31,56 @@ class MyAppState extends State<MyApp> {
     return MaterialApp(
       debugShowCheckedModeBanner: false,
       home: Scaffold(
-          body: SafeArea(
-        child: SfDateRangePicker(
-          controller: _controller,
-          cellBuilder:
-              (BuildContext context, DateRangePickerCellDetails details) {
-            final bool isToday = isSameDate(details.date, DateTime.now());
-            final bool isBlackOut = isBlackedDate(details.date);
-            final bool isSpecialDate = isSpecialDay(details.date);
-            return Container(
-              margin: EdgeInsets.all(2),
-              padding: EdgeInsets.only(top: 10),
-              decoration: BoxDecoration(
+        body: SafeArea(
+          child: SfDateRangePicker(
+            controller: _controller,
+            cellBuilder: (
+              BuildContext context,
+              DateRangePickerCellDetails details,
+            ) {
+              final bool isToday = isSameDate(details.date, DateTime.now());
+              final bool isBlackOut = isBlackedDate(details.date);
+              final bool isSpecialDate = isSpecialDay(details.date);
+              return Container(
+                margin: EdgeInsets.all(2),
+                padding: EdgeInsets.only(top: 10),
+                decoration: BoxDecoration(
                   color: Colors.blueAccent,
-                  border: isToday
-                      ? Border.all(color: Colors.black, width: 2)
-                      : null),
-              child: Column(
-                mainAxisSize: MainAxisSize.max,
-                mainAxisAlignment: MainAxisAlignment.spaceAround,
-                children: <Widget>[
-                  Text(
-                    details.date.day.toString(),
-                    style: TextStyle(
-                      fontSize: 13,
-                      fontWeight: FontWeight.bold,
+                  border:
+                      isToday
+                          ? Border.all(color: Colors.black, width: 2)
+                          : null,
+                ),
+                child: Column(
+                  mainAxisSize: MainAxisSize.max,
+                  mainAxisAlignment: MainAxisAlignment.spaceAround,
+                  children: <Widget>[
+                    Text(
+                      details.date.day.toString(),
+                      style: TextStyle(
+                        fontSize: 13,
+                        fontWeight: FontWeight.bold,
+                      ),
                     ),
-                  ),
-                  isBlackOut
-                      ? Icon(
-                          Icons.block_sharp,
-                          size: 13,
+                    isBlackOut
+                        ? Icon(Icons.block_sharp, size: 13)
+                        : isSpecialDate
+                        ? Row(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          children: [
+                            Icon(Icons.cake, size: 13),
+                            Icon(Icons.celebration, size: 13),
+                            Icon(Icons.audiotrack, size: 13),
+                          ],
                         )
-                      : isSpecialDate
-                          ? Row(
-                              mainAxisAlignment: MainAxisAlignment.center,
-                              children: [
-                                Icon(
-                                  Icons.cake,
-                                  size: 13,
-                                ),
-                                Icon(
-                                  Icons.celebration,
-                                  size: 13,
-                                ),
-                                Icon(
-                                  Icons.audiotrack,
-                                  size: 13,
-                                )
-                              ],
-                            )
-                          : Container()
-                ],
-              ),
-            );
-          },
+                        : Container(),
+                  ],
+                ),
+              );
+            },
+          ),
         ),
-      )),
+      ),
     );
   }
 
@@ -114,18 +109,17 @@ class MyAppState extends State<MyApp> {
   }
 }
 
-
 {% endhighlight %}
 {% endtabs %}
 
 ![Cell builder](images/builders/cell-builder.jpg)
 
 >**NOTE** 
-* Use [HijriDateRangePickerCellDetails]() for the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html).
+* Use [HijriDateRangePickerCellDetails](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDateRangePickerCellDetails-class.html) for the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html).
 
 
 ## See also
 
 * [How to customize the date range picker cells using builder in the Flutter (SfDateRangePicker)](https://support.syncfusion.com/kb/article/10711/how-to-customize-the-date-range-picker-cells-using-builder-in-the-flutter-sfdaterangepicker)
 * [How to create timeline Date Picker in Flutter](https://support.syncfusion.com/kb/article/10992/how-to-create-timeline-date-picker-in-flutter)
-* [How to customize the special dates using builder in the Flutter Date Range Picker](https://support.syncfusion.com/kb/article/10750/how-to-customize-the-special-dates-using-builder-in-the-flutter-date-range-picker)
+* [How to customize the special dates using builder in the Flutter Date Range Picker](https://support.syncfusion.com/kb/article/10750/how-to-customize-the-special-dates-using-builder-in-the-flutter-date-range-picker)