Skip to content

FLUT-965289 - [Feature] Updated the barcode ug content #1270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: development
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 37 additions & 34 deletions Flutter/DateRangePicker/Callbacks.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,29 @@ documentation: ug
---

# Callbacks in Flutter Date Range Picker (SfDateRangePicker)
Calendar supports the `ViewChangedCallback` and `SelectionChangedCallback` to interact with the Flutter date range picker.

Calendar supports the [ViewChangedCallback](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewChangedCallback.html) and [SelectionChangedCallback](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionChangedCallback.html) to interact with the Flutter date range picker.

## View changed callback

The [onViewChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onViewChanged.html) callback triggers when the current view swiped to previous or next view, picker view switched to another picker view.

* `visibleDateRange` - returns the start and end dates of the current visible month.
* [visibleDateRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerViewChangedArgs/visibleDateRange.html) - returns the start and end dates of the current visible month.

{% tabs %}
{% highlight dart hl_lines="6 7 8" %}

@override
Widget build(BuildContext context) {
return Scaffold(
body: SfDateRangePicker(
view: DateRangePickerView.month,
onViewChanged: (DateRangePickerViewChangedArgs args) {
var visibleDates = args.visibleDateRange;
},
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfDateRangePicker(
view: DateRangePickerView.month,
onViewChanged: (DateRangePickerViewChangedArgs args) {
var visibleDates = args.visibleDateRange;
},
),
);
}

{% endhighlight %}
{% endtabs %}
Expand All @@ -37,34 +39,35 @@ Widget build(BuildContext context) {
* Use [HijriDatePickerViewChangedArgs](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerViewChangedArgs-class.html) for the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html).

## Selection changed callback

The [onSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/onSelectionChanged.html) callback triggers when selecting the dates from the date picker.

* `args.value` - returns the dates based on the selection mode.

{% tabs %}
{% highlight dart hl_lines="7 8 9 10 11 12 13 14 15 16 17 18" %}

@override
Widget build(BuildContext context) {
return Scaffold(
body: SfDateRangePicker(
view: DateRangePickerView.month,
selectionMode: DateRangePickerSelectionMode.range,
onSelectionChanged: (DateRangePickerSelectionChangedArgs args) {
if (args.value is PickerDateRange) {
final DateTime rangeStartDate = args.value.startDate;
final DateTime rangeEndDate = args.value.endDate;
} else if (args.value is DateTime) {
final DateTime selectedDate = args.value;
} else if (args.value is List<DateTime>) {
final List<DateTime> selectedDates = args.value;
} else {
final List<PickerDateRange> selectedRanges = args.value;
}
},
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfDateRangePicker(
view: DateRangePickerView.month,
selectionMode: DateRangePickerSelectionMode.range,
onSelectionChanged: (DateRangePickerSelectionChangedArgs args) {
if (args.value is PickerDateRange) {
final DateTime rangeStartDate = args.value.startDate;
final DateTime rangeEndDate = args.value.endDate;
} else if (args.value is DateTime) {
final DateTime selectedDate = args.value;
} else if (args.value is List<DateTime>) {
final List<DateTime> selectedDates = args.value;
} else {
final List<PickerDateRange> selectedRanges = args.value;
}
},
),
);
}

{% endhighlight %}
{% endtabs %}
8 changes: 4 additions & 4 deletions Flutter/DateRangePicker/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ documentation: ug
# Accessibility in Flutter DateRangePicker (SfDateRangePicker)

## Screen reader support
The `SfDateRangePicker` can easily be accessed by screen readers. Please find the following table to get spoken feedback about the inner element contents of the screen.
The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) can easily be accessed by screen readers. Please find the following table to get spoken feedback about the inner element contents of the screen.

### Month view

Expand Down Expand Up @@ -56,7 +56,7 @@ The `SfDateRangePicker` can easily be accessed by screen readers. Please find th

## Sufficient contrast

The `SfDateRangePicker` [theming](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all the UI elements.
The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) [theming](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all the UI elements.

The following APIs allows you to customize the colors of the following elements.
* [viewHeaderStyle](https://help.syncfusion.com/flutter/daterangepicker/headers#view-header)
Expand All @@ -75,7 +75,7 @@ The following APIs allows you to customize the colors of the following elements.

## Large fonts

The `SfDateRangePicker` font size can be adjusted automatically based on device settings and the font size scaled based on the `MediaQueryData.textScaleFactor`. It also allows you to change the font size of all elements in date range picker.
The [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [MediaQueryData.textScaleFactor](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaleFactor.html). It also allows you to change the font size of all elements in date range picker.
* [todayTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
* [leadingDatesTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
* [trailingDatesTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
Expand All @@ -89,7 +89,7 @@ The `SfDateRangePicker` font size can be adjusted automatically based on device

## Keyboard navigation

The following keyboard interactions are supported by the `SfDateRangePicker`.
The following keyboard interactions are supported by the [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).

| Key | Description |
|-----------------------|----------------------------------------------------------------------------------------------------------------|
Expand Down
106 changes: 50 additions & 56 deletions Flutter/DateRangePicker/builders.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@ control: SfDateRangePicker
documentation: ug
---
# Builders in Flutter Date Range Picker (SfDateRangePicker)

The date range picker allows you to create a responsive UI with the conditions based on a widget’s details, and to design and create your custom view to the month cells and year cells in the date range picker.

## Cell builder

The [DateRangePickerCellBuilder](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerCellBuilder.html) allows you to design your custom view and assign the view to the month and year view cells of the date range picker by returning an appropriate widget in the [cellBuilder](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/cellBuilder.html) of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).

[DateRangePickerCellDetails](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerCellDetails-class.html): Returns the details of the cell.
Expand All @@ -29,63 +31,56 @@ class MyAppState extends State<MyApp> {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(
child: SfDateRangePicker(
controller: _controller,
cellBuilder:
(BuildContext context, DateRangePickerCellDetails details) {
final bool isToday = isSameDate(details.date, DateTime.now());
final bool isBlackOut = isBlackedDate(details.date);
final bool isSpecialDate = isSpecialDay(details.date);
return Container(
margin: EdgeInsets.all(2),
padding: EdgeInsets.only(top: 10),
decoration: BoxDecoration(
body: SafeArea(
child: SfDateRangePicker(
controller: _controller,
cellBuilder: (
BuildContext context,
DateRangePickerCellDetails details,
) {
final bool isToday = isSameDate(details.date, DateTime.now());
final bool isBlackOut = isBlackedDate(details.date);
final bool isSpecialDate = isSpecialDay(details.date);
return Container(
margin: EdgeInsets.all(2),
padding: EdgeInsets.only(top: 10),
decoration: BoxDecoration(
color: Colors.blueAccent,
border: isToday
? Border.all(color: Colors.black, width: 2)
: null),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text(
details.date.day.toString(),
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.bold,
border:
isToday
? Border.all(color: Colors.black, width: 2)
: null,
),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text(
details.date.day.toString(),
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.bold,
),
),
),
isBlackOut
? Icon(
Icons.block_sharp,
size: 13,
isBlackOut
? Icon(Icons.block_sharp, size: 13)
: isSpecialDate
? Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.cake, size: 13),
Icon(Icons.celebration, size: 13),
Icon(Icons.audiotrack, size: 13),
],
)
: isSpecialDate
? Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.cake,
size: 13,
),
Icon(
Icons.celebration,
size: 13,
),
Icon(
Icons.audiotrack,
size: 13,
)
],
)
: Container()
],
),
);
},
: Container(),
],
),
);
},
),
),
)),
),
);
}

Expand Down Expand Up @@ -114,18 +109,17 @@ class MyAppState extends State<MyApp> {
}
}


{% endhighlight %}
{% endtabs %}

![Cell builder](images/builders/cell-builder.jpg)

>**NOTE**
* Use [HijriDateRangePickerCellDetails]() for the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html).
* Use [HijriDateRangePickerCellDetails](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDateRangePickerCellDetails-class.html) for the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html).


## See also

* [How to customize the date range picker cells using builder in the Flutter (SfDateRangePicker)](https://support.syncfusion.com/kb/article/10711/how-to-customize-the-date-range-picker-cells-using-builder-in-the-flutter-sfdaterangepicker)
* [How to create timeline Date Picker in Flutter](https://support.syncfusion.com/kb/article/10992/how-to-create-timeline-date-picker-in-flutter)
* [How to customize the special dates using builder in the Flutter Date Range Picker](https://support.syncfusion.com/kb/article/10750/how-to-customize-the-special-dates-using-builder-in-the-flutter-date-range-picker)
* [How to customize the special dates using builder in the Flutter Date Range Picker](https://support.syncfusion.com/kb/article/10750/how-to-customize-the-special-dates-using-builder-in-the-flutter-date-range-picker)
Loading