Moved file from gitlab to github for latest file

.gitlab/merge_request_templates/Bug.md

@@ -0,0 +1,73 @@
+### Bug Description ###
+
+Clearly and concisely describe the problem or feature (this cannot be empty).
+
+### Root Cause ###
+
+Briefly describe the root cause and analysis of the problem.
+If there is an internal discussion on the forum, provide the link.
+
+### Reason for not identifying earlier ###
+
+Find how it was missed in our earlier testing and development by analysing the below checklist. This will help prevent similar mistakes in the future. 
+
+**Guidelines/documents are not followed**
+
+Common guidelines / Core team guideline
+Specification document
+Requirement document
+
+**Guidelines/documents are not given**
+
+Common guidelines / Core team guideline
+Specification document
+Requirement document
+
+**Reason:**
+Mention any one or more reasons from the above points.
+
+**Action taken:**
+What action did you take to avoid this in future?
+
+**Related areas:**
+Is there any other related areas also to be addressed?
+               
+### Is Breaking issue? ###
+
+If it is a breaking issue, provide the commit detail which caused this break.
+
+### Solution description ###
+
+Describe your code changes in detail for reviewers.
+
+### Output screenshots ###
+
+Post the output screenshots if an UI is affected or added due to this bug.
+
+**Before changes:**
+Add the image which was taken before making these changes. Place a cursor here and click "Attach a file" button and upload the image.
+
+**After changes:**
+Add the image which was taken after making these changes. Place a cursor here and click "Attach a file" button and upload the image.
+
+### Areas affected and ensured ###
+
+List out the areas are affected by your code changes. 
+Is there any existing behavior change of other features due to this code change?
+
+### Does it have any known issues?
+
+If this fix contains any known issues, provide the proper details about the issues.
+
+### Does it have memory leak?
+
+Ensure the fix contains memory leak or not (if applicable).
+
+### MR CheckList ###
+
+- [ ] Does it follow the design [guidelines](https://docs.microsoft.com/en-us/dotnet/standard/design-guidelines/)? It is mandatory that, we should not move the changes without reading this.
+- [ ] Did UI automation passed without errors? If it is customer issue, make sure it is included in the IR automation.
+- [ ] Properly working in Xamarin.Forms [previewer](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-previewer?tabs=vswin).
+- [ ] Ensured in iOS, Android, UWP and macOS (if supported).
+- [ ] Have you ensured the changes in Android API 19 and iOS 9?
+- [ ] Did you record this case in the unit test or UI test?

.gitlab/merge_request_templates/Feature.md

@@ -0,0 +1,70 @@
+### Feature description ###
+
+Clearly and concisely describe the problem or feature (this cannot be empty).
+
+### Analysis and design ###
+
+If there is an external design, link to its project documentation area.
+If there is an internal discussion on the forum, provide the link.
+
+### Solution description ###
+
+Describe your code changes in detail for reviewers.
+
+### Output screenshots ###
+
+Post the output screenshots if an UI is affected or added due to this feature.
+
+### Areas affected and ensured ###
+
+List the areas are affected by your code changes.
+
+### API Changes ###
+
+List all API changes here (or just put None), example:
+
+Added:
+ - string ListView.GroupName { get; set; } //Bindable Property
+ - int ListView.GroupId { get; set; } // Bindable Property
+ - void ListView.Clear ();
+
+Changed:
+ - object ListView.SelectedItem => Cell ListView.SelectedItem
+
+### Behavioral Changes ###
+
+Describe any non-bug related behavioral changes that may change how users app behaves when upgrading to this version of the codebase.
+
+### Test cases ###
+
+Provide the unit testing written file details to understand the use cases considered in this implementation.
+If there is no TDD (if it’s not possible to follow), provide the UI automation script location and the Excel file that contains the use cases considered in this implementation.
+Provide the test cases Excel file alone if the feature cannot be automated in any case.
+
+List out all the scenarios you have tested after include these changes. You can refer the predefined scenarios from below link.
+
+https://syncfusion.atlassian.net/wiki/display/CHARTXAMARIN/Chart+Test+Plan
+
+### Testbed sample location ###
+
+Provide the test bed sample location where code reviewers can review the new feature’s behaviors. This depends on the CI process that your team follows. It can be from NPMCI, HockeyApp, staging site, local server, etc.
+
+### Does it have any known issues?
+
+If this feature contains any known issues, provide the proper details about the issues.
+
+### Does it have memory leak?
+
+Ensure the feature contains memory leak or not (if applicable).
+
+### MR CheckList ###
+
+- [ ] Does it follow the design [guidelines](https://docs.microsoft.com/en-us/dotnet/standard/design-guidelines/)? It is mandatory that, we should not move the changes without reading this.
+- [ ] Did UI automation passed without errors? If it is customer issue, make sure it is included in the IR automation.
+- [ ] Properly working in Xamarin.Forms [previewer](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-previewer?tabs=vswin).
+- [ ] Ensured in iOS, Android, UWP and macOS (if supported).
+- [ ] Have you added API comments if it is new API?
+- [ ] Does it need localization? If so, update resx file in [GitHub](https://github.com/syncfusion/xamarin-localized-texts).
+- [ ] Whether we have added new APIs? If so, whether it is as per the [guidelines](https://docs.microsoft.com/en-us/dotnet/standard/design-guidelines/)?
+- [ ] If changes are made in the Xamarin.Forms sample browser project file, whether it is included in the props file too? If not, your sample level changes will not reflect in the application published in the hockey app.
+- [ ] Have you ensured the changes in Android API 19 and iOS 9?

Flutter/DateRangePicker/Callbacks.md

@@ -0,0 +1,67 @@
+---
+layout: post
+title: Callbacks in Flutter Date Range Picker | Date Picker | Syncfusion
+description: This session describes the Date Range Picker callbacks in the SfDateRangePicker widget in the Flutter.
+platform: Flutter
+control: SfDateRangePicker
+documentation: ug
+---
+
+## Callbacks in Flutter date range picker
+Calendar supports the `ViewChangedCallback` and `SelectionChangedCallback` 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.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfDateRangePicker(
+      view: DateRangePickerView.month,
+      onViewChanged: (DateRangePickerViewChangedArgs args) {
+        var visibleDates = args.visibleDateRange;
+      },
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### 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 %}
+
+@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

@@ -0,0 +1,53 @@
+---
+layout: post
+title:  Accessibility of Syncfusion Flutter Date Range Picker | Date Picker
+description: Learn about the accessibility support in Syncfusion Flutter SfDateRangePicker widget in Flutter | DatePicker
+platform: flutter
+control: SfDateRangePicker
+documentation: ug
+---
+
+# Accessibility with Flutter DateRangePicker (SfDateRangePicker)
+
+The `SfDateRangePicker` can easily be accessed by screen readers. Please find the following table  for inner elements.
+
+## Month view
+
+| View                                                              | Format                           | Example                                  |
+|-------------------------------------------------------------------|----------------------------------|------------------------------------------|
+| Month cell                                                        | EEE, dd/MMMM/yyyy                | Thursday the 2nd of January 2020         |
+| Month header                                                      | MMMM yyyy                        | January 2020                             |
+| View header                                                       | EEE                              | Monday                                   |
+| Disabled cells (Enable dates in past, dates exceed min/max dates) | EEE, dd/MMMM/yyyy, Disabled date | Friday, 31st January 2020, Disabled date |
+| Blackout date                                                     | EEE, dd/MMMM/yyyy, blackout date | 6th February 2020, Blackout date         |
+
+## Year view
+
+| View                                                             | Format                   | Example                      |
+|------------------------------------------------------------------|--------------------------|------------------------------|
+| Year cell                                                        | MMMM yyyy                | January 2020                 |
+| Header                                                           | yyyy                     | 2020                         |
+| Disabled cell (Enable dates in past, dates exceeds min/max date) | MMMM yyyy, Disabled cell | December 2019, Disabled cell |
+
+## Decade view
+
+| View                                                             | Format              | Example            |
+|------------------------------------------------------------------|---------------------|--------------------|
+| Header                                                           | yyyy - yyyy         | 2020 to 2029       |
+| Decade cell                                                      | yyyy                | 2020               |
+| Disabled cell (Enable dates in past, dates exceeds min/max date) | yyyy, Disabled cell | 2019 Disabled cell |
+
+## Century view
+
+| View                                                             | Format      | Example                     |
+|------------------------------------------------------------------|-------------|-----------------------------|
+| Header                                                           | yyyy - yyyy | 2020 to 2029                |
+| Century cell                                                     | yyyy - yyyy | 2020 to 2029                |
+| Disabled cell (Enable dates in past, dates exceeds min/max date) | yyyy - yyyy | 2010 to 2019, Disabled cell |
+
+## Navigation arrows
+
+| View                      | Format | Example         |
+|---------------------------|--------|-----------------|
+| Forward navigation arrow  | >      | Forward button  |
+| Backward navigation arrow | <      | Backward button |

Flutter/DateRangePicker/customizations.md

@@ -0,0 +1,177 @@
+---
+layout: post
+title: Customizations Syncfusion Flutter Date Range Picker | Date Picker
+description: Describe how to customize the Syncfusion SfDateRangePicker widget in Flutter | Date Picker | Customization
+platform: Flutter
+control: SfDateRangePicker
+documentation: ug
+---
+
+# Customizations in Flutter DateRangePicker (SfDateRangePicker)
+
+## Month cell customization
+You can customize the calendar month view by using the `monthCellStyle` of `SfDateRangePicker`.
+
+•    **Current month dates** – You can customize the current month date's text style and background of the `DateRangePicker` by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/textStyle.html) and [cellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/cellDecoration.html) properties of [DateRangePickerMonthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle-class.html)
+
+•    **Today date** – You can customize the today date text style and background of the `DateRangePicker` by using the [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayTextStyle.html) and [todayCellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayCellDecoration.html).
+
+•    **Leading dates** – You can hide the leading dates by using the [showTrailingAndLeadingDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/showTrailingAndLeadingDates.html) property in the [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html) class. You can also customize the leading month dates text style and background of the `DateRangePicker` by using the [leadingDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesTextStyle.html) and [leadingDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesDecoration.html).
+
+•    **Trailing dates** - You can hide the trailing dates by using `showTrailingAndLeadingDates` dates property in `DateRangePickerMonthViewSettings` class. You can also customize the trailing month dates text style and background of the `DateRangePicker` by using the [trailingDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/trailingDatesTextStyle.html) and  [trailingDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/trailingDatesDecoration.html).
+
+•    **Blackout Dates** - You can customize the blackout dates text style and background of the `DateRangePicker` by using the [blackoutDateTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/blackoutDateTextStyle.html) and [blackoutDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/blackoutDatesDecoration.html).
+
+•    **Disabled dates** – Disable dates text style and background beyond of the `minDate` and `maxDate` in `DateRangePicker` by using [disableDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesTextStyle.html) and  [disableDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesDecoration.html).
+
+•    **Special Dates** – You can add special dates to the `DateRangePicker` by using [specialDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/specialDates.html) property, and you can also customize the special dates text style and background by using the [specialDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/specialDatesTextStyle.html) and [specialDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/specialDatesDecoration.html).
+
+•    **Weekend Dates** – You can change weekend dates to `DateRangePicker` by using the [weekendDays](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/weekendDays.html) property, and you can also customize the weekend dates text style and background by using the [weekendDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/weekendTextStyle.html) and [weekendDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/weekendDatesDecoration.html).
+
+
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+   return Scaffold(
+       body: SfDateRangePicker(
+       view: DateRangePickerView.month,
+       monthViewSettings:DateRangePickerMonthViewSettings(blackoutDates:List<DateTime>()
+           ..add(DateTime(2020, 03, 26)),
+      weekendDays: List<int>()
+           ..add(7)..add(6),
+      specialDates:List<DateTime>()
+           ..add(DateTime(2020, 03, 20))..add(DateTime(2020, 03, 16))..add(DateTime(2020,03,17)),showTrailingAndLeadingDates: true),
+      monthCellStyle: DateRangePickerMonthCellStyle(
+         blackoutDatesDecoration: BoxDecoration(
+               color: Colors.red,
+               border: Border.all(color: const Color(0xFFF44436), width: 1),
+               shape: BoxShape.circle),
+        weekendDatesDecoration: BoxDecoration(
+              color: const Color(0xFFDFDFDF),
+              border: Border.all(color: const Color(0xFFB6B6B6), width: 1),
+              shape: BoxShape.circle),
+       specialDatesDecoration: BoxDecoration(
+              color: Colors.green,
+              border: Border.all(color: const Color(0xFF2B732F), width: 1),
+              shape: BoxShape.circle),
+       blackoutDateTextStyle: TextStyle(color: Colors.white, decoration: TextDecoration.lineThrough),
+      specialDatesTextStyle: const TextStyle(color: Colors.white),
+      ),
+    )
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Customizations Date Range Picker](images/customizations/customizations.png)
+
+## Month format
+You can customize the month format of the `DateRangePicker` using the [monthFormat](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/monthFormat.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfDateRangePicker(
+      view: DateRangePickerView.month,
+      monthFormat: 'MMM',
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Month cell customization Date Range Picker](images/customizations/monthcell_customization.png)
+
+## Selection cell customization
+
+You can also customize the date range picker section by using the `monthCellStyle` of `SfDateRangePicker`.
+
+•    **Selection date text style** – Selected date text style can be customized using the [selectionTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionTextStyle.html) property of `SfDateRangePicker` that is applicable for `selectionMode` is `single` and `multiple`, it is also applicable to start and end of the selected range text style in the `single` and `multi-range` selection.
+
+•    **Selection color** – Selected date background color can be customized using the [selectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionColor.html) property of `SfDateRangePicker` that is applicable for `single` and `multiple` selections.
+
+•    **Range selection text style** – Range selection date text style can be customized using the [rangeTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/rangeTextStyle.html) property that is applicable when `selectionMode` is `range` or `multi-range`.
+
+•    **Range selection color** - Range selection color text style can be customized using the [startRangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/startRangeSelectionColor.html), [endRangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/endRangeSelectionColor.html) , [rangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/rangeSelectionColor.html)  properties that is applicable when `selectionMode` is in `range` or `multi-range`.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        body: SfDateRangePicker(
+      view: DateRangePickerView.month,
+      selectionMode: DateRangePickerSelectionMode.range,
+      selectionTextStyle: const TextStyle(color: Colors.white),
+      selectionColor: Colors.blue,
+      startRangeSelectionColor: Colors.purple,
+      endRangeSelectionColor: Colors.purple,
+      rangeSelectionColor: Colors.purpleAccent,
+      rangeTextStyle: const TextStyle(color: Colors.white, fontSize: 20),
+    ));
+  }
+
+{% endhighlight %}
+{% endtabs %}
+
+![Month Selection cell customization Date Range Picker](images/customizations/monthcell_selection_customization.png)
+
+## Year cell customization
+You can customize the calendar `year`, `decade`, and `century` view by using the `yearCellStyle` of `SfDateRangePicker`. 
+
+•   **Current year** – You can customize current month dates text style and background of the `DateRangePicker` by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/textStyle.html) and [cellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/cellDecoration.html) properties of [DateRangePickerYearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerYearCellStyle-class.html)
+
+•   **Disabled dates** – Disable dates text style and background beyond of the `DateRangePicker` by using the [disableDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesTextStyle.html) and  [disableDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesDecoration.html).
+
+•   **Leading dates** –  You can also customize the leading month dates text style and background of the `DateRangePicker` by using the [leadingDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesTextStyle.html) and [leadingDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesDecoration.html).
+
+•   **Today date** – You can customize the today date text style and background of the `DateRangePicker` by using the [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayTextStyle.html) and [todayCellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayCellDecoration.html).
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+    return Scaffold(
+        body: SfDateRangePicker(
+        view: DateRangePickerView.month,
+        selectionMode: DateRangePickerSelectionMode.range,
+        yearCellStyle: DateRangePickerYearCellStyle(
+            disabledDatesDecoration:BoxDecoration(
+                   color: const Color(0xFFDFDFDF),
+                   border: Border.all(color: const Color(0xFFB6B6B6), width: 1),
+                   shape: BoxShape.circle),
+            disabledDatesTextStyle: const TextStyle(color: Colors.black),
+            leadingDatesDecoration:BoxDecoration(
+                   color: const Color(0xFFDFDFDF),
+                   border: Border.all(color: const Color(0xFFB6B6B6), width: 1),
+                   shape: BoxShape.circle),
+            leadingDatesTextStyle: const TextStyle(color: Colors.black),
+            textStyle: const TextStyle(color: Colors.blue),
+            todayCellDecoration: BoxDecoration(
+                   color: const Color(0xFFDFDFDF),
+                   border: Border.all(color: const Color(0xFFB6B6B6), width: 1),
+                   shape: BoxShape.circle),
+           todayTextStyle: const TextStyle(color: Colors.purple),
+           )
+         ),
+     );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Year cell customization Date Range Picker](images/customizations/yearcell_customization.png)
+
+## See also
+
+[How to customize the month cell of the Flutter date range picker (SfDateRangePicker)?](https://www.syncfusion.com/kb/11307/how-to-customize-the-month-cell-of-the-flutter-date-range-picker-sfdaterangepicker)

Flutter/DateRangePicker/date-navigations.md

@@ -0,0 +1,379 @@
+---
+layout: post
+title: Date Navigations of Syncfusion Flutter Date Range Picker | Syncfusion
+description: Learn about the complete navigation and gesture support in Syncfusion SfDateRangePicker widget in Flutter
+platform: Flutter
+control: SfDateRangePicker
+documentation: ug
+---
+
+# Date Navigations in Flutter Date Range Picker (SfDateRangePicker)
+
+## Programmatic date navigation
+You can programmatically navigate dates in the calendar widget by using the [displayDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/displayDate.html)  property of [DateRangePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController-class.html)
+
+{% tabs %}
+{% highlight Dart %}
+
+class MyAppState extends State<MyApp>{
+         DateRangePickerController _datePickerController;
+         @override
+         initState(){
+            _datePickerController = DateRangePickerController ();
+            _datePickerController.displayDate = DateTime(2022, 02, 05);
+            super.initState();
+        }
+
+@override
+    Widget build(BuildContext context) {
+       return MaterialApp(
+           home: Scaffold(
+           body: SfDateRangePicker(
+           view: DateRangePickerView.month,
+           controller: _datePickerController,
+           ),
+       ),
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Displaydate Date Range Picker](images/date-navigations/displaydate.png)
+
+## Programmatic view navigation
+You can programmatically navigate view in the calendar widget by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/view.html) property of `DateRangePickerController`.
+
+{% tabs %}
+{% highlight Dart %}
+
+class MyAppState extends State<MyApp>{
+         DateRangePickerController _datePickerController;
+         @override
+         initState(){
+            _datePickerController = DateRangePickerController ();
+            _datePickerController.view =DateRangePickerView.month;
+            super.initState();
+       }
+
+@override
+     Widget build(BuildContext context) {
+        return MaterialApp(
+           home: Scaffold(
+           body: SfDateRangePicker(
+           controller: _datePickerController,
+           ),
+       ),
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![View navigation Date Range Picker](images/date-navigations/monthview.png)
+
+## Allow view navigation
+You can allow or restrict the built-in view navigation to any picker views by using the [enableViewNavigation](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/allowViewNavigation.html) property of `SfDateRangePicker`. It allows you to restrict the built-in view switching through touch interaction and allow you to select the cells in the year, decade and century views.
+
+{% tabs %}
+{% highlight Dart %}
+
+Widget build(BuildContext context) {
+  return MaterialApp(
+    home: Scaffold(
+      body: SfDateRangePicker(
+        allowViewNavigation: false,
+      ),
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+## Programmatic date selection
+You can programmatically select the dates in the calendar widget by using the  `DateRangePickerController` property.
+
+### Single selection
+Initially or during the run time,you can select the date programmatically by using the [selectedDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedDate.html) of `DateRangePickerController` property. It is only applicable when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode-class.html) is set to `DateRangePickerSelectionMode.single`.
+
+{% tabs %}
+{% highlight Dart %}
+
+class MyApp extends StatefulWidget {
+  @override
+  _MyAppState createState() => _MyAppState();
+}
+class _MyAppState extends State<MyApp> {
+  DateRangePickerController _datePickerController;
+
+  @override
+  initState() {
+    _datePickerController = DateRangePickerController();
+    _datePickerController.selectedDate =DateTime.now().add(Duration(days: 2));
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+          body: SfDateRangePicker(
+                view: DateRangePickerView.month,
+                selectionMode: DateRangePickerSelectionMode.single,
+                controller: _datePickerController,
+              )
+      ),
+    );
+  }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Programmatic selected date in Date Range Picker](images/date-navigations/programmatic_selecteddate.png)
+
+### Multi selection
+Initially or during the run time, you can selects the multiple dates programmatically by using the [selectedDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedDates.html) of `DateRangePickerController` property. It is only applicable when the `selectionMode` is set to `DateRangePickerSelectionMode.multiple`.
+
+{% tabs %}
+{% highlight Dart %}
+
+class MyApp extends StatefulWidget {
+  @override
+  _MyAppState createState() => _MyAppState();
+}
+class _MyAppState extends State<MyApp> {
+  DateRangePickerController _datePickerController;
+
+  @override
+  initState() {
+    _datePickerController = DateRangePickerController();
+    _datePickerController.selectedDates =<DateTime>[
+      DateTime.now().add(Duration(days: 2)),
+      DateTime.now().add(Duration(days: 4)),
+      DateTime.now().add(Duration(days: 7)),
+      DateTime.now().add(Duration(days: 11))
+    ];
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+          body: SfDateRangePicker(
+                view: DateRangePickerView.month,
+                selectionMode: DateRangePickerSelectionMode.multiple,
+                controller: _datePickerController,
+              )
+      ),
+    );
+  }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Programmatic multiple dates selection Date Range Picker](images/date-navigations/programmatic_multiple_selection.png)
+
+### Range selection
+Initially or during run time, you can selects the single date range programmatically by using the [selectedRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedRange.html) of `DateRangePickerController` property. It is only applicable when the `selectionMode` is set to `DateRangePickerSelectionMode.range`
+
+{% tabs %}
+{% highlight Dart %}
+
+class MyAppState extends State<MyApp>{
+    DateRangePickerController _datePickerController;
+    @override
+    initState(){
+      _datePickerController = DateRangePickerController ();
+      _datePickerController.selectedRange = PickerDateRange(DateTime(2020,03,01),DateTime(2020,03,05));
+      super.initState();
+     }
+
+    @override
+    Widget build(BuildContext context) {
+      return MaterialApp(
+        home: Scaffold(
+        body: SfDateRangePicker (
+        view: DateRangePickerView.month,
+        selectionMode: DateRangePickerSelectionMode.range,
+        controller: _datePickerController,
+        ),
+      ),
+    );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Programmatic selectedrange Date Range Picker](images/date-navigations/programmatic-range selection.png)
+
+### Multi Range selection
+Initially or during run time, you can selects more than one date range programmatically by using the [selectedRanges](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedRanges.html) of `DateRangePickerController` property. It is only applicable when the `selectionMode` is set to `DateRangePickerSelectionMode.multiRange`.
+
+{% tabs %}
+{% highlight Dart %}
+
+class MyApp extends StatefulWidget {
+  @override
+  _MyAppState createState() => _MyAppState();
+}
+class _MyAppState extends State<MyApp> {
+  DateRangePickerController _datePickerController;
+
+  @override
+  initState() {
+    _datePickerController = DateRangePickerController();
+    _datePickerController.selectedRanges =<PickerDateRange>[
+      PickerDateRange(DateTime.now().subtract(Duration(days: 4)),
+          DateTime.now().add(Duration(days: 4))),
+      PickerDateRange(DateTime.now().add(Duration(days: 11)),
+          DateTime.now().add(Duration(days: 16)))
+    ];
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+          body:SfDateRangePicker(
+                view: DateRangePickerView.month,
+                selectionMode: DateRangePickerSelectionMode.multiRange,
+                controller: _datePickerController,
+              )
+      ),
+    );
+  }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Programmatic multi selectedrange Date Range Picker](images/date-navigations/programmatic_multirangeselection.png)
+
+## Programmatically change to adjacent dates
+By default, the date can be navigated to next and previous views using the touch gesture, by swiping the control from right to left and left to right direction. The view can be also changed programmatically using the [forward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/forward.html) and [backward](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/backward.html) methods that are available in the `DateRangePickerController`.
+
+### Forward
+You can use the `forward` method of `DateRangePickerController` for viewing the next immediate next visible dates in the `SfDateRangePicker`. It will move to next month if the calendar view is a month, similarly it will move to next week for week view and next day for day view.
+
+{% tabs %}
+{% highlight Dart %}
+
+class MyAppState extends State<MyApp> {
+   DateRangePickerController _datePickerController;
+   @override
+   initState() {
+      _datePickerController = DateRangePickerController ();
+      super.initState();
+   }
+
+   @override
+   Widget build(BuildContext context) {
+       return MaterialApp(
+          home: Scaffold(
+          appBar: AppBar(
+          title: Text('DateRangePicker Demo'),
+          actions: <Widget>[
+          IconButton(icon: Icon(Icons.arrow_forward),
+         onPressed: () {
+           _datePickerController.forward();
+         },
+      ),
+   ],
+),
+        body: SfDateRangePicker(
+        view: DateRangePickerView.month,
+        controller: _datePickerController,
+       ),
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Backward
+You can use the `backward` method of  `DateRangePickerController` for viewing the previous immediate previous visible dates in the `SfDateRangePicker`. It will move to the previous month if the calendar view is in month, similarly it will move to the previous week for week view and previous day for day view.
+
+{% tabs %}
+{% highlight Dart %}
+
+class MyAppState extends State<MyApp> {
+   DateRangePickerController _datePickerController;
+
+   @override
+   initState() {
+      _datePickerController = DateRangePickerController ();
+      super.initState();
+   }
+
+   @override
+   Widget build(BuildContext context) {
+         return MaterialApp(
+             home: Scaffold(
+             appBar: AppBar(
+             title: Text('DateRangePicker Demo'),
+             actions: <Widget>[
+             IconButton(
+             icon: Icon(Icons.arrow_back),
+             onPressed: () {
+             _datePickerController.backward();
+          },
+       ),
+    ],
+),
+            body: SfDateRangePicker(
+            view: DateRangePickerView.month,
+            controller: _datePickerController,
+           ),
+       ),
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+## Navigation direction
+You can navigate the Month, Year, Decade, and Century views either `Vertical` or `Horizontal` directions by setting the [navigationDirection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/navigationDirection.html) property of `DateRangePicker`.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfDateRangePicker(
+        view: DateRangePickerView.month,
+        navigationDirection: DateRangePickerNavigationDirection.vertical),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Show navigation arrow
+Using the [showNavigationArrow](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/showNavigationArrow.html) property of the `DateRangePicker` you can move to the next or previous views of the picker without swiping.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfDateRangePicker(
+      view: DateRangePickerView.month,
+      showNavigationArrow: true,
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Navigation arrow in Date Range Picker](images/date-navigations/navigationarrow.png)

Flutter/DateRangePicker/date-restrictions.md

@@ -0,0 +1,94 @@
+---
+layout: post
+title: Date restrictions in Syncfusion Flutter Date Range Picker | Syncfusion
+description: Learn about the complete date restriction in Syncfusion SfDateRangePicker widget in Flutter | Date Picker
+platform: flutter
+control: SfDateRangePicker
+documentation: ug
+---
+
+# Date Restrictions in Flutter Date Range Picker (SfDateRangePicker)
+
+## Minimum display date
+The [minDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/minDate.html) will restrict `backward` date navigations features, and cannot swipe the control using the touch gesture beyond the min date range in all views.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+    return Scaffold(
+       body: SfDateRangePicker(
+      view: DateRangePickerView.month,
+      minDate: DateTime(2020, 03, 05, 10 , 0, 0),
+     )
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Maximum display date
+The [maxDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/maxDate.html) will restrict `forward` date navigations features, and cannot swipe the control using the touch gesture beyond the max date range in all views.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+    return Scaffold(
+       body: SfDateRangePicker(
+       view: DateRangePickerView.month,
+       maxDate: DateTime(2020, 03, 25, 10 , 0, 0),
+       )
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Min_Max Date Date Range Picker](images/date-restrictions/min_max_date.png)
+
+## Enable and disable past dates
+
+The `DateRangePicker` allows you to enable or disable the past dates from today's date in `MonthView`. This can be achieved by changing the [enablePastDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/enablePastDates.html) property. By default, the value of this property is set to true.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+    return Scaffold(
+       body: SfDateRangePicker(
+       view: DateRangePickerView.month,
+       enablePastDates : false,
+     )
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Enable and disable past dates Range Picker](images/date-restrictions/enable_diasable_pastdates.png)
+
+## Blackout Dates
+In `DateRangePicker`, [blackoutDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/blackoutDates.html) refer to the disabled dates that restrict the user from selecting it. These dates will be marked with Strikethrough.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+    return Scaffold(
+       body: SfDateRangePicker(
+       view: DateRangePickerView.year,
+       monthViewSettings: DateRangePickerMonthViewSettings(blackoutDates:List<DateTime>()
+                ..add(DateTime(2020, 03, 18))..add(DateTime(2020, 03, 19))),
+       )
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+

Flutter/DateRangePicker/getting-started.md

@@ -0,0 +1,144 @@
+---
+layout: post
+title: Flutter Date Range Picker | Date Picker | Date Selection | Syncfusion
+description: The Syncfusion Flutter Date Range Picker widget allows users to easily select dates or a range of dates. It allows us to quickly navigate to the desired date.
+platform: flutter
+control: SfDateRangePicker
+documentation: ug
+---
+
+# Getting Started with Flutter Date Range Picker (SfDateRangePicker)
+This section explains the steps required to add the date range picker widget. This section covers only basic features needed to get started with Syncfusion date range picker widget.
+
+## Add flutter Date Range Picker to an application
+Create a simple project using the instructions given in the [Getting Started with your first Flutter app](https://flutter.dev/docs/get-started/test-drive?tab=vscode#create-app) documentation.
+
+**Add dependency**
+
+Add the Syncfusion flutter date range picker dependency to your `pubspec.yaml` file.
+
+{% highlight dart %}
+
+dependencies:
+
+syncfusion_flutter_datepicker: ^xx.x.xx
+
+{% endhighlight %}
+
+N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Date Picker`](https://pub.dev/packages/syncfusion_flutter_datepicker/versions) package.
+
+**Get packages** 
+
+Run the following command to get the required packages.
+
+{% highlight dart %}
+
+$ flutter pub get
+
+{% endhighlight %}
+
+**Import package**
+
+Import the following package in your Dart code.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:syncfusion_flutter_datepicker/datepicker.dart';
+
+{% endhighlight %}
+{% endtabs %}
+
+## Initialize date range picker
+
+After importing the package, initialize the date range picker widget as a child of any widget. Here, the date range picker widget is added as a child of the scaffold widget.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+   return Scaffold(
+       body: Container(
+       child: SfDateRangePicker(),
+));
+}
+	
+{% endhighlight %}
+{% endtabs %}
+
+![Initialize Date Range Picker](images/getting-started/initialize.png)
+
+## Multiple picker views
+
+The `SfDateRangePicker` widget provides four different types of views to display. It can be assigned to the widget constructor by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/view.html) property. Default view of the widget is month view. By default the current date will be displayed initially for all the date range picker views.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+   return Scaffold(
+       body: SfDateRangePicker(
+       view: DateRangePickerView.year,
+      )
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Multiple picker views Date Range Picker](images/getting-started/year-view.png)
+
+## Change first day of week
+
+The DateRangePicker widget will be rendered with Sunday as the first day of the week, but you can customize it to any day by using the [firstDayOfWeek](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/firstDayOfWeek.html) property.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+   return Scaffold(
+        body: SfDateRangePicker(
+        view: DateRangePickerView.month,
+        monthViewSettings: DateRangePickerMonthViewSettings(firstDayOfWeek: 1),
+        )
+    );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Date selection
+
+The DateRangePicker supports selecting single, multiple, and range of dates. It also supports programmatic selection.
+
+The selected date or range details can be obtained using the [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSelectionChanged.html) callback of date range picker. The callback will return the `DateRangePickerSelectionChangedArgs` which contains the selected date or range details.
+
+{% tabs %}
+{% highlight Dart %}
+
+void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) {
+// TODO: implement your code here
+}
+
+@override
+Widget build(BuildContext context) {
+    return MaterialApp(
+        home: Scaffold(
+            body: Container(
+                child: SfDateRangePicker(
+                    onSelectionChanged: _onSelectionChanged,
+                    selectionMode: DateRangePickerSelectionMode.range,
+                ),
+            ),
+        ),
+    );
+}
+
+
+{% endhighlight %}
+{% endtabs %}
+
+  ![Date selection Date Range Picker](images/getting-started/range-selection.png)

Flutter/DateRangePicker/headers.md

@@ -0,0 +1,129 @@
+---
+layout: post
+title: Header in Flutter Date Range Picker | Date Picker | Syncfusion
+description: Learn about Headers support in the Syncfusion Flutter Date range picker (SfDateRangePicker) widget and more details.
+platform: Flutter
+control: SfDateRangePicker
+documentation: ug
+---
+## Header
+You can customize the header of the data range picker using the [headerStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/headerStyle.html) and [headerHeight](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/headerHeight.html) properties in date range picker.
+
+### Customize the header height
+You can customize the height of the header of `DateRangePicker` by using the `headerHeight` property.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfDateRangePicker(
+      view: DateRangePickerView.month,
+      headerHeight: 100,
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Header height Date Range Picker](images/headers/headerheight.png)
+
+### Header appearance
+You can customize the header style of the `DataRangePicker` by using the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerHeaderStyle/backgroundColor.html), [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerHeaderStyle/textStyle.html), and [textAlign](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerHeaderStyle/textAlign.html) properties of [DateRangePickerHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerHeaderStyle-class.html).
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfDateRangePicker(
+      view: DateRangePickerView.month,
+      headerStyle: DateRangePickerHeaderStyle(
+          backgroundColor: Color(0xFF7fcd91),
+          textAlign: TextAlign.center,
+          textStyle: TextStyle(
+            fontStyle: FontStyle.normal,
+            fontSize: 25,
+            letterSpacing: 5,
+            color: Color(0xFFff5eaea),
+          )),
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Header appearance Date Range Picker](images/headers/headerappearance.png)
+
+## View header
+You can customize the view header of the `DateRangePicker` using the [viewHeaderHeight](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/viewHeaderHeight.html) and [viewHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/viewHeaderStyle.html) properties of [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html).
+
+### Customize view header height
+You can customize the view header height of `DateRangePicker` using the `viewHeaderHeight` property of `DateRangePickerMonthViewSettings`.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfDateRangePicker(
+      view: DateRangePickerView.month,
+      monthViewSettings:
+          DateRangePickerMonthViewSettings(viewHeaderHeight: 100),
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![View Header height Date Range Picker](images/headers/viewheaderheight.png)
+
+### View header appearance
+You can customize the view header style of `DateRangePicker` by using the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewHeaderStyle/backgroundColor.html), [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewHeaderStyle/textStyle.html) properties of [DateRangePickerViewHeaderStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewHeaderStyle-class.html).
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfDateRangePicker(
+      view: DateRangePickerView.month,
+      monthViewSettings: DateRangePickerMonthViewSettings(
+          viewHeaderStyle: DateRangePickerViewHeaderStyle(
+              backgroundColor: Color(0xFF7fcd91),
+              textStyle: TextStyle(fontSize: 20, letterSpacing: 5))),
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![View Header appearance Date Range Picker](images/headers/viewheaderappearance.png)
+
+### View header day format
+You can customize the view header of `DateRangePicker` by using the dayFormat[https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/dayFormat.html] property of DateRangePickerMonthViewSettings[https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html].
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfDateRangePicker(
+        view: DateRangePickerView.month,
+        monthViewSettings: DateRangePickerMonthViewSettings(dayFormat: 'EEE')),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![View Header format Date Range Picker](images/headers/viewheaderformat.png)

Flutter/DateRangePicker/localization.md

@@ -0,0 +1,61 @@
+---
+layout: post
+title: Localization of Syncfusion Flutter Date Range Picker | Date Picker
+description: Describe how to Localize the contents in Syncfusion SfDateRangePicker widget in Flutter | Globalization | Internationalization | Date picker
+platform: flutter
+control: SfDateRangePicker
+documentation: ug
+---
+
+# Localization in Flutter DateRangePicker (SfDateRangePicker)
+
+By default, the calendar widget supports US English localizations. You can change other languages by specifying the `MaterialApp` properties and adding the `flutter_localizations` package to your application.
+
+As of February 2020, [flutter package](https://flutter.dev/docs/development/accessibility-and-localization/internationalization) supports 77 languages.
+
+To use `flutter_localizations`, add the package as a dependency to `pubspec.yaml` file.
+
+{% highlight dart %}
+
+dependencies:
+flutter_localizations:
+  sdk: flutter
+
+{% endhighlight %}
+
+Next, import the `flutter_localizations` library and specify `localizationsDelegates` and `supportedLocale` for `MaterialApp`.
+
+{% tabs %}
+{% highlight Dart %}
+
+import 'package:flutter_localizations/flutter_localizations.dart';
+
+@override
+Widget build(BuildContext context) {
+return MaterialApp(
+        localizationsDelegates: [
+            GlobalMaterialLocalizations.delegate,
+            GlobalWidgetsLocalizations.delegate,
+      ],
+     supportedLocales: [
+          const Locale('zh'),
+          const Locale('ar'),
+          const Locale('ja'),
+      ],
+      locale: const Locale('zh'),
+      title: 'DateRangePicker Localization',
+      home: Scaffold(
+          appBar: AppBar(
+          title: Text('Calendar'),
+          ),
+          body: SfDateRangePicker(
+          view: DateRangePickerView.month,
+           ),
+       ),
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Localization Date Range Picker](images/localization/localization.png)

Flutter/DateRangePicker/overview.md

@@ -0,0 +1,59 @@
+---
+layout: post
+title: Overview of Syncfusion Flutter Date Range Picker | Date Picker
+description: Learn the key features of Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget and more details | Calendar
+platform: flutter
+control: SfDateRangePicker
+documentation: ug
+---
+
+# Flutter Date Range Picker (SfDateRangePicker) Overview
+
+The Syncfusion Flutter Date Range Picker is a lightweight widget that allows users to easily select a single date, multiple dates, or a range of dates. It provides month, year, decade, and century view options to quickly navigate to the desired date. It supports minimum, maximum, and disabled dates to restrict date selection.
+
+
+## Key features
+
+* **Multiple picker views**: Display month, year, decade, and century views that allow users to easily select and navigate between built-in views. Supports programmatic navigation.
+
+   ![Multiple picker views Date Range Picker](images/overview/picker_views.png)
+   
+* **Multi-date picker view**: Display two Date Range Pickers side by side, allowing you to select ranges of dates within two separate months easily.
+
+	![Multi date picker view Date Range Picker](images/overview/multi-date-picker.png)
+
+* **Quick navigation**: Navigate back and forth the date-range views and between different view modes.
+
+* **Enable/disable built-in view switching**: Restrict users from navigating to different picker views by disabling view switching. Select values in terms of month, year, or decade with this feature enabled.
+
+	![Range selection Date Range Picker](images/overview/range-selection.jpg)
+
+* **Date selection**: Select single, multiple, and range of dates. It also supports programmatic selection.
+
+    ![Date selection Date Range Picker](images/overview/selection_mode.png)
+
+* **Limit the date selection range**: Select only a date range with a specific minimum and maximum numbers of days (span of days) by setting the minimum and maximum days options.
+
+     ![Limit the date selection range Date Range Picker](images/overview/min_max_date.png)
+
+* **Change first day of week**: Customize the first day of the week as needed. The default first day is Sunday.
+
+* **Blackout dates**: Disable any date to make it inactive in a date range picker. Easily prevent the selection of weekends by disabling them.
+
+   ![Blackout dates Date Range Picker](images/overview/blackoutdates.png)
+
+* **Highlight holidays and weekends**: Highlight any date or every weekend in a month as special days using decoration in flutter date range picker.
+
+  ![Highlight holidays and weekends Date Range Picker](images/overview/customization.png)
+
+* **Appearance customization**: Change the look and feel of the date range picker by customizing its default appearance and style using Flutter decorations.
+
+* **Right to left (RTL)** - Right-to-left direction support for users working in RTL languages like Hebrew and Arabic.
+
+  ![Right to left Date Range Picker](images/overview/right_to_left.png)
+
+* **Accessibility** - Easy access of the date range picker by the screen readers.
+
+* **Globalization** - Display the current date and time by following the globalized date and time formats.
+
+   ![Globalization Date Range Picker](images/overview/localization.png)

Flutter/DateRangePicker/right-to-left.md

@@ -0,0 +1,37 @@
+---
+layout: post
+title: Right to Left of Syncfusion Flutter Date Range Picker | Date Picker
+description: Describe how DateRangePicker works on right-to-left direction in Syncfusion SfDateRangePicker widget in Flutter
+platform: flutter
+control: SfDateRangePicker
+documentation: ug
+---
+
+# Right to Left (RTL) in Flutter DateRangePicker (SfDateRangePicker)
+
+The `SfDateRangePicker` supports changing the layout direction of the widget in the right-to-left direction by using the `Directionality` widget `textDirection` property to rtl.
+
+You can also change the right to left direction by specifying locale, that supports RTL language such as (Arabic ,Persian ,Hebrew, Pashto and Urdu) by specifying the `MaterialApp` properties and adding the `flutter_localizations` package to your application.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+       return Scaffold(
+           appBar: AppBar(
+           title: Text('Right to Left'),
+          ),
+       body: Directionality(
+       textDirection: TextDirection.rtl,
+       child: SfDateRangePicker(
+       view: DateRangePickerView.month,
+       ),
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![RTL Date Range Picker](images/rtl/right_to_left.png)

Flutter/DateRangePicker/selections.md

@@ -0,0 +1,197 @@
+---
+layout: post
+title: Selections in Syncfusion Flutter Date Range Picker | Syncfusion
+description: This session describes the multiple selections in SfDateRangePicker widget in Flutter | DatePicker | Syncfusion
+platform: Flutter
+control: SfDateRangePicker
+documentation: ug
+---
+
+# Selections in Flutter Date Range Picker (SfDateRangePicker)
+Dates can be selected by touching the on month view cells. The default [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionMode.html) is Single that allows the user to select one date at a time. `SfDateRangePicker` provides support to select dates in four modes such as `Single`, `Multiple`, `Range` and `MultiRange` selection
+
+>**NOTE** When the `enableViewNavigation` property is set to false, the Date range picker allows you to select the cells in the year, decade, and century views of date range picker.
+
+## Single selection
+ A `single` date range picker cell can be selected in a date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode-class.html) to `single`.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+    return Scaffold(
+       body: SfDateRangePicker(
+       view: DateRangePickerView.month,
+       selectionMode: DateRangePickerSelectionMode.single,
+       )
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![SingleSelection Date Range Picker](images/selections/singleselection.jpg)
+
+>**NOTE**
+* The year, decade, and century view allow you to select cells only when the `enableViewNavigation` is set to false.
+* In this scenario, the `selection changed` call back will return the first date of the month, year, or decade of the selected cell when the selection mode set to `single` and `multiple`.
+Eg: 
+* In the year view, when the May month cell is selected then the selected date value will be 01-05-2020.
+* In the decade view, when the (2025) year cell is selected then the selected date value will be 01-01-2025.
+* In the century view, when the (2020-2029) decade cell is selected then the selected date value will be 01-01-2020.
+
+
+## Multiple selection
+You can randomly select more than one date range picker cell by setting the `DateRangePickerSelectionMode` to `multiple`. By Clicking again you can deselect the selected cells.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+    return Scaffold(
+       body: SfDateRangePicker(
+       view: DateRangePickerView.month,
+       selectionMode: DateRangePickerSelectionMode.multiple,
+       )
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![MultiSelection Date Range Picker](images/selections/multiselection.jpg)
+
+## Range selection
+You can select a range of cells in any date range picker view by setting the `DateRangePickerSelectionMode` to the `range`.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+    return Scaffold(
+               body: SfDateRangePicker(
+               view: DateRangePickerView.month,
+               selectionMode: DateRangePickerSelectionMode.range,
+              )
+      );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![RangeSelection Date Range Picker](images/selections/range-selection.jpg)
+
+>**NOTE**
+* The year, decade, and century view allow you to select cells only when the `enableViewNavigation` set is as false.
+* In this scenario, the `selection changed` call back will return the first and last date of the month, year, or decade of the selected cell when the selection mode is set to `range` and `multi-range`.
+Eg: 
+* In the year view, when the range is selected as May – June, then the range value will be 01-05-2020 to 30-06-2020.
+* In the decade view, when the range is selected as 2025 – 2030, then the range value will be 01-01-2025 to 31-12-2030.
+* In the century view, when the range is selected as 2020-2029 to 2030-2039, then the range value will be 01-01-2020 to 31-12-2039.
+
+
+## Multi range selection
+You can select more than one range of cells in any of the date range picker views by setting the `DateRangePickerSelectionMode` to the `multiRange`.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+    return Scaffold(
+               body: SfDateRangePicker(
+               view: DateRangePickerView.month,
+               selectionMode: DateRangePickerSelectionMode.multiRange,
+               )
+      );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![MultiRangeSelection Date Range Picker](images/selections/multirange.jpg)
+
+## Selection radius
+You can customize the radius of the selection using the [selectionRadius](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionRadius.html) property of the `SfDateRangePicker`.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfDateRangePicker(
+      view: DateRangePickerView.month,
+      selectionRadius: 10,
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Selection radius Date Range Picker](images/selections/selectionradius.png)
+
+## Selection shape
+You can customize the selection shape of the selected date using the [selectionShape](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionShape.html) property of the `DateRangePicker`.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfDateRangePicker(
+      view: DateRangePickerView.month,
+      selectionShape: DateRangePickerSelectionShape.rectangle,
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Selection shape Date Range Picker](images/selections/selectionshape.png)
+
+## Enable swipe selection
+Using the [enableSwipeSelection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/enableSwipeSelection.html) property of the `DateRangePicker`, you can select the dates by using swiping. By default, `enableSwipeSelection` property as `true`.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfDateRangePicker(
+      view: DateRangePickerView.month,
+      selectionMode: DateRangePickerSelectionMode.range,
+      monthViewSettings:
+          DateRangePickerMonthViewSettings(enableSwipeSelection: false),
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Toggle day selection
+You can deselect the selected date using the [toggleDaySelection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/toggleDaySelection.html) property of the `SfDateRangePicker`.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfDateRangePicker(
+      view: DateRangePickerView.month,
+      toggleDaySelection: true,
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}

Flutter/DateRangePicker/views.md

@@ -0,0 +1,140 @@
+---
+layout: post
+title: Views of Syncfusion Flutter Date Range Picker | Syncfusion
+description: This session describes the Date Range Picker views in SfDateRangePicker widget in Flutter | Date Picker
+platform: Flutter
+control: SfDateRangePicker
+documentation: ug
+---
+
+# Multiple picker Views in Flutter Date Range Picker (SfDateRangePicker)
+The `SfDateRangePicker` widget provides four different types of views to display. It can be assigned to the widget constructor by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/view.html) property. Default view of the widget is month view. By default the current date will be displayed initially for all the date range picker views.
+
+## Month view
+This view displays the entire dates of a particular month. By default , the current month will be displayed on loading. The current date is provided with a separate color different from the rest of the dates color in `month view`.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+   return Scaffold(
+        body: SfDateRangePicker(
+       view: DateRangePickerView.month,
+       )
+   );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Month view Date Range Picker](images/views/monthview.png)
+
+## Year view
+This displays the entire month of a particular year. By default, the current year will be displayed on loading. You can navigate between months quickly by selecting the particular month in a `year view`.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+   return Scaffold(
+             body: SfDateRangePicker(
+             view: DateRangePickerView.year,
+             )
+      );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Year view Date Range Picker](images/views/yearview.png)
+
+## Decade view
+This view displays the period of 10 years. By default, the current year range of 10 years will be displayed on loading. You can easily navigate between month/year view to decade view by tapping the calendar header. The year can be navigated quickly by selecting a particular year from a  `decade view`.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+    return Scaffold(
+               body: SfDateRangePicker(
+               view: DateRangePickerView.decade,
+              )
+      );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Decade view Date Range Picker](images/views/decadeview.png)
+
+## Century view
+This view displays the period of 100 years. By default, the current year range of 100 years will be displayed on loading. You can easily navigate between month/year/decade view to century view by tapping the calendar header. You can easily navigate to a decade view by selecting decade years in `century view`.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+    return Scaffold(
+               body: SfDateRangePicker(
+               view: DateRangePickerView.century,
+               )
+      );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Century view Date Range Picker](images/views/centuryview.png)
+
+## Week view
+The number of weeks in the month view can be customized by setting the [numberOfWeeksInView](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/numberOfWeeksInView.html) property of DateRangePickerMonthViewSettings[https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html].
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfDateRangePicker(
+        view: DateRangePickerView.month,
+        monthViewSettings:
+            DateRangePickerMonthViewSettings(numberOfWeeksInView: 2)),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Century view Date Range Picker](images/views/numberofweek-in-view.png)
+
+## Multi-date picker view
+You can enable a multi-date range picker by using the [enableMultiView](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/enableMultiView.html) property of `SfDateRangePicker`, which displays two date range pickers side by side, the space between the two date-range picker can be customized by using the [viewSpacing](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/viewSpacing.html) property of `SfDateRangePicker`.
+
+{% tabs %}
+{% highlight Dart %}
+
+Widget build(BuildContext context) {
+  return MaterialApp(
+    home: Scaffold(
+      body: SfDateRangePicker(
+        enableMultiView: true,
+        viewSpacing: 20,
+      ),
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+![Multi-date picker view](images/views/multi-picker-view.jpg)
+
+## See also
+
+[How to switch between the date range picker views in the Flutter date range picker (SfDateRangePicker)?](https://www.syncfusion.com/kb/11305/how-to-switch-between-the-date-range-picker-views-in-flutter-date-range-picker)
+
+[How to get the current view dates in Flutter date range picker (SfDateRangePicker)?](https://www.syncfusion.com/kb/11331/how-to-get-the-current-view-dates-in-flutter-date-range-picker-sfdaterangepicker)

Flutter/Release-notes/v17.3.0.14.md

@@ -0,0 +1,17 @@
+---
+title: Essential Studio for Flutter 2019 volume 3 Main Release Release Notes  
+description: Essential Studio for Flutter 2019 volume 3 Main Release Release Notes  
+platform: flutter
+documentation: ug
+---
+
+# Essential Studio for Flutter  Release Notes  
+
+{% include release-info.html date="October 3, 2019"  version="v17.3.0.14" %} 
+
+
+{% directory path: _includes/release-notes/v17.3.0.14 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

Flutter/Release-notes/v17.3.0.26.md

@@ -0,0 +1,17 @@
+---
+title: Essential Studio for Flutter 2019 volume 3 Service pack Release Release Notes  
+description: Essential Studio for Flutter 2019 volume 3 Service pack Release Release Notes  
+platform: flutter
+documentation: ug
+---
+
+# Essential Studio for Flutter  Release Notes  
+
+{% include release-info.html date="November 5, 2019"  version="v17.3.0.26" %} 
+
+
+{% directory path: _includes/release-notes/v17.3.0.26 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

Flutter/Release-notes/v17.4.0.39.md

@@ -0,0 +1,17 @@
+---
+title: Essential Studio for Flutter 2019 volume 4 Main Release Release Notes  
+description: Essential Studio for Flutter 2019 volume 4 Main Release Release Notes  
+platform: flutter
+documentation: ug
+---
+
+# Essential Studio for Flutter  Release Notes  
+
+{% include release-info.html date="December 17, 2019"  version="v17.4.0.39" %} 
+
+
+{% directory path: _includes/release-notes/v17.4.0.39 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

Flutter/Release-notes/v17.4.0.46.md

@@ -0,0 +1,17 @@
+---
+title: Essential Studio for Flutter 2019 volume 4 SP1 Release Notes  
+description: Essential Studio for Flutter 2019 volume 4 SP1 Release Notes  
+platform: flutter
+documentation: ug
+---
+
+# Essential Studio for Flutter  Release Notes  
+
+{% include release-info.html date="January 30, 2020"  version="v17.4.0.46" %} 
+
+
+{% directory path: _includes/release-notes/v17.4.0.46 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

Flutter/Release-notes/v18.1.0.36.md

@@ -0,0 +1,17 @@
+---
+title: Essential Studio for  Flutter 2020 volume 1 Beta Release Notes  
+description: Essential Studio for  Flutter 2020 volume 1 Beta Release Notes  
+platform: flutter
+documentation: ug
+---
+
+# Essential Studio for  Flutter Release Notes  
+
+{% include release-info.html date="March 19, 2020"  version="v18.1.0.36" %} 
+
+
+{% directory path: _includes/release-notes/v18.1.0.36 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

Flutter/Release-notes/v18.1.0.42.md

@@ -0,0 +1,17 @@
+---
+title: Essential Studio for  Flutter 2020 volume 1 Main Release Notes  
+description: Essential Studio for  Flutter 2020 volume 1 Main Release Notes  
+platform: flutter
+documentation: ug
+---
+
+# Essential Studio for  Flutter Release Notes  
+
+{% include release-info.html date="April 1, 2020"  version="v18.1.0.42" %} 
+
+
+{% directory path: _includes/release-notes/v18.1.0.42 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

Flutter/Release-notes/v18.1.0.52.md

@@ -0,0 +1,17 @@
+---
+title: Essential Studio for  Flutter 2020 volume 1 SP1 Release Notes  
+description: Essential Studio for  Flutter 2020 volume 1 SP1 Release Notes  
+platform: flutter
+documentation: ug
+---
+
+# Essential Studio for  Flutter Release Notes  
+
+{% include release-info.html date="May 13, 2020"  version="v18.1.0.52" %} 
+
+
+{% directory path: _includes/release-notes/v18.1.0.52 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

Flutter/Release-notes/v18.2.0.44.md

@@ -0,0 +1,17 @@
+---
+title: Essential Studio for  Flutter 2020 volume 2 Main Release Notes  
+description: Essential Studio for  Flutter 2020 volume 2 Main Release Notes  
+platform: flutter
+documentation: ug
+---
+
+# Essential Studio for  Flutter Release Notes  
+
+{% include release-info.html date="July 7, 2020"  version="v18.2.0.44" %} 
+
+
+{% directory path: _includes/release-notes/v18.2.0.44 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

Flutter/Release-notes/v18.2.0.53.md

@@ -0,0 +1,17 @@
+---
+title: Essential Studio for  Flutter 2020 volume 2 SP1 Release Notes  
+description: Essential Studio for  Flutter 2020 volume 2 SP1 Release Notes  
+platform: flutter
+documentation: ug
+---
+
+# Essential Studio for  Flutter Release Notes  
+
+{% include release-info.html date="August 12, 2020"  version="v18.2.0.53" %} 
+
+
+{% directory path: _includes/release-notes/v18.2.0.53 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

Flutter/Release-notes/v18.3.0.35.md

@@ -0,0 +1,17 @@
+---
+title: Essential Studio for  Flutter 2020 volume 3 Main Release Notes 
+description: Essential Studio for  Flutter 2020 volume 3 Main Release Notes  
+platform: flutter
+documentation: ug
+---
+
+# Essential Studio for  Flutter Release Notes  
+
+{% include release-info.html date="October 1, 2020"  version="v18.3.0.35" %} 
+
+
+{% directory path: _includes/release-notes/v18.3.0.35 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

Flutter/Release-notes/v18.3.0.42.md

@@ -0,0 +1,17 @@
+---
+title: Essential Studio for  Flutter Weekly Nuget Release Release Notes  
+description: Essential Studio for  Flutter Weekly Nuget Release Release Notes  
+platform: flutter
+documentation: ug
+---
+
+# Essential Studio for  Flutter Release Notes  
+
+{% include release-info.html date="October 20, 2020"  version="v18.3.0.42" %} 
+
+
+{% directory path: _includes/release-notes/v18.3.0.42 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

Flutter/Release-notes/v18.3.0.44.md

@@ -0,0 +1,17 @@
+---
+title: Essential Studio for  Flutter Weekly Nuget Release Release Notes  
+description: Essential Studio for  Flutter Weekly Nuget Release Release Notes  
+platform: flutter
+documentation: ug
+---
+
+# Essential Studio for  Flutter Release Notes  
+
+{% include release-info.html date="October 27, 2020"  version="v18.3.0.44" %} 
+
+
+{% directory path: _includes/release-notes/v18.3.0.44 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

Flutter/Release-notes/v18.3.0.47.md

@@ -0,0 +1,17 @@
+---
+title: Essential Studio for Flutter 2020 volume 3 SP1 Release Notes  
+description: Essential Studio for Flutter 2020 volume 3 SP1 Release Notes  
+platform: flutter
+documentation: ug
+---
+
+# Essential Studio for Flutter  Release Notes  
+
+{% include release-info.html date="November 5, 2020"  version="v18.3.0.47" %} 
+
+
+{% directory path: _includes/release-notes/v18.3.0.47 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

Flutter/barcode/barcode-customization.md

@@ -0,0 +1,294 @@
+---
+layout: post
+title: Barcode customization of Syncfusion Flutter Barcode
+description: This article explains how to customize the input value which is displayed as the text and the bar of barcode generator control in Flutter.
+platform: flutter
+control: SfBarcodeGenerator
+documentation: ug
+---
+
+# Customization of barcode generator
+
+## Text customization 
+
+**Displaying input value**
+
+The provided input value of the barcode can be displayed by enabling its [`showValue`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/showValue.html) property. By default, the [`showValue`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/showValue.html) is false.
+
+{% highlight dart %} 
+
+    @override
+        Widget build(BuildContext context) {
+            return Scaffold(
+                backgroundColor: Colors.white,
+                body: Center(
+                    child: Container(
+                        height: 150,
+                        width: 300,
+                        child: SfBarcodeGenerator(
+                            value: '12634388927',
+                            showValue: true)
+                    )
+                )
+            );
+        }
+
+{% endhighlight %}
+
+![show text](images/text-customization/show-text.jpg)
+
+**Text style customization**
+
+The style of the text can be customized with the [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textStyle.html) property of the barcode generator.
+
+{% highlight dart %} 
+
+    @override
+    Widget build(BuildContext context) {
+    return Scaffold(
+        backgroundColor: Colors.white,
+        body: Center(
+            child: Container(
+                height: 150,
+                width: 300,
+                child: SfBarcodeGenerator(
+                    value: '12634388927',
+
+                    textStyle: TextStyle(fontFamily: 'Times',
+                        fontSize: 16, fontStyle: FontStyle.italic,
+                        fontWeight: FontWeight.bold,
+                        color: Colors.red),
+                    showValue: true)
+            )
+        )
+    );
+  }
+
+{% endhighlight %}
+
+![text customization](images/text-customization/text-style.jpg)
+
+**Text spacing**
+
+The space between the text and the barcode can be controlled by the [`textSpacing`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textSpacing.html) property of barcode generator. By default, the value of [`textSpacing`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textSpacing.html) is 2. 
+
+{% highlight dart %} 
+
+    @override
+    Widget build(BuildContext context) {
+    return Scaffold(
+        backgroundColor: Colors.white,
+        body: Center(
+            child: Container(
+                height: 150,
+                width: 300,
+                child: SfBarcodeGenerator(
+                    value: '12634388927',
+                    textSpacing: 25,
+                    showValue: true)
+            )
+        )
+    );
+  }
+
+{% endhighlight %}
+
+![text spacing](images/text-customization/text-spacing.jpg)
+
+**Horizontal text alignment**
+
+The horizontal alignment of the text can be controlled by [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property of barcode generator. The displayed value can be positioned at `start`, `center` or `end` of the control. The default value of [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property is center.
+
+{% highlight dart %} 
+  
+    @override
+    Widget build(BuildContext context) {
+    return Scaffold(
+            backgroundColor: Colors.white,
+            body: Center(
+            child: Container(
+                height: 150,
+                width: 240,
+                child: SfBarcodeGenerator(
+                  value: '12634',
+                  textAlign: TextAlign.end,
+                  showValue: true)
+            )
+        )
+      );
+    }
+
+{% endhighlight %}
+
+![text align](images/text-customization/text-align.png)
+
+## Bar customization
+
+**Bar width customization**
+
+Both the one dimensional and the two dimensional symbology support the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property. The property is used to define the size of the smallest line or dot of the barcode.
+
+For one dimensional barcode, if this property is not set, the size of the smallest bar line is determined depending on the width available.
+
+The following code snippet shows the one dimensional barcode with [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property,
+
+{% highlight dart %} 
+
+      @override
+    Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: Center(
+          child: Container(
+            height: 150,
+            width: 230,
+            child: SfBarcodeGenerator(
+              backgroundColor:  Color.fromRGBO(193, 250, 250, 1),
+              value: '123456789',
+              showValue: true,
+              symbology: Codabar(module: 1)),
+          )
+        ),
+      );
+    }
+
+  {% endhighlight %}
+
+![with module value](images/text-customization/with-module.jpg)
+
+N> In the image above, the smallest bar line width is 1 logical pixel. 
+
+Below code snippet shows the one dimensional barcode without the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property,
+
+{% highlight dart %} 
+
+      @override
+    Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: Center(
+          child: Container(
+            height: 150,
+            width: 230,
+            child: SfBarcodeGenerator(
+              backgroundColor: Color.fromRGBO(193, 250, 250, 1),
+              value: '123456789',
+              showValue: true,
+              symbology: Codabar()),
+          )
+      ),
+    );
+  }
+
+  {% endhighlight %}
+
+![without module value](images/text-customization/without-module.jpg)
+
+N> In the image above, the smallest bar line width is calculated on the basis of the available width as a result of the total computed inputs(0's and 1's) divided by the available width.
+
+For two dimensional barcode , if the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property is not set, the size of smallest dot is calculated based on the minimum of available width or height.
+
+The following code snippet shows the two dimensional barcode with [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property,
+
+{% highlight dart %} 
+
+    @override
+    Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: Center(
+          child: Container(
+            height: 150,
+            width: 230,
+            child: SfBarcodeGenerator(
+               backgroundColor: Color.fromRGBO(193, 250, 250, 1),
+              value: '123456789',
+              symbology: QRCode(module: 2),),
+          )
+        ),
+      );
+    }
+
+  {% endhighlight %}
+
+  ![QR with module value](images/text-customization/qr-with-module.jpg)
+
+  Below code snippet shows the two dimensional barcode without the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property,
+
+  {% highlight dart %} 
+
+     @override
+    Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: Center(
+          child: Container(
+            height: 150,
+            width: 230,
+            child: SfBarcodeGenerator(
+              backgroundColor: Color.fromRGBO(193, 250, 250, 1),
+              value: '123456789',
+              symbology: QRCode(),),
+          )
+        ),
+      );
+    }
+
+  {% endhighlight %}
+
+  ![QR without module value](images/text-customization/qr-without-module.jpg)
+
+**Bar color customization**
+
+The bar color of the barcode can be customized by using its [`barColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/barColor.html) property as like the following code snippet,
+
+{% highlight dart %} 
+
+    @override
+    Widget build(BuildContext context) {
+    return Scaffold(
+        backgroundColor: Colors.white,
+        body: Center(
+            child: Container(
+                height: 150,
+                width: 240,
+                child: SfBarcodeGenerator(
+                  value: '12634',
+                   barColor: Colors.deepPurple,
+                 )
+            )
+        )
+     );
+    }
+
+{% endhighlight %}
+
+![bar color](images/text-customization/bar-color.jpg)
+
+**Background color customization**
+
+The background color of barcode can be customized with the [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/backgroundColor.html) property of barcode generator as like the below code snippet,
+
+{% highlight dart %} 
+
+     @override
+    Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: Center(
+          child: Container(
+            height: 150,
+            width: 230,
+            child: SfBarcodeGenerator(
+              backgroundColor: Color.fromRGBO(193, 250, 250, 1),
+              value: '123456789',
+              symbology: Codabar(),),
+          )
+       ),
+      );
+     }
+
+  {% endhighlight %}
+
+  ![background color](images/text-customization/background-color.jpg)
+

Flutter/barcode/getting-started.md

@@ -0,0 +1,131 @@
+---
+layout: post
+title: Getting Started for Syncfusion Flutter Barcode
+description: A quick tour to initial users on Syncfusion Flutter SfBarcodeGenerator. It provide overview on the symbology types and displaying the text option.
+platform: flutter
+control: SfBarcodeGenerator
+documentation: ug
+---
+
+# Getting Started with Flutter Barcode Generator (SfBarcodeGenerator)
+
+This section explains the steps required to add the barcode and set its symbology. This section covers only basic features needed to get started with Syncfusion barcode generator widget. 
+
+
+## Add Flutter Barcode to an application
+
+Create a simple project using the instructions given in the [Getting Started with your first Flutter app](https://flutter.dev/docs/get-started/test-drive?tab=vscode#create-app) documentation.
+
+**Add dependency**
+
+Add the Syncfusion Flutter Barcode dependency to your pubspec.yaml file.
+
+{% highlight dart %} 
+
+    dependencies:
+
+    syncfusion_flutter_barcodes: ^xx.x.xx
+
+{% endhighlight %}
+
+N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Barcodes`](https://pub.dev/packages/syncfusion_flutter_barcodes/versions) package.
+
+**Get packages**
+
+Run the following command to get the required packages.
+
+{% highlight dart %} 
+
+    $ flutter pub get
+
+{% endhighlight %}
+
+**Import package**
+
+Import the following package in your Dart code.
+
+{% highlight dart %} 
+
+    import 'package:syncfusion_flutter_barcodes/barcodes.dart';
+
+{% endhighlight %}
+
+## Initialize the barcode
+
+Add the Barcode Generator widget as a child of any widget. Here, the widget is added as a child of the container widget and the height to the container is specified (otherwise it will take full container height).
+
+{% highlight dart %} 
+
+    @override
+    Widget build(BuildContext context) {
+        return MaterialApp(
+            home: Scaffold(
+                body: Center(
+                    child: Container(
+                         height: 150,
+                        child:SfBarcodeGenerator(value:'http://www.syncfusion.com')
+                        )
+                    )
+                )      
+            );
+        }
+
+{% endhighlight %}
+
+N> The default symbology of SfBarcodeGenerator is [`Code128`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code128-class.html).
+
+![Initialize barcode generator](images/getting-started/getting_started1.jpg)
+
+## Initialize QR Code symbology
+
+You can set the required symbology type to the barcode generator based on input value by initializing the [`symbology`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology-class.html) property. In the following code snippet, the QR code is set as the barcode symbology.
+
+{% highlight dart %} 
+
+    @override
+    Widget build(BuildContext context) {
+        return MaterialApp(
+            home: Scaffold(
+                body: Center(
+                    child: Container(
+                        height: 350,
+                        width: 350,
+                        child:SfBarcodeGenerator(value:'http://www.syncfusion.com',
+                         symbology: QRCode())
+                        )
+                    )
+                )      
+            );
+        }
+
+{% endhighlight %}
+
+![symbology to barcode](images/getting-started/getting_started2.jpg)
+
+## Display input value
+
+The provided input value can be displayed below the barcode by enabling the [`showValue`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/showValue.html) property of barcode as like the following code snippet,
+
+{% highlight dart %} 
+
+    @override
+    Widget build(BuildContext context) {
+        return MaterialApp(
+            home: Scaffold(
+                body: Center(
+                    child: Container(
+                        height: 350,
+                        width: 350,
+                        child:SfBarcodeGenerator(value:'http://www.syncfusion.com',
+                         showValue: true, textSpacing: 15,
+                         symbology: QRCode())
+                        )
+                    )
+                )      
+            );
+        }
+
+{% endhighlight %}
+
+![Text to barcode](images/getting-started/getting_started3.jpg)
+