Latest source merged from Syncfusion
This commit is contained in:
pipeline
Родитель
d486bfd1c6
Коммит
c27fbe0ffe
|
|
@ -0,0 +1,110 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility in Flutter Date Range Picker widget | Syncfusion
|
||||
description: Learn here all about Accessibility feature of Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget and more.
|
||||
platform: flutter
|
||||
control: SfDateRangePicker
|
||||
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.
|
||||
|
||||
### 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 |
|
||||
| Week number panel | Week, Week number | Week 26 |
|
||||
|
||||
### 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 |
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
The `SfDateRangePicker` [theming](https://help.syncfusion.com/flutter/themes) support offers a consistent and a standardized look, as well as the ability to set the colors for all the UI elements.
|
||||
|
||||
The following APIs allows to customize the colors of the following elements.
|
||||
* [viewHeaderStyle](https://help.syncfusion.com/flutter/daterangepicker/headers#view-header)
|
||||
* [headerStyle](https://help.syncfusion.com/flutter/daterangepicker/headers#header-appearance)
|
||||
* [leadingDatesDecoration](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [trailingDatesDecoration](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [cellDecoration](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [blackoutDatesDecoration](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [specialDatesDecoration](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [weekendDatesDecoration](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [selectionColor](https://help.syncfusion.com/flutter/daterangepicker/customizations#selection-cell-customization)
|
||||
* [startRangeSelectionColor](https://help.syncfusion.com/flutter/daterangepicker/customizations#selection-cell-customization)
|
||||
* [endRangeSelectionColor](https://help.syncfusion.com/flutter/daterangepicker/customizations#selection-cell-customization)
|
||||
* [rangeSelectionColor](https://help.syncfusion.com/flutter/daterangepicker/customizations#selection-cell-customization)
|
||||
* [yearCellStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations#year-cell-customization)
|
||||
|
||||
## Large fonts
|
||||
|
||||
The `SfDateRangePicker` font size can be adjusted automatically based on device settings and the font size scaled based on the `MediaQueryData.textScaleFactor`. And also it allows 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)
|
||||
* [disabledDatesTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
|
||||
* [textStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
|
||||
* [blackoutDateTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [specialDatesTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [weekendTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [selectionTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations#selection-cell-customization)
|
||||
* [rangeTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations#selection-cell-customization)
|
||||
|
||||
## Keyboard navigation
|
||||
|
||||
The following keyboard interactions are supported by the `SfDateRangePicker`.
|
||||
|
||||
| Key | Description |
|
||||
|-----------------------|----------------------------------------------------------------------------------------------------------------|
|
||||
| Up arrow | Selects the same day of the previous week |
|
||||
| Down arrow | Selects the same day of the next week |
|
||||
| Right arrow | Selects the day after |
|
||||
| Left arrow | Selects the day before |
|
||||
| Alt+1 | Displays month view |
|
||||
| Alt+2 | Displays year view |
|
||||
| Alt+3 | Displays decade view |
|
||||
| Alt+4 | Displays century view |
|
||||
| Tap | Focuses the next clickable element |
|
||||
| Shift + upper arrow | Selects the same day in previous week to complete the range selection or add the day in the multiple selection |
|
||||
| Shift + down arrow | Selects the same day in next week to complete the range selection or add the day in the multiple selection |
|
||||
| Shift + left arrow | Selects the day before to complete the range selection or add the day in the multiple selection |
|
||||
| Shift + right arrow | Selects the day after to complete the range selection or add the day in the multiple selection |
|
||||
| Ctrl + left arrow | To navigate to the previous view |
|
||||
| Ctrl + right arrow | To navigate to the next view |
|
||||
|
|
@ -0,0 +1,507 @@
|
|||
---
|
||||
layout: post
|
||||
title: About Flutter Hijri Date Range Picker widget | Syncfusion | DatePicker
|
||||
description: Learn here all about introduction of Syncfusion Hijri Date Range Picker (SfHijriDateRangePicker) widget and more.
|
||||
platform: flutter
|
||||
control: SfDateRangePicker
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Flutter Hijri Date Range Picker (SfHijriDateRangePicker) Overview
|
||||
Along with the Gregorian calendar, the picker package contains a Hijri date picker to display the Islamic calendar. Islamic calendar or Hijri calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days. To know more about the Islamic calendar, kindly refer to [Wikipedia](https://en.wikipedia.org/wiki/Islamic_calendar).
|
||||
|
||||
It consists of all the Gregorian calendar functionalities like min and max date, the first day of the week, different selection modes, RTL, and customization for special dates.
|
||||
|
||||
To display the Hijri date picker, initialize the [HijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html) widget as a child of any widget. Here, the Hijri date range picker added as a child of the scaffold widget.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(body: SfHijriDateRangePicker()),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
>**NOTE**
|
||||
* Most of the properties type and classes were same from [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html) except the followings [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html), [HijriDatePickerMonthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle-class.html), [HijriDatePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings-class.html), [HijriDatePickerViewChangedArgs](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerViewChangedArgs-class.html), [HijriDatePickerYearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle-class.html), [HijriDateRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDateRange-class.html) and [HijriDatePickerView](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerView-class.html).
|
||||
* Use the [HijriDateTime](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/HijriDateTime-class.html) class to define the date for `SfHijriDateRangePicker`.
|
||||
|
||||
## Multiple picker views
|
||||
The `SfHijriDateRangePicker` widget provides three 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/SfHijriDateRangePicker/view.html) property. The default view of the widget is the 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 MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfHijriDateRangePicker(
|
||||
view: HijriDatePickerView.year,
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Change first day of week
|
||||
The `SfHijriDateRangePicker` 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/HijriDatePickerMonthViewSettings/firstDayOfWeek.html) property [HijriDatePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings-class.html).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfHijriDateRangePicker(
|
||||
view: HijriDatePickerView.month,
|
||||
monthViewSettings: HijriDatePickerMonthViewSettings(firstDayOfWeek: 1),
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Week number
|
||||
Display the Week number of the year in the month view by setting the [showWeekNumber](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings/showWeekNumber.html) property of the `HijriDatePickerMonthViewSettings` as true, and by default it is false. The Week numbers will be displayed based on the ISO standard.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfHijriDateRangePicker(
|
||||
view: HijriDatePickerView.month,
|
||||
monthViewSettings: const HijriDatePickerMonthViewSettings(
|
||||
showWeekNumber: true,
|
||||
),
|
||||
),
|
||||
));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Week number appearance
|
||||
Customize the Week number style by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle/textStyle.html) and the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle/backgroundColor.html) properties of the [DateRangePickerWeekNumberStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle-class.html).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfHijriDateRangePicker(
|
||||
view: HijriDatePickerView.month,
|
||||
monthViewSettings: const HijriDatePickerMonthViewSettings(
|
||||
showWeekNumber: true,
|
||||
weekNumberStyle: DateRangePickerWeekNumberStyle(
|
||||
textStyle: TextStyle(fontStyle: FontStyle.italic),
|
||||
backgroundColor: Colors.purple),
|
||||
),
|
||||
),
|
||||
));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
|
||||
## Date selection
|
||||
The `SfHijriDateRangePicker` supports selecting single, multiple, and range of dates. It also supports the programmatic selection.
|
||||
|
||||
The selected date or range details can be obtained using the [onSelectionChanged ](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/onSelectionChanged.html)callback of Hijri date range picker. The callback will return the [DateRangePickerSelectionChangedArgs](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionChangedArgs-class.html), 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: SfHijriDateRangePicker(
|
||||
view: HijriDatePickerView.month,
|
||||
selectionMode: DateRangePickerSelectionMode.range,
|
||||
onSelectionChanged: _onSelectionChanged,
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Programmatic date navigation
|
||||
You can programmatically navigate date in the Hijri date picker widget by using the [displayDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController/displayDate.html) property from [HijriDatePickerController](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController-class.html).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
class MyAppState extends State<MyApp> {
|
||||
HijriDatePickerController _controller = HijriDatePickerController();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_controller.displayDate = HijriDateTime(1445, 02, 05);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfHijriDateRangePicker(
|
||||
controller: _controller,
|
||||
view: HijriDatePickerView.month,
|
||||
)),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Programmatic view navigation
|
||||
You can programmatically navigate to any view in the Hijri date picker widget by using the [view](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerController/view.html) property of `HijriDatePickerController.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
class MyAppState extends State<MyApp> {
|
||||
HijriDatePickerController _controller = HijriDatePickerController();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_controller.view = HijriDatePickerView.month;
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfHijriDateRangePicker(
|
||||
controller: _controller,
|
||||
)),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Programmatic date selection
|
||||
You can select dates programmatically on the Hijri date picker widget by using the `HijriDatePickerController`.
|
||||
|
||||
For selection [refer](https://help.syncfusion.com/flutter/daterangepicker/selections).
|
||||
|
||||
### Single selection
|
||||
You can select the date programmatically by using the [selectedDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedDate.html) property of `HijriDatePickerController`. It is only applicable when the `selectionMode` is set to `DateRangePickerSelectionMode.single`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
class MyAppState extends State<MyApp> {
|
||||
HijriDatePickerController _controller = HijriDatePickerController();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_controller.view = HijriDatePickerView.month;
|
||||
_controller.selectedDate = HijriDateTime.now().add(Duration(days: 1));
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfHijriDateRangePicker(
|
||||
selectionMode: DateRangePickerSelectionMode.single,
|
||||
controller: _controller,
|
||||
)),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
### Multi selection
|
||||
You can select the multiple dates programmatically by using the [selectedDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedDates.html) property of `HijriDatePickerController`. It is only applicable when the selectionMode is set to `DateRangePickerSelectionMode.multiple`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
class MyAppState extends State<MyApp> {
|
||||
HijriDatePickerController _controller = HijriDatePickerController();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_controller.view = HijriDatePickerView.month;
|
||||
_controller.selectedDates = <HijriDateTime>[
|
||||
HijriDateTime.now().add(Duration(days: 2)),
|
||||
HijriDateTime.now().add(Duration(days: 4)),
|
||||
HijriDateTime.now().add(Duration(days: 7)),
|
||||
HijriDateTime.now().add(Duration(days: 11))
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfHijriDateRangePicker(
|
||||
selectionMode: DateRangePickerSelectionMode.multiple,
|
||||
controller: _controller,
|
||||
)),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
### Range selection
|
||||
You can select the single date range programmatically by using the [selectedRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedRange.html) property of `HijriDatePickerController`. It is only applicable when the `selectionMode` is set to `DateRangePickerSelectionMode.range`.
|
||||
|
||||
Use the [HijriDateRange](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDateRange-class.html) to define the date range for the Hijri date picker.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
class MyAppState extends State<MyApp> {
|
||||
HijriDatePickerController _controller = HijriDatePickerController();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_controller.view = HijriDatePickerView.month;
|
||||
_controller.selectedRange = HijriDateRange(
|
||||
HijriDateTime(1442, 03, 01), HijriDateTime(1442, 03, 05));
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfHijriDateRangePicker(
|
||||
selectionMode: DateRangePickerSelectionMode.range,
|
||||
controller: _controller,
|
||||
)),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
### Multi-range selection
|
||||
You can select more than one date range programmatically by using the [selectedRanges](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerController/selectedRanges.html) property of `HijriDatePickerController`. It is only applicable when the `selectionMode` is set to `DateRangePickerSelectionMode.multiRange`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
class MyAppState extends State<MyApp> {
|
||||
HijriDatePickerController _controller = HijriDatePickerController();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_controller.view = HijriDatePickerView.month;
|
||||
_controller.selectedRanges = <HijriDateRange>[
|
||||
HijriDateRange(HijriDateTime.now().add(Duration(days: 4)),
|
||||
HijriDateTime.now().add(Duration(days: 9))),
|
||||
HijriDateRange(HijriDateTime.now().add(Duration(days: 11)),
|
||||
HijriDateTime.now().add(Duration(days: 16)))
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfHijriDateRangePicker(
|
||||
selectionMode: DateRangePickerSelectionMode.multiRange,
|
||||
controller: _controller,
|
||||
)),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
### Extendable range selection
|
||||
Extend the selected range with the new selected date in any date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode-class.html) to `extendableRange`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
class MyAppState extends State<MyApp> {
|
||||
final HijriDatePickerController _controller = HijriDatePickerController();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_controller.view = HijriDatePickerView.month;
|
||||
_controller.selectedRange = HijriDateRange(
|
||||
HijriDateTime.now(), HijriDateTime.now().add(const Duration(days: 2)));
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfHijriDateRangePicker(
|
||||
selectionMode: DateRangePickerSelectionMode.extendableRange,
|
||||
controller: _controller,
|
||||
),
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
>**NOTE**
|
||||
* The hovering effect which occurs while extending the range will not be displayed when the `DateRangePickerNavigationMode` is set as `DateRangePickerNavigationMode.scroll`.
|
||||
|
||||
## Month cell customization
|
||||
Customize the Hijri date picker month view by using the [monthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/monthCellStyle.html) property of `SfHijriDateRangePicker`.
|
||||
|
||||
• **Current month dates**: You can customize the current month date’s text style and background of the `SfHijriDateRangePicker` by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/textStyle.html) and [cellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/cellDecoration.html) properties of [HijriDatePickerMonthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle-class.html).
|
||||
• **Today date**: You can customize the today date text style and background of the `SfHijriDateRangePicker` by using the [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/todayTextStyle.html) and [todayCellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/todayCellDecoration.html).
|
||||
• **Blackout Dates**: You can customize the blackout dates text style and background of the `SfHijriDateRangePicker` by using the [blackoutDateTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/blackoutDateTextStyle.html) and [blackoutDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/blackoutDatesDecoration.html).
|
||||
• **Disabled dates**: Disable the dates text style and background beyond of the [minDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/minDate.html) and [maxDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/maxDate.html) in `SfHijriDateRangePicker` by using the [disableDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/disabledDatesTextStyle.html) and [disableDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/disabledDatesDecoration.html).
|
||||
• **Special Dates**: You can add special dates to the `SfHijriDateRangePicker` by using the [specialDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings/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/HijriDatePickerMonthCellStyle/specialDatesTextStyle.html) and [specialDatesDecoration]().
|
||||
• **Weekend Dates**: You can change the weekend dates to `SfHijriDateRangePicker` by using the [weekendDays](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthViewSettings/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/HijriDatePickerMonthCellStyle/weekendTextStyle.html) and [weekendDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerMonthCellStyle/weekendDatesDecoration.html).
|
||||
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfHijriDateRangePicker(
|
||||
view: HijriDatePickerView.month,
|
||||
monthViewSettings: HijriDatePickerMonthViewSettings(
|
||||
blackoutDates: <HijriDateTime>[HijriDateTime(1442, 02, 05)],
|
||||
weekendDays: <int>[6, 7],
|
||||
specialDates: <HijriDateTime>[
|
||||
HijriDateTime(1442, 02, 10),
|
||||
HijriDateTime(1442, 02, 15)
|
||||
],
|
||||
),
|
||||
monthCellStyle: HijriDatePickerMonthCellStyle(
|
||||
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 %}
|
||||
|
||||
|
||||
|
||||
## Year cell customization
|
||||
You can customize the calendar year, and decade view by using the [yearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker/yearCellStyle.html) of `SfHijriDateRangePicker`.
|
||||
|
||||
• **Current year**: You can customize the current month dates text style and background of the `SfHijriDateRangePicker` by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/textStyle.html) and [cellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/cellDecoration.html) properties of [HijriDatePickerYearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle-class.html).
|
||||
• **Disabled dates**: Disable the dates text style and background of the `SfHijriDateRangePicker` by using the [disableDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/disabledDatesTextStyle.html) and [disableDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/disabledDatesDecoration.html).
|
||||
• **Today date**: You can customize the today date text style and background of the `SfHijriDateRangePicker` by using the [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/todayTextStyle.html) and [todayCellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/HijriDatePickerYearCellStyle/todayCellDecoration.html).
|
||||
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfHijriDateRangePicker(
|
||||
view: HijriDatePickerView.year,
|
||||
yearCellStyle: HijriDatePickerYearCellStyle(
|
||||
disabledDatesDecoration: BoxDecoration(
|
||||
color: const Color(0xFFDFDFDF),
|
||||
border: Border.all(color: const Color(0xFFB6B6B6), width: 1),
|
||||
shape: BoxShape.circle),
|
||||
disabledDatesTextStyle: 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 %}
|
||||
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
* [How to use Hijri date range picker (SfHijriDateRangePicker) in Flutter](https://www.syncfusion.com/kb/12200/how-to-use-hijri-date-range-picker-sfhijridaterangepicker-in-flutter)
|
||||
|
|
@ -0,0 +1,234 @@
|
|||
---
|
||||
layout: post
|
||||
title: Selections in Flutter Date Range Picker widget | Syncfusion
|
||||
description: Learn here all about Selections feature in Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget and more.
|
||||
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 %}
|
||||
|
||||
|
||||
|
||||
>**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` callback 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 %}
|
||||
|
||||
|
||||
|
||||
## 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 %}
|
||||
|
||||
|
||||
|
||||
>**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` callback 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 %}
|
||||
|
||||
|
||||
|
||||
## Extendable range selection
|
||||
Extend the selected range with the new selected date in any date range picker view by setting the [DateRangePickerSelectionMode](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerSelectionMode-class.html) to `extendableRange`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfDateRangePicker(
|
||||
view: DateRangePickerView.month,
|
||||
selectionMode: DateRangePickerSelectionMode.extendableRange,
|
||||
),
|
||||
));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
>**NOTE**
|
||||
* The hovering effect which occurs while extending the range will not be displayed when the `DateRangePickerNavigationMode` is set as `DateRangePickerNavigationMode.scroll`.
|
||||
|
||||
|
||||
## Selection radius
|
||||
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 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 %}
|
||||
|
||||
|
||||
|
||||
## 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 %}
|
||||
|
||||
## See also
|
||||
|
||||
* [How to restrict swipe gesture for range selection in Flutter date range picker (SfDateRangePicker)?](https://www.syncfusion.com/kb/12117/how-to-restrict-swipe-gesture-for-range-selection-in-flutter-date-range-picker)
|
||||
* [How to change the selection radius in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12230/how-to-change-the-selection-radius-in-the-flutter-date-range-picker-sfdaterangepicker)
|
||||
* [How to add an image as background in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12233/how-to-add-an-image-as-background-in-the-flutter-date-range-picker-sfdaterangepicker)
|
||||
* [How to get the start and end date of the selected range in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12248/how-to-get-the-start-and-end-date-of-the-selected-range-in-the-flutter-date-range-picker)
|
||||
* [How to change the selection shape in Flutter date range picker (SfDateRangePicker)?](https://www.syncfusion.com/kb/11900/how-to-change-the-selection-shape-in-flutter-date-range-picker-sfdaterangepicker)
|
||||
* [How to deselect the selected date in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12138/how-to-deselect-the-selected-date-in-the-flutter-date-range-picker-sfdaterangepicker)
|
||||
* [How to select previous or next dates based on the selected date in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12354/how-to-select-previous-or-next-dates-based-on-the-selected-date-in-the-flutter-date-range)
|
||||
* [How to select all days when clicking on the day header in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12353/how-to-select-all-days-when-clicking-on-the-day-header-in-the-flutter-date-range-picker)
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
---
|
||||
layout: post
|
||||
title: Views in Flutter Date Range Picker widget | Syncfusion
|
||||
description: Learn here all about Views feature of Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget and more.
|
||||
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 %}
|
||||
|
||||
|
||||
|
||||
|
||||
### Week number
|
||||
|
||||
Display the Week number of the year in the MonthView by setting the [showWeekNumber](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/showWeekNumber.html) property of the `DateRangePickerMonthViewSettings` as true, and by default it is false. Week numbers will be displayed based on the ISO standard.
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfDateRangePicker(
|
||||
view: DateRangePickerView.month,
|
||||
monthViewSettings: const DateRangePickerMonthViewSettings(
|
||||
showWeekNumber: true,
|
||||
),
|
||||
),
|
||||
));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
### Week number appearance
|
||||
Customize the Week number style by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle/textStyle.html) and the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle/backgroundColor.html) properties of the [DateRangePickerWeekNumberStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerWeekNumberStyle-class.html).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfDateRangePicker(
|
||||
view: DateRangePickerView.month,
|
||||
monthViewSettings: const DateRangePickerMonthViewSettings(
|
||||
showWeekNumber: true,
|
||||
weekNumberStyle: DateRangePickerWeekNumberStyle(
|
||||
textStyle: TextStyle(fontStyle: FontStyle.italic),
|
||||
backgroundColor: Colors.purple),
|
||||
),
|
||||
),
|
||||
));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
|
||||
## Year view
|
||||
This displays the entire month of a particular year. By default, the current year will be displayed on loading. Navigate between the 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 %}
|
||||
|
||||
|
||||
|
||||
## 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 %}
|
||||
|
||||
|
||||
|
||||
## 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 %}
|
||||
|
||||
|
||||
|
||||
## 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 %}
|
||||
|
||||
|
||||
|
||||
## 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 %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfDateRangePicker(
|
||||
enableMultiView: true,
|
||||
viewSpacing: 20,
|
||||
headerStyle: DateRangePickerHeaderStyle(
|
||||
textAlign: TextAlign.center
|
||||
),
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
### Vertical picker
|
||||
You can arrange the two date range picker views in the vertical direction by setting the [navigationDirection](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/navigationDirection.html) as `DateRangePickerNavigationDirection.vertical` in the `SfDateRangePicker`.`
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfDateRangePicker(
|
||||
enableMultiView: true,
|
||||
navigationDirection: DateRangePickerNavigationDirection.vertical,
|
||||
viewSpacing: 10,
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## 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)
|
||||
* [How to show two pickers vertically in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12193/how-to-show-two-pickers-vertically-in-the-flutter-date-range-picker-sfdaterangepicker)
|
||||
* [How to change the number of weeks in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12167/how-to-change-the-number-of-weeks-in-the-flutter-date-range-picker-sfdaterangepicker)
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility in Flutter Event Calendar widget | Syncfusion
|
||||
description: Learn here all about accessibility feature of Syncfusion Flutter Calendar (SfCalendar) widget and more.
|
||||
platform: flutter
|
||||
control: SfCalendar
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Accessibility in Flutter Event Calendar (SfCalendar)
|
||||
|
||||
## Screen reader support
|
||||
|
||||
The `SfCalendar` 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
|
||||
|
||||
| View | Format | Example |
|
||||
|-------------------|------------------------------|-----------------------------------------------|
|
||||
| Month cell | EEE, dd/MMMM/yyyy | Thursday the 2nd of January 2020 |
|
||||
| No events | EEE, dd/MMMM/yyyy, No events | Wednesday the 15th of January 2020, No events |
|
||||
| No selected dates | No selected date | No selected date |
|
||||
| Week number panel | Week, Week number | Week 26 |
|
||||
|
||||
### TimeSlot view
|
||||
|
||||
| View | Format | Example |
|
||||
|------------------------|--------------------------------------------|------------------------------------------------|
|
||||
| Timeslot view | hh mm a dd/MMMM/yyyy | 11AM the 28th of January 2020 |
|
||||
| All day expander icons | Expand all day panelCollapse all day panel | Expand all day sectionCollapse all day section |
|
||||
| All day expander view | + appointment Count | +3 |
|
||||
| Week number panel | Week, Week number | Week 26 |
|
||||
|
||||
|
||||
### Appointments
|
||||
|
||||
| View | Format | Example |
|
||||
|-------------------------------|-----------------------------------------------------|------------------------------------------------------------------------------|
|
||||
| Normal appointment | Subject hh mm a – hh mm a dd/MMMM/yyyy | Yoga therapy 10AM to 11AM the 29th of January 2020 |
|
||||
| Month agenda view appointment | Subject hh mm a – hh mm a dd/MMMM/yyyy | Plan execution 9AM to 11AM the 23rd January 2020 |
|
||||
| All day appointment | Subject All day | General meeting all day |
|
||||
| Spanning appointment | Subject hh mm a dd/MMMM/yyyy - hh mm a dd/MMMM/yyyy | General meeting 12AM the 23rd of January 2020 – 1AM the 30th of January 2020 |
|
||||
|
||||
|
||||
### Headers
|
||||
|
||||
| View | Format | Example |
|
||||
|--------------------------|-------------------------|--------------------------------------|
|
||||
| Header | MMMM yyyy | January 2020 |
|
||||
| Timeline week header | dd/MMMM to dd/MMMM/yyyy | 15th of January to 21th January 2020 |
|
||||
| Timeline workweek header | dd/MMMM to dd/MMMM/yyyy | 16th of January to 20th January 2020 |
|
||||
| Month view header | EEE | Monday |
|
||||
| TimeSlot view header | EEE, dd/MMMM/yyyy | Wednesday the 29th of January 2020 |
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
The `SfCalendar` [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 UI elements.
|
||||
|
||||
The following APIs allow you to customize the colors of the following elements.
|
||||
* [todayHighlightColor](https://help.syncfusion.com/flutter/calendar/getting-started#today-highlight-color)
|
||||
* [cellBorderColor](https://help.syncfusion.com/flutter/calendar/getting-started#cell-border-color)
|
||||
* [backgroundColor](https://help.syncfusion.com/flutter/calendar/getting-started#background-color)
|
||||
* [selectionDecoration](https://help.syncfusion.com/flutter/calendar/getting-started#selection-decoration)
|
||||
* [agendasStyle](https://help.syncfusion.com/flutter/calendar/month-view#agenda-view-appearance)
|
||||
* [monthCellStyle](https://help.syncfusion.com/flutter/calendar/month-view#month-cell-appearance)
|
||||
* [dayHeaderSettings](https://help.syncfusion.com/flutter/calendar/schedule-view#day-header-customization)
|
||||
* [weekHeaderSettings](https://help.syncfusion.com/flutter/calendar/schedule-view#week-header-customization)
|
||||
* [monthHeaderSettings](https://help.syncfusion.com/flutter/calendar/schedule-view#month-header-customization)
|
||||
* [resourceViewSettings](https://help.syncfusion.com/flutter/calendar/resource-view#customization)
|
||||
|
||||
## Large fonts
|
||||
|
||||
The `SfCalendar` font size can be adjusted automatically based on device settings and the font size scaled based on the `MediaQueryData.textScaleFactor`. And also it allows to change the font size of all UI elements in the calendar.
|
||||
* [appointmentTextStyle](https://help.syncfusion.com/flutter/calendar/appointments#appearance-customization)
|
||||
* [timeTextStyle](https://help.syncfusion.com/flutter/calendar/timeslot-views#time-text-appearance)
|
||||
* [dateTextStyle](https://help.syncfusion.com/flutter/calendar/schedule-view#day-header-customization)
|
||||
* [dayTextStyle](https://help.syncfusion.com/flutter/calendar/schedule-view#day-header-customization)
|
||||
* [displayNameText style](https://help.syncfusion.com/flutter/calendar/resource-view#customization)
|
||||
|
||||
## Keyboard navigation
|
||||
|
||||
The following keyboard interactions are supported by the `SfCalendar`.
|
||||
|
||||
|
||||
| Key | Description |
|
||||
|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| Up arrow | Moves selection to the next calendar cell directly above the currently selected time slot |
|
||||
| Down arrow | Moves selection to the next calendar cell directly below the currently selected time slot |
|
||||
| Right arrow | Moves selection to the same time slot on the next day |
|
||||
| Left arrow | Moves selection to the same time slot on the previous day |
|
||||
| Tab | Focuses the next clickable element, except appointments and cells |
|
||||
| Shift + tab | Focuses the previous clickable element, except appointment and cells |
|
||||
| Alt + number | Calendar view changes in the order of day, week, work week, month, timeline and schedule. Also view change will be restricted if it is not mentioned in the allowed views property of the calendar |
|
||||
| Ctrl + left arrow | To navigate to the previous view |
|
||||
| Ctrl + right arrow| To navigate to the next view |
|
||||
| Page up/down | Vertically scrolls through the timeslot views |
|
||||
|
||||
### Appointments
|
||||
|
||||
| Key | Description |
|
||||
|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| Tab | Moves selection to the next appointment from the currently selected appointment. If no appointment is selected, then use the tab traversal and move the focus to the next clickable item |
|
||||
| Shift + Tab | Moves selection to the previous appointment from the currently selected appointment. If no appointment is selected, then use the tab traversal and move the focus to the next clickable item |
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Appointments | events in Syncfusion Flutter Calendar | Scheduler
|
||||
description: Learn how to plan, configure and manage all day, recurrence and spanning appointments in Syncfusion Flutter Calendar.
|
||||
title: Appointments in Flutter Event Calendar widget | Syncfusion | Scheduler
|
||||
description: Learn here all about Appointments feature of Syncfusion Flutter Event Calendar (SfCalendar) widget and more.
|
||||
platform: flutter
|
||||
control: SfCalendar
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Appointments
|
||||
# Appointments in Flutter Event Calendar (SfCalendar)
|
||||
|
||||
SfCalendar widget has a built-in capability to handle the appointment arrangement internally based on the [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html). [Appointment](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment-class.html) is a class, which holds the details about the appointment to be rendered in calendar.
|
||||
|
||||
|
|
@ -82,37 +82,37 @@ class MeetingDataSource extends CalendarDataSource {
|
|||
|
||||
@override
|
||||
DateTime getStartTime(int index) {
|
||||
return appointments[index].from;
|
||||
return appointments![index].from;
|
||||
}
|
||||
|
||||
@override
|
||||
DateTime getEndTime(int index) {
|
||||
return appointments[index].to;
|
||||
return appointments![index].to;
|
||||
}
|
||||
|
||||
@override
|
||||
bool isAllDay(int index) {
|
||||
return appointments[index].isAllDay;
|
||||
return appointments![index].isAllDay;
|
||||
}
|
||||
|
||||
@override
|
||||
String getSubject(int index) {
|
||||
return appointments[index].eventName;
|
||||
return appointments![index].eventName;
|
||||
}
|
||||
|
||||
@override
|
||||
String getStartTimeZone(int index) {
|
||||
return appointments[index].startTimeZone;
|
||||
return appointments![index].startTimeZone;
|
||||
}
|
||||
|
||||
@override
|
||||
String getEndTimeZone(int index) {
|
||||
return appointments[index].endTimeZone;
|
||||
return appointments![index].endTimeZone;
|
||||
}
|
||||
|
||||
@override
|
||||
Color getColor(int index) {
|
||||
return appointments[index].background;
|
||||
return appointments![index].background;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -138,7 +138,7 @@ You can create a custom class `Meeting` with mandatory fields `from`, and `to`.
|
|||
{% highlight Dart %}
|
||||
|
||||
class Meeting {
|
||||
Meeting({this.eventName, this.from, this.to, this.background, this.isAllDay});
|
||||
Meeting({this.eventName = '', required this.from, required this.to, required this.background, this.isAllDay = false});
|
||||
|
||||
String eventName;
|
||||
DateTime from;
|
||||
|
|
@ -162,37 +162,37 @@ class MeetingDataSource extends CalendarDataSource {
|
|||
|
||||
@override
|
||||
DateTime getStartTime(int index) {
|
||||
return appointments[index].from;
|
||||
return appointments![index].from;
|
||||
}
|
||||
|
||||
@override
|
||||
DateTime getEndTime(int index) {
|
||||
return appointments[index].to;
|
||||
return appointments![index].to;
|
||||
}
|
||||
|
||||
@override
|
||||
bool isAllDay(int index) {
|
||||
return appointments[index].isAllDay;
|
||||
return appointments![index].isAllDay;
|
||||
}
|
||||
|
||||
@override
|
||||
String getSubject(int index) {
|
||||
return appointments[index].eventName;
|
||||
return appointments![index].eventName;
|
||||
}
|
||||
|
||||
@override
|
||||
String getStartTimeZone(int index) {
|
||||
return appointments[index].startTimeZone;
|
||||
return appointments![index].startTimeZone;
|
||||
}
|
||||
|
||||
@override
|
||||
String getEndTimeZone(int index) {
|
||||
return appointments[index].endTimeZone;
|
||||
return appointments![index].endTimeZone;
|
||||
}
|
||||
|
||||
@override
|
||||
Color getColor(int index) {
|
||||
return appointments[index].background;
|
||||
return appointments![index].background;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -297,11 +297,11 @@ The `recurrenceRule` is a string value (RRULE) that contains the details of the
|
|||
| FREQ | Maintains the Repeat type value of the appointment. (Example: Daily, Weekly, Monthly, Yearly, Every week day) Example: FREQ=DAILY;INTERVAL=1 |
|
||||
| INTERVAL | Maintains the interval value of the appointments. For example, when you create the daily appointment at an interval of 2, the appointments are rendered on the days Monday, Wednesday and Friday. (creates the appointment on all days by leaving the interval of one day gap) Example: FREQ=DAILY;INTERVAL=1 |
|
||||
| COUNT | It holds the appointment’s count value. For example, when the recurrence appointment count value is 10, it means 10 appointments are created in the recurrence series. Example: FREQ=DAILY;INTERVAL=1;COUNT=10 |
|
||||
| UNTIL | This property is used to store the recurrence end date value. For example, when you set the end date of appointment as 6/30/2020, the UNTIL property holds the end date value when the recurrence actually ends. Example: FREQ=DAILY;INTERVAL=1;UNTIL=8/25/2020 |
|
||||
| UNTIL | This property is used to store the recurrence end date value. For example, when you set the end date of appointment as 6/30/2020, the UNTIL property holds the end date value when the recurrence actually ends. Example: FREQ=DAILY;INTERVAL=1;UNTIL=20200827T183000Z |
|
||||
| BYDAY | It holds the “DAY” values of an appointment to render.For example, when you create the weekly appointment, select the day(s) from the day options (Monday/Tuesday/Wednesday/Thursday/Friday/Saturday/Sunday). When Monday is selected, the first two letters of the selected day “MO” is stored in the “BYDAY” property. When you select multiple days, the values are separated by commas. Example: FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,WE;COUNT=10 |
|
||||
| BYMONTHDAY | This property is used to store the date value of the Month while creating the Month recurrence appointment. For example, when you create a Monthly recurrence appointment in the date 3, it means the BYMONTHDAY holds the value 3 and creates the appointment on 3rd day of every month. Example: FREQ=MONTHLY;BYMONTHDAY=3;INTERVAL=1;COUNT=10 |
|
||||
| BYMONTH | This property is used to store the index value of the selected Month while creating the yearly appointments. For example, when you create the yearly appointment in the Month June, it means the index value for June month is 6 and it is stored in the BYMONTH field. The appointment is created on every 6th month of a year. Example: FREQ=YEARLY;BYMONTHDAY=16;BYMONTH=6;INTERVAL=1;COUNT=10 |
|
||||
| BYSETPOS | This property is used to store the index value of the week. For example, when you create the monthly appointment in second week of the month, the index value of the second week (2) is stored in BYSETPOS. Example: FREQ=MONTHLY;BYDAY=MO;BYSETPOS=2;UNTIL=8/11/2020 |
|
||||
| BYSETPOS | This property is used to store the index value of the week. For example, when you create the monthly appointment in second week of the month, the index value of the second week (2) is stored in BYSETPOS. Example: FREQ=MONTHLY;BYDAY=MO;BYSETPOS=2;UNTIL=20200810T183000Z . If the property value is set to -1 and -2, the appointment will be added to the last week and second last week of the month.|
|
||||
|
||||
### Adding recurrence appointment
|
||||
|
||||
|
|
@ -357,11 +357,11 @@ For creating custom recurrence appointment, you need to create a custom class `M
|
|||
|
||||
class Meeting {
|
||||
Meeting(
|
||||
{this.eventName,
|
||||
this.from,
|
||||
this.to,
|
||||
this.background,
|
||||
this.isAllDay,
|
||||
{this.eventName = '',
|
||||
required this.from,
|
||||
required this.to,
|
||||
required this.background,
|
||||
this.isAllDay = false,
|
||||
this.recurrenceRule});
|
||||
|
||||
String eventName;
|
||||
|
|
@ -369,7 +369,7 @@ class Meeting {
|
|||
DateTime to;
|
||||
Color background;
|
||||
bool isAllDay;
|
||||
String recurrenceRule;
|
||||
String? recurrenceRule;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
@ -387,32 +387,32 @@ class MeetingDataSource extends CalendarDataSource {
|
|||
|
||||
@override
|
||||
DateTime getStartTime(int index) {
|
||||
return appointments[index].from;
|
||||
return appointments![index].from;
|
||||
}
|
||||
|
||||
@override
|
||||
DateTime getEndTime(int index) {
|
||||
return appointments[index].to;
|
||||
return appointments![index].to;
|
||||
}
|
||||
|
||||
@override
|
||||
bool isAllDay(int index) {
|
||||
return appointments[index].isAllDay;
|
||||
return appointments![index].isAllDay;
|
||||
}
|
||||
|
||||
@override
|
||||
String getSubject(int index) {
|
||||
return appointments[index].eventName;
|
||||
return appointments![index].eventName;
|
||||
}
|
||||
|
||||
@override
|
||||
Color getColor(int index) {
|
||||
return appointments[index].background;
|
||||
return appointments![index].background;
|
||||
}
|
||||
|
||||
@override
|
||||
String getRecurrenceRule(int index) {
|
||||
return appointments[index].recurrenceRule;
|
||||
return appointments![index].recurrenceRule;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -457,41 +457,41 @@ class MeetingDataSource extends CalendarDataSource {
|
|||
|
||||
@override
|
||||
DateTime getStartTime(int index) {
|
||||
return appointments[index].from;
|
||||
return appointments![index].from;
|
||||
}
|
||||
|
||||
@override
|
||||
DateTime getEndTime(int index) {
|
||||
return appointments[index].to;
|
||||
return appointments![index].to;
|
||||
}
|
||||
|
||||
@override
|
||||
bool isAllDay(int index) {
|
||||
return appointments[index].isAllDay;
|
||||
return appointments![index].isAllDay;
|
||||
}
|
||||
|
||||
@override
|
||||
String getSubject(int index) {
|
||||
return appointments[index].eventName;
|
||||
return appointments![index].eventName;
|
||||
}
|
||||
|
||||
@override
|
||||
Color getColor(int index) {
|
||||
return appointments[index].background;
|
||||
return appointments![index].background;
|
||||
}
|
||||
|
||||
@override
|
||||
String getRecurrenceRule(int index) {
|
||||
return appointments[index].recurrenceRule;
|
||||
return appointments![index].recurrenceRule;
|
||||
}
|
||||
}
|
||||
|
||||
class Meeting {
|
||||
Meeting({this.eventName,
|
||||
this.from,
|
||||
this.to,
|
||||
this.background,
|
||||
this.isAllDay,
|
||||
Meeting({this.eventName = '',
|
||||
required this.from,
|
||||
required this.to,
|
||||
required this.background,
|
||||
this.isAllDay = false,
|
||||
this.recurrenceRule});
|
||||
|
||||
String eventName;
|
||||
|
|
@ -499,7 +499,7 @@ class Meeting {
|
|||
DateTime to;
|
||||
Color background;
|
||||
bool isAllDay;
|
||||
String recurrenceRule;
|
||||
String? recurrenceRule;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
@ -624,16 +624,16 @@ To add the exception dates in the recurrence series of custom appointment, add t
|
|||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: Container(
|
||||
child: SfCalendar(
|
||||
view: CalendarView.week,
|
||||
dataSource: _getCalendarDataSource(),
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: Container(
|
||||
child: SfCalendar(
|
||||
view: CalendarView.week,
|
||||
dataSource: _getCalendarDataSource(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
MeetingDataSource _getCalendarDataSource() {
|
||||
|
|
@ -659,47 +659,47 @@ class MeetingDataSource extends CalendarDataSource {
|
|||
|
||||
@override
|
||||
DateTime getStartTime(int index) {
|
||||
return appointments[index].from;
|
||||
return appointments![index].from;
|
||||
}
|
||||
|
||||
@override
|
||||
DateTime getEndTime(int index) {
|
||||
return appointments[index].to;
|
||||
return appointments![index].to;
|
||||
}
|
||||
|
||||
@override
|
||||
bool isAllDay(int index) {
|
||||
return appointments[index].isAllDay;
|
||||
return appointments![index].isAllDay;
|
||||
}
|
||||
|
||||
@override
|
||||
String getSubject(int index) {
|
||||
return appointments[index].eventName;
|
||||
return appointments![index].eventName;
|
||||
}
|
||||
|
||||
@override
|
||||
Color getColor(int index) {
|
||||
return appointments[index].background;
|
||||
return appointments![index].background;
|
||||
}
|
||||
|
||||
@override
|
||||
String getRecurrenceRule(int index) {
|
||||
return appointments[index].recurrenceRule;
|
||||
return appointments![index].recurrenceRule;
|
||||
}
|
||||
|
||||
@override
|
||||
List<DateTime> getRecurrenceExceptionDates(int index) {
|
||||
return appointments[index].exceptionDates;
|
||||
return appointments![index].exceptionDates;
|
||||
}
|
||||
}
|
||||
|
||||
class Meeting {
|
||||
Meeting(
|
||||
{this.eventName,
|
||||
this.from,
|
||||
this.to,
|
||||
this.background,
|
||||
this.isAllDay,
|
||||
{this.eventName = '',
|
||||
required this.from,
|
||||
required this.to,
|
||||
required this.background,
|
||||
this.isAllDay = false,
|
||||
this.recurrenceRule,
|
||||
this.exceptionDates});
|
||||
|
||||
|
|
@ -708,8 +708,8 @@ class Meeting {
|
|||
DateTime to;
|
||||
Color background;
|
||||
bool isAllDay;
|
||||
String recurrenceRule;
|
||||
List<DateTime> exceptionDates;
|
||||
String? recurrenceRule;
|
||||
List<DateTime>? exceptionDates;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
@ -718,8 +718,67 @@ class Meeting {
|
|||
>**NOTE**
|
||||
* Exception dates should be Universal Time Coordinates (UTC) time zone.
|
||||
|
||||
### Add exception appointment to the recurrence series
|
||||
|
||||
Add an exception appointment that is changed or modified occurrence of the recurrence pattern appointment to the `dateSource` of the `SfCalendar`. To add a changed occurrence, ensure to set the [RecurrenceId](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/recurrenceId.html) of that occurrence, and add the date of that occurrence to the [RecurrenceExceptionDates](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/recurrenceExceptionDates.html) of recurrence pattern appointment. The `RecurrenceId` of the changed occurrence should hold the exact recurrence pattern appointment [Id](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/id.html). We can get the type of appointment from the [appointmentType](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/appointmentType.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: Container(
|
||||
child: SfCalendar(
|
||||
view: CalendarView.week,
|
||||
dataSource: _getDataSource(),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
AppointmentDataSource _getDataSource() {
|
||||
final List<Appointment> appointments = <Appointment>[];
|
||||
final DateTime exceptionDate = DateTime(2021, 04, 20);
|
||||
|
||||
final Appointment recurrenceAppointment = Appointment(
|
||||
startTime: DateTime(2021, 04, 12, 10),
|
||||
endTime: DateTime(2021, 04, 12, 12),
|
||||
subject: 'Scrum meeting',
|
||||
id: '01',
|
||||
recurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=10',
|
||||
color: Colors.purple,
|
||||
recurrenceExceptionDates: <DateTime>[exceptionDate],
|
||||
);
|
||||
appointments.add(recurrenceAppointment);
|
||||
|
||||
final Appointment exceptionAppointment = Appointment(
|
||||
startTime: exceptionDate.add(const Duration(hours: 14)),
|
||||
endTime: exceptionDate.add(const Duration(hours: 15)),
|
||||
subject: 'Meeting',
|
||||
id: '02',
|
||||
color: Colors.pinkAccent,
|
||||
recurrenceId: recurrenceAppointment.id);
|
||||
|
||||
appointments.add(exceptionAppointment);
|
||||
|
||||
return AppointmentDataSource(appointments);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
>**NOTE**
|
||||
* The RecurrenceId of the changed occurrence should hold the exact recurrence pattern appointment Id.
|
||||
* The exception appointment should be a normal appointment, and should not be created as recurring appointment, since its occurrence is from recurrence pattern.
|
||||
* The exception recurrence appointment does not have the RecurrenceRule, so for an exception appointment, it will be reset to empty.
|
||||
|
||||
|
||||
## Appearance customization
|
||||
Calendar appointment text style can be customized by using the [appointmentTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/appointmentTextStyle.html) property of calendar.
|
||||
The Calendar appointment text style can be customized by using the [appointmentTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/appointmentTextStyle.html) property of the calendar.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
|
@ -747,3 +806,92 @@ Widget build(BuildContext context) {
|
|||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Appointment time format
|
||||
You can customize the displaying time format in the appointment widget in the month agenda view and schedule view of calendar by specifying the [appointmentTimeTextFormat](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/appointmentTimeTextFormat.html) property of the SfCalendar.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SfCalendar(
|
||||
view: CalendarView.month,
|
||||
dataSource: _calendarDataSource,
|
||||
appointmentTimeTextFormat: 'HH:mm',
|
||||
monthViewSettings: MonthViewSettings(
|
||||
showAgenda: true
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Appointment helper
|
||||
|
||||
### Get visible appointments
|
||||
|
||||
You can get the list of visible appointments by using the [getVisibleAppointments](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getVisibleAppointments.html) method available in the Calendar data source.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
initState() {
|
||||
_calendarController = CalendarController();
|
||||
_dataSource = _getCalendarDataSource();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfCalendar(
|
||||
view: CalendarView.month,
|
||||
controller: _calendarController,
|
||||
dataSource: _dataSource,
|
||||
onViewChanged: (ViewChangedDetails details) {
|
||||
List<DateTime> dates = details.visibleDates;
|
||||
String calendarTimeZone = '';
|
||||
List<Object> appointment = _dataSource.getVisibleAppointments(
|
||||
dates[0], calendarTimeZone,
|
||||
dates[(details.visibleDates.length) - 1]);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
>**NOTE**
|
||||
* The `startTime` is required for the starting date from which to obtain the appointments.
|
||||
|
||||
## See also
|
||||
|
||||
* [How to design and configure your appointment editor in event calendar widget Flutter](https://www.syncfusion.com/kb/11204/how-to-design-and-configure-your-appointment-editor-in-event-calendar-widget-flutter)
|
||||
* [How to get appointment details from the OnTap event of the Flutter event calendar](https://www.syncfusion.com/kb/10999/how-to-get-appointment-details-from-the-ontap-event-of-the-flutter-event-calendar)
|
||||
* [How to style the appointment in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12162/how-to-style-the-appointment-in-the-flutter-event-calendar-sfcalendar)
|
||||
* [How to exclude the dates from recurrence appointments in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12161/how-to-exclude-the-dates-from-recurrence-appointments-in-the-flutter-event-calendar)
|
||||
* [How to add recurring appointments until the specified date in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12158/how-to-add-recurring-appointments-until-the-specified-date-in-the-flutter-event-calendar)
|
||||
* [How to add the appointments to the Fire base database using appointment editor in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12110/how-to-add-the-appointments-to-the-firebase-database-using-appointment-editor-in-the)
|
||||
* [How to work with the Fire base database and the Flutter event calendar (SfCalendar) for appointments](https://www.syncfusion.com/kb/12067/how-to-work-with-the-firebase-database-and-the-flutter-event-calendar-sfcalendar-for)
|
||||
* [How to add google calendar events to the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12116/how-to-add-google-calendar-events-to-the-flutter-event-calendar-sfcalendar)
|
||||
* [How to add additional attributes in events in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12209/how-to-add-additional-attributes-in-events-in-the-flutter-event-calendar-sfcalendar)
|
||||
* [How to add the appointments using the onTap callback in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12300/how-to-add-the-appointments-using-the-ontap-callback-in-the-flutter-calendar)
|
||||
* [How to set the arbitrary height to appointments in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12279/how-to-set-the-arbitrary-height-to-appointments-in-the-flutter-event-calendar-sfcalendar)
|
||||
* [How to get the recurrence date collection in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12344/how-to-get-the-recurrence-date-collection-in-the-flutter-event-calendar-sfcalendar)
|
||||
* [How to get the recurrence properties from RRULE in the Flutter calendar](https://www.syncfusion.com/kb/12370/how-to-get-the-recurrence-properties-from-rrule-in-the-flutter-calendar)
|
||||
* [How to update blackout dates using onViewChanged callback in the Flutter calendar](https://www.syncfusion.com/kb/12368/how-to-update-blackout-dates-using-onviewchanged-callback-in-the-flutter-calendar)
|
||||
* [How to use navigation drawer for view switching in the Flutter calendar](https://www.syncfusion.com/kb/12361/how-to-use-navigation-drawer-for-view-switching-in-the-flutter-calendar)
|
||||
* [How to show the tapped appointment details on another page in the Flutter event calendar](https://www.syncfusion.com/kb/12358/how-to-show-the-tapped-appointment-details-on-another-page-in-the-flutter-event-calendar)
|
||||
* [How to load appointments On-Demand in Flutter Calendar](https://www.syncfusion.com/kb/12658/how-to-load-appointments-on-demand-in-flutter-calendar)
|
||||
* [How to load the google calendar events to the Flutter Calendar (SfCalendar) in iOS](https://www.syncfusion.com/kb/12647/how-to-load-the-google-calendar-events-to-the-flutter-calendar-sfcalendar-in-ios)
|
||||
* [How to perform the CRUD operations in Flutter Calendar using Fire base database](https://www.syncfusion.com/kb/12623/how-to-perform-the-crud-operations-in-flutter-calendar-using-firebase-database)
|
||||
* [How to add the appointments to Fire store Database using Flutter Calendar](https://www.syncfusion.com/kb/12616/how-to-add-the-appointments-to-firestore-database-using-flutter-calendar)
|
||||
* [How to perform the CRUD operations in Flutter Calendar using Fire store database](https://www.syncfusion.com/kb/12661/how-to-perform-the-crud-operations-in-flutter-calendar-using-firestore-database)
|
||||
|
|
@ -0,0 +1,370 @@
|
|||
---
|
||||
layout: post
|
||||
title: Builders in the Flutter Event Calendar widget | Syncfusion | Scheduler
|
||||
description: Learn here all about builders feature of Syncfusion Flutter Event Calendar (SfCalendar) widget and more.
|
||||
platform: flutter
|
||||
control: SfCalendar
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Builders in Flutter Event Calendar (SfCalendar)
|
||||
The calendar allows you to create a responsive UI with conditions based on a widget’s details, to design and create your custom view to the month cells and month header of schedule view in the calendar.
|
||||
|
||||
The calendar has two builders to create and assign your custom view:
|
||||
* Month cell builder
|
||||
* Schedule view month header builder
|
||||
|
||||
## Month cell builder
|
||||
The [MonthCellBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellBuilder.html) allows you to design your custom view and assign the view to the month cells of the calendar by returning an appropriate widget in the [monthCellBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/monthCellBuilder.html) of [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html).
|
||||
|
||||
[MonthCellDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/MonthCellDetails-class.html) - returns the details of the month cell.
|
||||
|
||||
`date` - returns the month cell date.
|
||||
`appointments` - returns the month cell appointments.
|
||||
`visibleDates` - returns the current view visible dates.
|
||||
`bounds` - returns the month cell bounds.
|
||||
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfCalendar(
|
||||
view: CalendarView.month,
|
||||
monthCellBuilder:
|
||||
(BuildContext buildContext, MonthCellDetails details) {
|
||||
final Color backgroundColor =
|
||||
_getMonthCellBackgroundColor(details.date);
|
||||
final Color defaultColor =
|
||||
Theme.of(context).brightness == Brightness.dark
|
||||
? Colors.black54
|
||||
: Colors.white;
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: backgroundColor,
|
||||
border: Border.all(color: defaultColor, width: 0.5)),
|
||||
child: Center(
|
||||
child: Text(
|
||||
details.date.day.toString(),
|
||||
style: TextStyle(color: _getCellTextColor(backgroundColor)),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
showDatePickerButton: true,
|
||||
monthViewSettings: MonthViewSettings(
|
||||
showTrailingAndLeadingDates: false,
|
||||
)),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Schedule view month header builder
|
||||
|
||||
You can design your custom view and assign this view to the month header of a schedule view in the calendar by returning an appropriate widget using the [scheduleViewMonthHeaderBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/scheduleViewMonthHeaderBuilder.html) in the `SfCalendar`.
|
||||
|
||||
[ScheduleViewMonthHeaderDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ScheduleViewMonthHeaderDetails-class.html) - returns the required details of the schedule view month header.
|
||||
|
||||
`date` - returns the header date.
|
||||
`bounds` - returns the header bounds.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfCalendar(
|
||||
view: CalendarView.schedule,
|
||||
dataSource: _calendarDataSource,
|
||||
scheduleViewMonthHeaderBuilder: (BuildContext buildContext,
|
||||
ScheduleViewMonthHeaderDetails details) {
|
||||
final String monthName = _getMonthDate(details.date.month);
|
||||
return Stack(
|
||||
children: [
|
||||
Image(
|
||||
image: ExactAssetImage('images/' + monthName + '.png'),
|
||||
fit: BoxFit.cover,
|
||||
width: details.bounds.width,
|
||||
height: details.bounds.height),
|
||||
Positioned(
|
||||
left: 55,
|
||||
right: 0,
|
||||
top: 20,
|
||||
bottom: 0,
|
||||
child: Text(
|
||||
monthName + ' ' + details.date.year.toString(),
|
||||
style: TextStyle(fontSize: 18),
|
||||
),
|
||||
)
|
||||
],
|
||||
);
|
||||
},
|
||||
showDatePickerButton: true),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Appointment builder
|
||||
The [CalendarAppointmentBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarAppointmentBuilder.html) allows you to design your custom view and assign the view to the appointment UI of the calendar by returning an appropriate widget in the [appointmentBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/appointmentBuilder.html) of `SfCalendar`.
|
||||
|
||||
[CalendarAppointmentDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarAppointmentDetails-class.html): Returns the details of the appointment view.
|
||||
|
||||
|
||||
`date`: The date associate with the appointment view.
|
||||
`appointments`: List of appointments associated with the appointment view.
|
||||
`bound`: Returns the appointment view bounds.
|
||||
`isMoreAppointmentRegion`: Determines whether the widget replaces the more appointment region.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
class MyAppState extends State<MyApp> {
|
||||
CalendarController _controller = CalendarController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfCalendar(
|
||||
view: CalendarView.day,
|
||||
dataSource: _getCalendarDataSource(),
|
||||
appointmentBuilder: (BuildContext context,
|
||||
CalendarAppointmentDetails details) {
|
||||
final Appointment meeting =
|
||||
details.appointments.first;
|
||||
final String image = _getImage();
|
||||
if (_controller.view != CalendarView.month &&
|
||||
_controller.view != CalendarView.schedule) {
|
||||
return Container(
|
||||
child: Column(
|
||||
children: [
|
||||
Container(
|
||||
padding: EdgeInsets.all(3),
|
||||
height: 50,
|
||||
alignment: Alignment.topLeft,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.rectangle,
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(5),
|
||||
topRight: Radius.circular(5)),
|
||||
color: meeting.color,
|
||||
),
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
meeting.subject,
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
maxLines: 3,
|
||||
softWrap: false,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
!kIsWeb
|
||||
? Container()
|
||||
: Text(
|
||||
'Time: ${DateFormat('hh:mm a').format(meeting.startTime)} - ' +
|
||||
'${DateFormat('hh:mm a').format(meeting.endTime)}',
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 10,
|
||||
),
|
||||
)
|
||||
],
|
||||
)),
|
||||
),
|
||||
Container(
|
||||
height: details.bounds.height - 70,
|
||||
padding: EdgeInsets.fromLTRB(3, 5, 3, 2),
|
||||
color: meeting.color.withOpacity(0.8),
|
||||
alignment: Alignment.topLeft,
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 5),
|
||||
child: Image(
|
||||
image:
|
||||
ExactAssetImage('images/' + image + '.png'),
|
||||
fit: BoxFit.contain,
|
||||
width: details.bounds.width,
|
||||
height: 60)),
|
||||
Text(
|
||||
meeting.notes!,
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 10,
|
||||
),
|
||||
)
|
||||
],
|
||||
)),
|
||||
),
|
||||
Container(
|
||||
height: 20,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.rectangle,
|
||||
borderRadius: BorderRadius.only(
|
||||
bottomLeft: Radius.circular(5),
|
||||
bottomRight: Radius.circular(5)),
|
||||
color: meeting.color,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
return Container(
|
||||
child: Text(meeting.subject),
|
||||
);
|
||||
},
|
||||
)),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
|
||||
## Time region builder
|
||||
The [TimeRegionBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegionBuilder.html) allows you to design your custom view and assign the view to the time region view of the calendar by returning an appropriate widget in the [timeRegionBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/timeRegionBuilder.html) of SfCalendar.
|
||||
|
||||
[TimeRegionDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegionDetails-class.html): Returns the details of the time region view.
|
||||
|
||||
`date`: The date associate with the time region view.
|
||||
`bound`: Returns the time region view bounds.
|
||||
`region`: The Region detail associated with the time region view.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
List<TimeRegion> _getTimeRegions() {
|
||||
final List<TimeRegion> regions = <TimeRegion>[];
|
||||
DateTime date = DateTime.now();
|
||||
date = DateTime(date.year, date.month, date.day, 12, 0, 0);
|
||||
regions.add(TimeRegion(
|
||||
startTime: date,
|
||||
endTime: date.add(Duration(hours: 2)),
|
||||
enablePointerInteraction: false,
|
||||
color: Colors.grey.withOpacity(0.2),
|
||||
text: 'Break'));
|
||||
|
||||
return regions;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfCalendar(
|
||||
view: CalendarView.week,
|
||||
specialRegions: _getTimeRegions(),
|
||||
timeRegionBuilder:
|
||||
(BuildContext context, TimeRegionDetails timeRegionDetails) {
|
||||
if (timeRegionDetails.region.text == 'Lunch') {
|
||||
return Container(
|
||||
color: timeRegionDetails.region.color,
|
||||
alignment: Alignment.center,
|
||||
child: Icon(
|
||||
Icons.restaurant,
|
||||
color: Colors.grey.withOpacity(0.5),
|
||||
),
|
||||
);
|
||||
} else if (timeRegionDetails.region.text == 'Not Available') {
|
||||
return Container(
|
||||
color: timeRegionDetails.region.color,
|
||||
alignment: Alignment.center,
|
||||
child: Icon(
|
||||
Icons.block,
|
||||
color: Colors.grey.withOpacity(0.5),
|
||||
),
|
||||
);
|
||||
}
|
||||
return Container(color: timeRegionDetails.region.color);
|
||||
},
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Resource view header builder
|
||||
The [ResourceViewHeaderBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewHeaderBuilder.html) allows to design the custom view, and assign the view to the resource view header of the calendar by returning an appropriate widget in the [ResourceViewHeaderBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewHeaderBuilder.html) of the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html).
|
||||
|
||||
[ResourceViewHeaderDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewHeaderDetails-class.html) - returns the required details of the resource view header builder.
|
||||
|
||||
`bound`: returns the resource view header bound.
|
||||
`resource`: returns the display name, color, id and image.
|
||||
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfCalendar(
|
||||
view: CalendarView.timelineMonth,
|
||||
resourceViewHeaderBuilder:
|
||||
(BuildContext context, ResourceViewHeaderDetails details) {
|
||||
if (details.resource.image != null) {
|
||||
return Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
children: [
|
||||
CircleAvatar(backgroundColor: details.resource.image),
|
||||
Text(details.resource.displayName)
|
||||
],
|
||||
);
|
||||
} else {
|
||||
return Container(
|
||||
color: details.resource.color,
|
||||
child: Text(details.resource.displayName),
|
||||
);
|
||||
}
|
||||
}),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
|
||||
* [How to customize the special time region using custom builder in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12192/how-to-customize-the-special-time-region-using-custom-builder-in-the-flutter-event-calendar)
|
||||
* [How to customize the appointments using custom builder in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12191/how-to-customize-the-appointments-using-custom-builder-in-the-flutter-event-calendar)
|
||||
* [How to customize the month cell based on the appointment using builder in the Flutter calendar (SfCalendar)](https://www.syncfusion.com/kb/12210/how-to-customize-the-month-cell-based-on-the-appointment-using-builder-in-the-flutter)
|
||||
* [How to customize the month cell with appointment count in the Flutter event Calendar (SfCalendar)](https://www.syncfusion.com/kb/12306/how-to-customize-the-month-cell-with-appointment-count-in-the-flutter-event-calendar)
|
||||
|
|
@ -1,30 +1,37 @@
|
|||
---
|
||||
layout: post
|
||||
title: Flutter calendar widget to schedule & manage events | Syncfusion
|
||||
description: Getting started with the Syncfusion flutter calendar widget to schedule an event with seven built-in configurable views modes.
|
||||
title: Getting started with Flutter Event Calendar widget | Syncfusion
|
||||
description: Learn here about getting started with Syncfusion Event Calendar (SfCalendar) widget, its elements, and more.
|
||||
platform: flutter
|
||||
control: SfCalendar
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Getting Started
|
||||
# Getting started with Flutter Event Calendar (SfCalendar)
|
||||
This section explains the steps required to add the calendar widget and populate appointments to the calendar widget. This section covers only basic features needed to get started with Syncfusion calendar widget.
|
||||
|
||||
## Add flutter calendar to an application
|
||||
To get start quickly with our Flutter event calendar widget, you can check on this video.
|
||||
|
||||
<style>#flutterEventCalendarVideoTutorial{width : 90% !important; height: 300px !important }</style>
|
||||
<iframe id='flutterEventCalendarVideoTutorial' src='https://www.youtube.com/embed/3OROjbAQS8Y'></iframe>
|
||||
|
||||
## Add Flutter calendar 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 calendar dependency to your pubspec.yaml file.
|
||||
Add the Syncfusion Flutter calendar dependency to your pubspec.yaml file.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
dependencies:
|
||||
|
||||
syncfusion_flutter_calendar: ^17.4.39-beta
|
||||
syncfusion_flutter_calendar: ^xx.x.xx
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Calendar`](https://pub.dev/packages/syncfusion_flutter_calendar/versions) package.
|
||||
|
||||
**Get packages**
|
||||
|
||||
Run the following command to get the required packages.
|
||||
|
|
@ -98,7 +105,7 @@ You can also map custom appointment data to our calendar.
|
|||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfCalendar(
|
||||
body: SfCalendar(
|
||||
view: CalendarView.month,
|
||||
dataSource: MeetingDataSource(_getDataSource()),
|
||||
monthViewSettings: MonthViewSettings(
|
||||
|
|
@ -107,7 +114,7 @@ Widget build(BuildContext context) {
|
|||
}
|
||||
|
||||
List<Meeting> _getDataSource() {
|
||||
meetings = <Meeting>[];
|
||||
final List<Meeting> meetings = <Meeting>[];
|
||||
final DateTime today = DateTime.now();
|
||||
final DateTime startTime =
|
||||
DateTime(today.year, today.month, today.day, 9, 0, 0);
|
||||
|
|
@ -117,34 +124,35 @@ List<Meeting> _getDataSource() {
|
|||
return meetings;
|
||||
}
|
||||
|
||||
|
||||
class MeetingDataSource extends CalendarDataSource {
|
||||
MeetingDataSource(List<Meeting> source){
|
||||
MeetingDataSource(List<Meeting> source) {
|
||||
appointments = source;
|
||||
}
|
||||
|
||||
@override
|
||||
DateTime getStartTime(int index) {
|
||||
return appointments[index].from;
|
||||
return appointments![index].from;
|
||||
}
|
||||
|
||||
@override
|
||||
DateTime getEndTime(int index) {
|
||||
return appointments[index].to;
|
||||
return appointments![index].to;
|
||||
}
|
||||
|
||||
@override
|
||||
String getSubject(int index) {
|
||||
return appointments[index].eventName;
|
||||
return appointments![index].eventName;
|
||||
}
|
||||
|
||||
@override
|
||||
Color getColor(int index) {
|
||||
return appointments[index].background;
|
||||
return appointments![index].background;
|
||||
}
|
||||
|
||||
@override
|
||||
bool isAllDay(int index) {
|
||||
return appointments[index].isAllDay;
|
||||
return appointments![index].isAllDay;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -345,4 +353,146 @@ Widget build(BuildContext context) {
|
|||
|
||||
|
||||
|
||||
You can get the complete getting started sample from [here](https://github.com/SyncfusionExamples/flutter-calendar).
|
||||
## Navigation arrow
|
||||
Using the [showNavigationArrow](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/showNavigationArrow.html) property of the `SfCalendar`, you can navigate to the next or previous views of the calendar without swiping.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
child: SfCalendar(
|
||||
view: CalendarView.month,
|
||||
showNavigationArrow: true,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
|
||||
>**NOTE**
|
||||
* The `showNavigationArrow` property is not applicable when the `view` is set to `CalendarView.schedule`.
|
||||
|
||||
## Cell end padding
|
||||
You can customize the padding of appointment view end to make touch position for timeslot and month cell by using the [cellEndPadding](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/cellEndPadding.html) property in the calendar, which allows you to tap the calendar cell when the cell has appointments.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfCalendar(
|
||||
view: CalendarView.month,
|
||||
cellEndPadding: 5,
|
||||
dataSource: _getCalendarDataSource(),
|
||||
monthViewSettings: MonthViewSettings(
|
||||
appointmentDisplayMode:
|
||||
MonthAppointmentDisplayMode.appointment),
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Current time indicator
|
||||
|
||||
You can display the current time indicator in all timeslot views of SfCalendar by using the [showCurrentTimeIndicator](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/showCurrentTimeIndicator.html) property and you can also customize the color of current time indicator by using the [todayHighlightColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/todayHighlightColor.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
child: SfCalendar(
|
||||
view: CalendarView.day,
|
||||
showCurrentTimeIndicator: true,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Week number
|
||||
|
||||
Display the Week number of the year in month, week and work week views of the `SfCalendar` by setting the [showWeekNumber](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/showWeekNumber.html) property as true and by default it is false. Week numbers will be displayed based on the ISO standard.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfCalendar(
|
||||
view: CalendarView.month,
|
||||
showWeekNumber: true,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Week number appearance
|
||||
|
||||
Customize the Week number text style of the calendar by using the [WeekNumberStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekNumberStyle-class.html) property. Allows to customize the [textStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekNumberStyle/textStyle.html) and the [backgroundColor](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/WeekNumberStyle/backgroundColor.html) in the Week number of the calendar.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfCalendar(
|
||||
view: CalendarView.month,
|
||||
showWeekNumber: true,
|
||||
weekNumberStyle: const WeekNumberStyle(
|
||||
backgroundColor: Colors.pink,
|
||||
textStyle: TextStyle(color: Colors.white, fontSize: 15),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
Get the complete "getting started" sample from [here](https://github.com/SyncfusionExamples/flutter-calendar).
|
||||
|
||||
## See also
|
||||
|
||||
* [How to switch between views of the event calendar in Flutter?](https://www.syncfusion.com/kb/10944/how-to-switch-between-views-of-the-event-calendar-in-flutter)
|
||||
* [How to update event calendar (SfCalendar) DisplayDate using showDatePicker in flutter](https://www.syncfusion.com/kb/11010/how-to-update-event-calendar-sfcalendar-displaydate-using-showdatepicker-in-flutter)
|
||||
* [How can we move to specific time while switching from month to day view in Flutter event calendar](https://www.syncfusion.com/kb/10943/how-can-we-move-to-specific-time-while-switching-from-month-to-day-view-in-flutter-event)
|
||||
* [How to customize the cell border in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12118/how-to-customize-the-cell-border-in-the-flutter-event-calendar-sfcalendar)
|
||||
* [How to apply theming in Flutter event calendar (SfCalendar)?](https://www.syncfusion.com/kb/11899/how-to-apply-theming-in-flutter-event-calendar-sfcalendar)
|
||||
* [How to add an image as background in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12243/how-to-add-an-image-as-background-in-the-flutter-event-calendar-sfcalendar)
|
||||
* [How to change the first day of week in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12222/how-to-change-the-first-day-of-week-in-the-flutter-event-calendar-sfcalendar)
|
||||
* [How to interact with event calendar cell when appointments loaded in the Flutter (SfCalendar)](https://www.syncfusion.com/kb/12218/how-to-interact-with-event-calendar-cell-when-appointments-loaded-in-the-flutter-sfcalendar)
|
||||
* [How to customize the selection using decoration in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12245/how-to-customize-the-selection-using-decoration-in-the-flutter-event-calendar-sfcalendar)
|
||||
* [How to navigate to the previous or next views using navigation arrows in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12247/how-to-navigate-to-the-previous-or-next-views-using-navigation-arrows-in-the-flutter-event)
|
||||
* [How to customize the current day color in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12336/how-to-customize-the-current-day-color-in-the-flutter-event-calendar-sfcalendar)
|
||||
* [How to show a particular week in a day view of Flutter event calendar(SfCalendar)](https://www.syncfusion.com/kb/12310/how-to-show-a-particular-week-in-a-day-view-of-flutter-event-calendarsfcalendar)
|
||||
* [How to customize the selection using decoration in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12245/how-to-customize-the-selection-using-decoration-in-the-flutter-event-calendar-sfcalendar)
|
||||
* [How to format the view header day and date in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12339/how-to-format-the-view-header-day-and-date-in-the-flutter-event-calendar-sfcalendar)
|
||||
|
|
@ -0,0 +1,966 @@
|
|||
---
|
||||
layout: post
|
||||
title: Callbacks in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about available Callbacks feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Callbacks in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
The below Callbacks are for Cartesian chart.
|
||||
|
||||
## onTooltipRender
|
||||
|
||||
Triggers when the tooltip is rendering. Here, you can customize the text, header, x and y-positions. The [`onTooltipRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onTooltipRender.html) Callback contains the following arguments.
|
||||
|
||||
* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/text.html) - specifies the content of the tooltip.
|
||||
* [`header`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/header.html) - specifies the header content of the tooltip.
|
||||
* [`locationX`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/locationX.html) - specifies the x position of tooltip.
|
||||
* [`locationY`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/locationY.html) - specifies the y position of tooltip.
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/seriesIndex.html) - specifies the current series index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/dataPoints.html) - holds the data point collection.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/pointIndex.html) - specifies the current point index.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/viewportPointIndex.html) - specifies the viewport index value of the tooltip.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late TooltipBehavior _tooltipBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_tooltipBehavior = TooltipBehavior(enable: true);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
tooltipBehavior: _tooltipBehavior,
|
||||
onTooltipRender: (TooltipArgs args) {
|
||||
args.text = 'Customized Text';
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onActualRangeChanged
|
||||
|
||||
Triggers when the visible range of an axis is changed, i.e. value changes for minimum, maximum, and interval. Here, you can customize the visible range of an axis. The [`onActualRangeChanged`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onActualRangeChanged.html) Callback contains the following arguments.
|
||||
|
||||
* [`axisName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActualRangeChangedArgs/axisName.html) - specifies the axis name.
|
||||
* [`axis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActualRangeChangedArgs/axis.html) - holds the information about the current axis.
|
||||
* [`actualMin`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActualRangeChangedArgs/actualMin.html) - specifies the actual minimum range of an axis.
|
||||
* [`actualMax`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActualRangeChangedArgs/actualMax.html) - specifies the actual maximum range of an axis.
|
||||
* [`actualInterval`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActualRangeChangedArgs/actualInterval.html) - specifies the actual interval of an axis.
|
||||
* [`visibleMin`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActualRangeChangedArgs/visibleMin.html) - specifies the visible minimum range of an axis.
|
||||
* [`visibleMax`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActualRangeChangedArgs/visibleMax.html) - specifies the visible maximum range of an axis.
|
||||
* [`visibleInterval`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActualRangeChangedArgs/visibleInterval.html) - specifies the visible interval of an axis.
|
||||
* [`orientation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActualRangeChangedArgs/orientation.html) - specifies the current axis orientation.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
onActualRangeChanged: (ActualRangeChangedArgs args){
|
||||
if (args.axisName == 'primaryYAxis'){
|
||||
args.visibleMin = 10;
|
||||
}
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onAxisLabelRender
|
||||
|
||||
Triggers while rendering the axis labels. Text and text styles such as color, font size, and font weight can be customized. The [`onAxisLabelRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onAxisLabelRender.html) Callback contains the following arguments.
|
||||
|
||||
* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderArgs/text.html) - specifies the axis label to be rendered.
|
||||
* [`value`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderArgs/value.html) - specifies the actual value of the current axis label.
|
||||
* [`axisName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderArgs/axisName.html) - specifies the axis name.
|
||||
* [`orientation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderArgs/orientation.html) - specifies the current axis orientation.
|
||||
* [`axis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderArgs/axis.html) - holds the information about the current axis.
|
||||
* [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelRenderArgs/textStyle.html) - used to change the text color, size, font family, font style, and font weight.
|
||||
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
onAxisLabelRender: (AxisLabelRenderArgs args) {
|
||||
if (args.axisName == 'primaryXAxis') {
|
||||
args.text = 'Text';
|
||||
TextStyle textStyle = args.textStyle;
|
||||
args.textStyle = textStyle.copyWith(color: Colors.red);
|
||||
}
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
#### See Also
|
||||
|
||||
* [Using dateTime values in y-axis using onAxisLabelRender callback](https://www.syncfusion.com/kb/12224/how-to-use-datetime-values-in-the-y-axis-sfcartesianchart).
|
||||
|
||||
## onDataLabelRender
|
||||
|
||||
Triggers when data label is rendering. Text and text styles such as color, font size, and font weight can be customized. The [`onDataLabelRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onDataLabelRender.html) Callback contains the following arguments.
|
||||
|
||||
* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/text.html) - used to get and set the content of the data label.
|
||||
* [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/textStyle.html) - used to change the text color, size, font family, font style, and font weight.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/pointIndex.html) - specifies the current point index.
|
||||
* [`seriesRenderer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/seriesRenderer.html) - specifies current series and the series type may vary based on the chart type.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/dataPoints.html) - used to get the data points of the series.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/viewportPointIndex.html) - to get the viewport index value of the tapped data label.
|
||||
* [`offset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/offset.html) - used to get and set the horizontal/vertical position of the data label. The first argument sets the horizontal component to x, while the second argument sets the vertical component to y.
|
||||
* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/color.html) - used to get and set the background color of a data label.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
onDataLabelRender:(DataLabelRenderArgs args){
|
||||
args.text = 'Data label';
|
||||
CartesianSeries<dynamic, dynamic> series = args.seriesRenderer;
|
||||
//Changed the background color of the data label based on the series type
|
||||
if (series.name == 'Product A') {
|
||||
args.color = Colors.blue;
|
||||
} else if(series.name == 'Product B'){
|
||||
args.color = Colors.red;
|
||||
}
|
||||
},
|
||||
series: <CartesianSeries>[
|
||||
ColumnSeries<ChartData, double>(
|
||||
dataLabelSettings: DataLabelSettings(
|
||||
isVisible: true
|
||||
)
|
||||
)
|
||||
]
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final double x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onLegendItemRender
|
||||
|
||||
Triggers when the legend item is rendering. Here, you can customize the legend’s text, and shape. The [`onLegendItemRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onLegendItemRender.html) Callback contains the following arguments.
|
||||
|
||||
* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendRenderArgs/text.html) - specifies the content of the legend.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendRenderArgs/pointIndex.html) - specifies the current point index that is applicable for circular chart type alone.
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendRenderArgs/seriesIndex.html) - specifies the current series index.
|
||||
* [`legendIconType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendRenderArgs/legendIconType.html) - specifies the shape of the legend.
|
||||
* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendRenderArgs/color.html) - used to get and set the color of the legend icon.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
legend: Legend(isVisible: true),
|
||||
onLegendItemRender: (LegendRenderArgs args){
|
||||
args.text = 'Legend Text';
|
||||
args.legendIconType = LegendIconType.diamond;
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onTrackballPositionChanging
|
||||
|
||||
Triggers while the trackball position is changing. Here, you can customize the text of the trackball.The [`onTrackballPositionChanging`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onTrackballPositionChanging.html) Callback contains the following argument.
|
||||
|
||||
* [`chartPointInfo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballArgs/chartPointInfo.html) - holds the information about the current point.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
onTrackballPositionChanging: (TrackballArgs args) {
|
||||
args.chartPointInfo.label = 'Custom Text';
|
||||
},
|
||||
trackballBehavior: TrackballBehavior(
|
||||
enable: true
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onCrosshairPositionChanging
|
||||
|
||||
Triggers while the crosshair position is changing. Here, you can customize the text and line color of the crosshair.The [`onCrosshairPositionChanging`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onCrosshairPositionChanging.html) Callback contains the following arguments.
|
||||
|
||||
* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairRenderArgs/text.html) - used to get and set the crosshair tooltip content.
|
||||
* [`value`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairRenderArgs/value.html) - specifies the actual value of the crosshair.
|
||||
* [`axisName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairRenderArgs/axisName.html) - specifies the axis name.
|
||||
* [`orientation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairRenderArgs/orientation.html) - specifies the current axis orientation.
|
||||
* [`axis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairRenderArgs/axis.html) - holds the information about the current axis.
|
||||
* [`lineColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairRenderArgs/lineColor.html) - used to get and set the color of the crosshair line.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late CrosshairBehavior _crosshairBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_crosshairBehavior = CrosshairBehavior(
|
||||
enable: true
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
onCrosshairPositionChanging: (CrosshairRenderArgs args){
|
||||
args.text = 'crosshair';
|
||||
},
|
||||
crosshairBehavior: _crosshairBehavior
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onZooming
|
||||
|
||||
Triggers when the zooming action is in progress. The [`onZooming`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onZooming.html) Callback contains the following arguments.
|
||||
|
||||
* [`axis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/axis.html) - holds the information about the current axis.
|
||||
* [`currentZoomPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/currentZoomPosition.html) - used to get and set the current zoom position of an axis.
|
||||
* [`currentZoomFactor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/currentZoomFactor.html) - used to get and set the current zoom factor of an axis.
|
||||
* [`previousZoomPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/previousZoomPosition.html) - specifies the previous zoom position of an axis.
|
||||
* [`previousZoomFactor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/previousZoomFactor.html) - specifies the previous zoom factor of an axis.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late ZoomPanBehavior _zoomPanBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_zoomPanBehavior = ZoomPanBehavior(
|
||||
enableDoubleTapZooming: true,
|
||||
enablePanning: true,
|
||||
enablePinching: true,
|
||||
enableSelectionZooming: true
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
zoomPanBehavior: _zoomPanBehavior,
|
||||
onZooming: (ZoomPanArgs args){
|
||||
print(args.currentZoomFactor);
|
||||
print(args.currentZoomPosition);
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onZoomStart
|
||||
|
||||
Triggers when zooming action begins. The [`onZoomStart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onZoomStart.html) Callback contains the following arguments.
|
||||
|
||||
* [`axis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/axis.html) - holds the information about the current axis.
|
||||
* [`currentZoomPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/currentZoomPosition.html) - used to get and set the current zoom position of an axis.
|
||||
* [`currentZoomFactor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/currentZoomFactor.html) - used to get and set the current zoom factor of an axis.
|
||||
* [`previousZoomPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/previousZoomPosition.html) - specifies the previous zoom position of an axis.
|
||||
* [`previousZoomFactor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/previousZoomFactor.html) - specifies the previous zoom factor of an axis.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late ZoomPanBehavior _zoomPanBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_zoomPanBehavior = ZoomPanBehavior(
|
||||
enableDoubleTapZooming: true,
|
||||
enablePanning: true,
|
||||
enablePinching: true,
|
||||
enableSelectionZooming: true
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
zoomPanBehavior: _zoomPanBehavior,
|
||||
onZoomStart: (ZoomPanArgs args){
|
||||
print(args.currentZoomFactor);
|
||||
print(args.currentZoomPosition);
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onZoomEnd
|
||||
|
||||
Triggers when the zooming action is completed. The [`onZoomEnd`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onZoomEnd.html) Callback contains the following arguments.
|
||||
|
||||
* [`axis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/axis.html) - holds the information about the current axis.
|
||||
* [`currentZoomPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/currentZoomPosition.html) - used to get and set the current zoom position of an axis.
|
||||
* [`currentZoomFactor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/currentZoomFactor.html) - used to get and set the current zoom factor of an axis.
|
||||
* [`previousZoomPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/previousZoomPosition.html) - specifies the previous zoom position of an axis.
|
||||
* [`previousZoomFactor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/previousZoomFactor.html) - specifies the previous zoom factor of an axis.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late ZoomPanBehavior _zoomPanBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_zoomPanBehavior = ZoomPanBehavior(
|
||||
enableDoubleTapZooming: true,
|
||||
enablePanning: true,
|
||||
enablePinching: true,
|
||||
enableSelectionZooming: true
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
zoomPanBehavior: _zoomPanBehavior,
|
||||
onZoomEnd: (ZoomPanArgs args){
|
||||
print(args.currentZoomFactor);
|
||||
print(args.currentZoomPosition);
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onZoomReset
|
||||
|
||||
Triggers when zoomed state is reset. The [`onZoomReset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onZoomReset.html) Callback contains the following arguments.
|
||||
|
||||
* [`axis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/axis.html) - holds the information about the current axis.
|
||||
* [`currentZoomPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/currentZoomPosition.html) - used to get and set the current zoom position of an axis.
|
||||
* [`currentZoomFactor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/currentZoomFactor.html) - used to get and set the current zoom factor of an axis.
|
||||
* [`previousZoomPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/previousZoomPosition.html) - specifies the previous zoom position of an axis.
|
||||
* [`previousZoomFactor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanArgs/previousZoomFactor.html) - specifies the previous zoom factor of an axis.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late ZoomPanBehavior _zoomPanBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_zoomPanBehavior = ZoomPanBehavior(
|
||||
enableDoubleTapZooming: true,
|
||||
enablePanning: true,
|
||||
enablePinching: true,
|
||||
enableSelectionZooming: true
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
zoomPanBehavior: _zoomPanBehavior,
|
||||
onZoomReset: (ZoomPanArgs args){
|
||||
print(args.currentZoomFactor);
|
||||
print(args.currentZoomPosition);
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onPointTap
|
||||
|
||||
Triggers when tapping on the series point. The [onPointTap](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onPointTap.html) callback contains the following arguments.
|
||||
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/dataPoints.html) - holds the data point collection.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/viewportPointIndex.html) - specifies the viewport index value of the tapped data point.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
series: <ChartSeries<ChartData,num>>[
|
||||
ColumnSeries(
|
||||
onPointTap: (ChartPointDetails details) {
|
||||
print(details.pointIndex);
|
||||
print(details.seriesIndex);
|
||||
}
|
||||
)
|
||||
],
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onPointDoubleTap
|
||||
|
||||
Triggers when double-tap the series point. The [onPointDoubleTap](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onPointDoubleTap.html) callback contains the following arguments.
|
||||
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/dataPoints.html) - holds the data point collection.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/viewportPointIndex.html) - specifies the viewport index value of the double-tapped data point.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
series: <ChartSeries<ChartData,num>>[
|
||||
ColumnSeries(
|
||||
onPointDoubleTap: (ChartPointDetails details) {
|
||||
print(details.pointIndex);
|
||||
print(details.seriesIndex);
|
||||
}
|
||||
)
|
||||
],
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onPointLongPress
|
||||
|
||||
Triggers when long press on the series point. The [onPointLongPress](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onPointLongPress.html) callback contains the following arguments.
|
||||
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/dataPoints.html) - holds the data point collection.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/viewportPointIndex.html) - specifies the viewport index value of the long pressed data point.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
series: <ChartSeries<ChartData,num>>[
|
||||
ColumnSeries(
|
||||
onPointLongPress: (ChartPointDetails details) {
|
||||
print(details.pointIndex);
|
||||
print(details.seriesIndex);
|
||||
}
|
||||
)
|
||||
],
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
## onAxisLabelTapped
|
||||
|
||||
Triggers when tapping the axis label. The [`onAxisLabelTapped`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onAxisLabelTapped.html) Callback contains the following arguments.
|
||||
|
||||
* [`axis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelTapArgs/axis.html) - holds the information about the current axis.
|
||||
* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelTapArgs/text.html) - specifies the content of the axis label.
|
||||
* [`value`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelTapArgs/value.html) - specifies the actual value of the current axis label.
|
||||
* [`axisName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelTapArgs/axisName.html) - used to get the axis name.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
onAxisLabelTapped: (AxisLabelTapArgs args) {
|
||||
print(args.text);
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
#### See Also
|
||||
|
||||
* [Navigating to an hyperlink on axis label tap](https://www.syncfusion.com/kb/12202/how-to-navigate-to-a-hyperlink-when-clicked-on-chart-axis-label-sfcartesianchart).
|
||||
|
||||
## onLegendTapped
|
||||
|
||||
Triggers when tapping the legend item. The [`onLegendTapped`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onLegendTapped.html) Callback contains the following arguments.
|
||||
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendTapArgs/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendTapArgs/pointIndex.html) - specifies the current point index that is applicable for circular series.
|
||||
* [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendTapArgs/series.html) - specifies the current series and the series type may vary based on the chart type.
|
||||
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
onLegendTapped: (LegendTapArgs args) {
|
||||
print(args.seriesIndex);
|
||||
},
|
||||
legend: Legend(isVisible: true)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onSelectionChanged
|
||||
|
||||
Triggers while selection changes. Here you can customize the selectedColor, unselectedColor, selectedBorderColor, selectedBorderWidth, unselectedBorderColor, and unselectedBorderWidth properties. The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onSelectionChanged.html) Callback contains the following arguments.
|
||||
|
||||
* [`seriesRenderer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/seriesRenderer.html) - specifies current series.
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/pointIndex.html) - specifies the current point index.
|
||||
* [`selectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/selectedColor.html) - used to get and set the color of the selected data points or series.
|
||||
* [`unselectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/unselectedColor.html) - used to get and set the color of the unselected data points or series.
|
||||
* [`selectedBorderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/selectedBorderColor.html) - used to get and set the border color of the selected data points or series.
|
||||
* [`selectedBorderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/selectedBorderWidth.html) - used to get and set the border width of the selected data points or series.
|
||||
* [`unselectedBorderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/unselectedBorderColor.html) - used to get and set the border color of the unselected data points or series.
|
||||
* [`unselectedBorderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/unselectedBorderWidth.html) - used to get and set the border width of the unselected data points or series.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/viewportPointIndex.html) - used to get the viewport index value of the selected data points.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
onSelectionChanged: (SelectionArgs args){
|
||||
args.selectedColor = Colors.red;
|
||||
args.unselectedColor = Colors.lightGreen;
|
||||
},
|
||||
series: <CartesianSeries>[
|
||||
ColumnSeries<ChartData, double>(
|
||||
selectionBehavior: SelectionBehavior(
|
||||
enable: true,
|
||||
)
|
||||
)
|
||||
]
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final double x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onRenderDetailsUpdate (TechnicalIndicators)
|
||||
|
||||
Triggers when the indicator is rendering. Here you can customize the name, calculated data points, signal line color, signal line width, signal line dash array, and so on.
|
||||
|
||||
The [`onRenderDetailsUpdate`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators/onRenderDetailsUpdate.html) contains following arguments.
|
||||
|
||||
* [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/IndicatorRenderParams/name.html) - used to get and set the indicator name.
|
||||
* [`calculatedDataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/IndicatorRenderParams/calculatedDataPoints.html) - used to get the calculated indicator data points details.
|
||||
* [`signalLineColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicatorRenderDetails/signalLineColor.html) - used to change the color of the signal line.
|
||||
* [`signalLineWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicatorRenderDetails/signalLineWidth.html) - used to change the width of the signal line.
|
||||
* [`signalLineDashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicatorRenderDetails/signalLineDashArray.html) - used to change the dash array size of the signal line.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
List<double> signalLineDashArray = <double>[5,5];
|
||||
double signalLineWidth = 3.0;
|
||||
Color signalLineColor = Colors.cyan;
|
||||
return Scaffold(
|
||||
body:Center(
|
||||
child: SfCartesianChart(
|
||||
indicators: <TechnicalIndicators<dynamic, dynamic>>[
|
||||
SmaIndicator<dynamic, dynamic>(
|
||||
onRenderDetailsUpdate: (IndicatorRenderParams params) {
|
||||
return TechnicalIndicatorRenderDetails(signalLineColor, signalLineWidth, signalLineDashArray);
|
||||
},
|
||||
)],
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onTrendlineRender
|
||||
|
||||
Triggers when the trendline gets rendered. Trendline properties like color,opacity can be customized using trendlineRender Callback. The [`onTrendlineRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrendlineRenderArgs-class.html) Callback contains the following arguments.
|
||||
|
||||
* [`trendlineIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrendlineRenderArgs/trendlineIndex.html) - specifies the index of the trendline.
|
||||
* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrendlineRenderArgs/opacity.html) - specifies the opacity of the trendline.
|
||||
* [`seriesName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrendlineRenderArgs/seriesName.html) - specifies the series name of the trendline.
|
||||
* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrendlineRenderArgs/color.html) - specifies the color of the trendline.
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrendlineRenderArgs/seriesIndex.html) - specifies the seriesIndex.
|
||||
* [`data`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrendlineRenderArgs/data.html) - specifies the data points of the series.
|
||||
* [`trendlineName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrendlineRenderArgs/trendlineName.html) - specifies the name of the trendline.
|
||||
* [`intercept`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrendlineRenderArgs/intercept.html) - specifies the intercept value of the trendline.
|
||||
* [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrendlineRenderArgs/dashArray.html) - specifies and sets the trendline's dashArray.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCartesianChart(
|
||||
onTrendlineRender: (TrendlineRenderArgs args) {
|
||||
args.color = Colors.greenAccent;
|
||||
args.opacity = 0.18;
|
||||
args.dashArray = <double>[5, 3];
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onRendererCreated
|
||||
|
||||
Triggers when the series renderer is created. This callback can be used to obtain the [`ChartSeriesController`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeriesController-class.html) instance, which is used to access the the public methods in the series.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
//Initialize the series controller
|
||||
ChartSeriesController? _chartSeriesController;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
Container(
|
||||
child: SfCartesianChart(
|
||||
series: <LineSeries<SalesData, num>>[
|
||||
LineSeries<SalesData, num>(
|
||||
dataSource: chartData,
|
||||
//Initialize the onRendererCreated event and store the controller for the respective series
|
||||
onRendererCreated: (ChartSeriesController controller) {
|
||||
_chartSeriesController = controller;
|
||||
},
|
||||
),
|
||||
],
|
||||
)
|
||||
),
|
||||
Container(
|
||||
child: ElevatedButton(
|
||||
onPressed: () {
|
||||
//Removed a point from data source
|
||||
chartData.removeAt(0);
|
||||
//Added a point to the data source
|
||||
chartData.add(ChartData(3,23));
|
||||
//Here accessed the public method of the series.
|
||||
_chartSeriesController?.updateDataSource(
|
||||
addedDataIndexes: <int>[chartData.length -1],
|
||||
removedDataIndexes: <int>[0],
|
||||
);
|
||||
},
|
||||
child: Container(child: Text('Add a point'),)
|
||||
)
|
||||
)
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
class SalesData {
|
||||
SalesData(this.x, this.y);
|
||||
final num x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onChartTouchInteractionDown
|
||||
|
||||
Triggers when touched or clicked on the chart area. You can get the position of the touched region using this callback.
|
||||
|
||||
The callback contains the following argument:
|
||||
|
||||
* [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTouchInteractionArgs/position.html) - used to get the position of the touch interaction.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
child: SfCartesianChart(
|
||||
onChartTouchInteractionDown: (ChartTouchInteractionArgs args){
|
||||
print(args.position.dx.toString());
|
||||
print(args.position.dy.toString());
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onChartTouchInteractionUp
|
||||
|
||||
Triggers when tapped or clicked on the chart area. You can get the position of the tapped region using this callback.
|
||||
|
||||
The callback contains the following argument:
|
||||
|
||||
* [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTouchInteractionArgs/position.html) - used to get the position of the touch interaction.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
child: SfCartesianChart(
|
||||
onChartTouchInteractionUp: (ChartTouchInteractionArgs args){
|
||||
print(args.position.dx.toString());
|
||||
print(args.position.dy.toString());
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onChartTouchInteractionMove
|
||||
|
||||
Triggers when touched or clicked and moved on the chart area. You can get the position of the moving region using this callback.
|
||||
|
||||
The callback contains the following argument:
|
||||
|
||||
* [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTouchInteractionArgs/position.html) - used to get the position of the touch interaction.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
child: SfCartesianChart(
|
||||
onChartTouchInteractionMove: (ChartTouchInteractionArgs args){
|
||||
print(args.position.dx.toString());
|
||||
print(args.position.dy.toString());
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onMarkerRender
|
||||
|
||||
Triggers when the marker is being rendered. Here, you can customize the following arguments.
|
||||
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerRenderArgs/pointIndex.html) - to get the point index of the marker.
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerRenderArgs/seriesIndex.html) - to get the series index of the marker.
|
||||
* [`shape`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerRenderArgs/shape.html) - to get and set the shape of the marker.
|
||||
* [`markerHeight`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerRenderArgs/markerHeight.html) - to get and set the height of the marker.
|
||||
* [`markerWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerRenderArgs/markerWidth.html) - to get and set the width of the marker.
|
||||
* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerRenderArgs/color.html) - to get and set the color of the marker.
|
||||
* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerRenderArgs/borderWidth.html) - to get and set the border width of the marker.
|
||||
* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerRenderArgs/borderColor.html) - to get and set the border color of the marker.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerRenderArgs/viewportPointIndex.html) - to get the viewport index value of the tapped data label.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
child: SfCartesianChart(
|
||||
onMarkerRender: (MarkerRenderArgs args) {
|
||||
if (args.pointIndex == 1) {
|
||||
args.color = Colors.red;
|
||||
args.markerHeight = 20;
|
||||
args.markerWidth = 20;
|
||||
args.shape = DataMarkerType.diamond;
|
||||
args.borderColor = Colors.green;
|
||||
args.borderWidth = 2;
|
||||
}
|
||||
},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onDataLabelTapped
|
||||
Triggers when tapping on the data label of the data point in the series. The [`onDataLabelTapped`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onDataLabelTapped.html) Callback contains the following arguments.
|
||||
|
||||
* [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/position.html) - specifies the position of the tapped data label in logical pixels.
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/seriesIndex.html) - specifies the series index of the tapped data label
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/pointIndex.html) - specifies the point index of the tapped data label.
|
||||
* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/text.html) - specifies the content of the tapped data label.
|
||||
* [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/dataLabelSettings.html) - to get the data label customization options specified in that particular series.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/viewportPointIndex.html) - to get the viewport index value of the tapped data label.
|
||||
|
||||
|
||||
N> This callback will not be called, when the builder is specified for data label (data label template). For this case, custom widget specified in the [`DataLabelSettings.builder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/builder.html) property can be wrapped using the [`GestureDetector`](https://api.flutter.dev/flutter/widgets/GestureDetector-class.html) and this functionality can be achieved in the application level.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
child: SfCartesianChart(
|
||||
onDatalabelTapped: (DataLabelTapArgs args) {
|
||||
print(args.seriesIndex);
|
||||
},
|
||||
series: <ChartSeries<Sample, DateTime>>[
|
||||
LineSeries<Sample, DateTime>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (Sample sales, _) => sales.x,
|
||||
yValueMapper: (Sample sales, _) => sales.y,
|
||||
dataLabelSettings: DataLabelSettings(
|
||||
isVisible: true),
|
||||
)
|
||||
]
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
class Sample{
|
||||
Sample(this.x, this,y);
|
||||
final DateTime x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onPlotAreaSwipe
|
||||
|
||||
Triggers while swiping on the plot area. Whenever the swiping happens on the plot area (the series rendering area), [`onPlotAreaSwipe`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/onPlotAreaSwipe.html) callback will be called. It provides options to get the direction of swiping. If the chart is swiped from left to right direction, the direction is [`ChartSwipeDirection.start`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSwipeDirection-class.html) and if the swipe happens from right to left direction, the direction is [`ChartSwipeDirection.end`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSwipeDirection-class.html). Using this callback, the user will be able to achieve pagination functionality (i.e., on swiping over chart area, next set of data points can be loaded to the chart).
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
//Initialize the series controller
|
||||
ChartSeriesController? SeriesController;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
child: SfCartesianChart(
|
||||
onPlotAreaSwipe:
|
||||
(ChartSwipeDirection direction) =>
|
||||
performSwipe(direction),
|
||||
series: <ChartSeries<SalesData, num>>[
|
||||
AreaSeries<SalesData, num>(
|
||||
dataSource: chartData,
|
||||
),
|
||||
],
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Widget performSwipe(ChartSwipeDirection direction) {
|
||||
if (direction == ChartSwipeDirection.end) {
|
||||
chartData.add(ChartSampleData(
|
||||
x: chartData[chartData.length - 1].x + 1,
|
||||
y: 10));
|
||||
seriesController?.updateDataSource(addedDataIndex: chartData.length - 1);
|
||||
}
|
||||
}
|
||||
|
||||
class SalesData {
|
||||
SalesData(this.x, this.y);
|
||||
final num x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## See Also
|
||||
|
||||
* [Customize the tooltip using its callback event](https://www.syncfusion.com/kb/11507/how-to-customize-the-tooltip-using-callback-events-sfcartesianchart).
|
||||
* [Customize the axis labels using its callback event](https://www.syncfusion.com/kb/11678/how-to-customize-the-axis-labels-using-callback-events-sfcartesianchart).
|
||||
* [Customize the data labels using its callback event](https://www.syncfusion.com/kb/11679/how-to-customize-data-labels-using-callback-events-sfcartesianchart).
|
||||
* [Disabling trackball tooltip for particular series using its callback event](https://www.syncfusion.com/kb/11638/how-to-disable-trackball-tooltip-for-particular-series-in-cartesian-charts-sfcartesianchart).
|
||||
* [To Synchronize panning in multiple charts](https://www.syncfusion.com/kb/11533/how-to-synchronize-panning-in-multiple-charts-sfcartesianchart).
|
||||
|
||||
N> `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/flutter/cartesian-charts/getting-started#bind-data-source) topic for more details.
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 182 KiB |
|
|
@ -0,0 +1,460 @@
|
|||
---
|
||||
layout: post
|
||||
title: Legend in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about Legend feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Legend in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/legend.html) contains list of chart series/data points in chart. The information provided in each legend item helps to identify the corresponding data series in chart.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child:SfCartesianChart(
|
||||
primaryXAxis: DateTimeAxis(),
|
||||
// Enables the legend
|
||||
legend: Legend(isVisible: true),
|
||||
series: <LineSeries>[
|
||||
LineSeries<ChartData, DateTime>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y
|
||||
)
|
||||
]
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final DateTime x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Customizing legend
|
||||
|
||||
The [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/name.html) property of [`CartesianSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries-class.html) is used to define the label for the corresponding series legend item .The appearance of the label can be customized using the below properties.
|
||||
* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/borderWidth.html) - used to change the stroke width of the legend shape.
|
||||
* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/borderColor.html) - used to change the stroke color of the legend shape.
|
||||
* [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/backgroundColor.html) - used to change the background color of legend shape.
|
||||
* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/opacity.html) - used to control the transparency of the legend icon shape.
|
||||
* [`padding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/padding.html) - used to add padding between the icon shape and the text.
|
||||
* [`iconHeight`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/iconHeight.html) - used to change the height of the icon shape.
|
||||
* [`iconWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/iconWidth.html) - used to change the width of the icon shape.
|
||||
* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/borderWidth.html) - used to change the stroke width of the legend icon shape.
|
||||
* [`iconBorderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/iconBorderColor.html) - used to change the stroke color of the legend icon shape.
|
||||
* [`itemPadding`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/itemPadding.html) - used to add padding between the first legend text and the second legend icon shape.
|
||||
* [`height`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/height.html) - the height of the legend.
|
||||
* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/width.html) - the width of the legend.
|
||||
* [`isResponsive`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isResponsive.html) - toggles the visibility of the legend. If the width or height of the legend is greater than the plot area bounds.
|
||||
* [`iconBorderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/iconBorderWidth.html) - border width of the icon in the legend items. Used to change the stroke width of the legend icon shape.
|
||||
* [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) - overflow legend items.
|
||||
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child:SfCartesianChart(
|
||||
primaryXAxis: DateTimeAxis(),
|
||||
legend: Legend(
|
||||
isVisible: true,
|
||||
name:legend,
|
||||
// Border color and border width of legend
|
||||
borderColor: Colors.black,
|
||||
borderWidth: 2
|
||||
),
|
||||
series: <CartesianSeries>[
|
||||
LineSeries<ChartData, DateTime>(
|
||||
name:'line-series',
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y
|
||||
)
|
||||
]
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final DateTime x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Legend title
|
||||
|
||||
The following properties can be used to define and customize the [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/title.html) of [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/legend.html).
|
||||
|
||||
* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendTitle/text.html) - used to change the text of the title.
|
||||
* [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the text color, size, font family, fontStyle, and font weight.
|
||||
* [`textStyle.color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the color of the text.
|
||||
* [`textStyle.fontFamily`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the font family for legend text.
|
||||
* [`textStyle.fontStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the font style for the legend text.
|
||||
* [`textStyle.fontSize`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the font size for the legend text.
|
||||
* [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the alignment of the title text, it can be near, center, or far.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child:SfCartesianChart(
|
||||
primaryXAxis: DateTimeAxis(),
|
||||
legend: Legend(
|
||||
isVisible: true,
|
||||
// Legend title
|
||||
title: LegendTitle(
|
||||
text:'Country',
|
||||
textStyle: TextStyle(
|
||||
color: Colors.red,
|
||||
fontSize: 15,
|
||||
fontStyle: FontStyle.italic,
|
||||
fontWeight: FontWeight.w900
|
||||
)
|
||||
),
|
||||
),
|
||||
series: <CartesianSeries>[
|
||||
LineSeries<ChartData, DateTime>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y
|
||||
),
|
||||
LineSeries<ChartData, DateTime>(
|
||||
dataSource: chartData1,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y
|
||||
)
|
||||
]
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final DateTime x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Toggles the series visibility
|
||||
|
||||
You can control the visibility of the series by tapping the legend item. You can enable this feature by enabling the [`toggleSeriesVisibility`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/toggleSeriesVisibility.html) property.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child:SfCartesianChart(
|
||||
primaryXAxis: CategoryAxis(),
|
||||
legend: Legend(
|
||||
isVisible: true,
|
||||
// Toogles the series visibility on tapping the legend item
|
||||
toggleSeriesVisibility: true
|
||||
),
|
||||
series: <CartesianSeries>[
|
||||
LineeSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y
|
||||
)
|
||||
]
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final String x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Legend visibility
|
||||
|
||||
The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property of [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/legend.html) is used to toggle the visibility of legend.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child:SfCartesianChart(
|
||||
primaryXAxis: CategoryAxis(),
|
||||
legend: Legend(
|
||||
// Visibility of legend
|
||||
isVisible: false
|
||||
),
|
||||
series: <CartesianSeries>[
|
||||
LineSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y
|
||||
)
|
||||
]
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final String x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Legend item visibility
|
||||
|
||||
You can control the visibility of a particular series legend item using the [`isVisibleInLegend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/isVisibleInLegend.html) property of series. The default value of the [`isVisibleInLegend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/isVisibleInLegend.html) property is true. If it is set to false, then the legend item for this specific series will not be displayed in the legend.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfCartesianChart(
|
||||
legend: Legend(
|
||||
isVisible: true
|
||||
),
|
||||
primaryXAxis: CategoryAxis(),
|
||||
series: <ColumnSeries>[
|
||||
ColumnSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y
|
||||
),
|
||||
ColumnSeries<ChartData, String>(
|
||||
// Hiding the legend item for this series
|
||||
isVisibleInLegend: false,
|
||||
dataSource: chartData1,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y
|
||||
)
|
||||
]
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final String x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Legend overflow
|
||||
|
||||
The legend items can be placed in multiple rows or scroll can be enabled using the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property if size of the total legend items exceeds the available size. The default value of the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property is [`scroll`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOverflowMode-class.html).
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfCartesianChart(
|
||||
primaryXAxis: DateTimeAxis(),
|
||||
legend: Legend(
|
||||
isVisible: true,
|
||||
// Overflowing legend content will be wraped
|
||||
overflowMode: LegendItemOverflowMode.wrap
|
||||
),
|
||||
series: <CartesianSeries>[
|
||||
LineSeries<ChartData, DateTime>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y
|
||||
)
|
||||
]
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final DateTime x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
|
||||
## Positioning the legend
|
||||
|
||||
You can change the position of the legend inside the chart. The following properties can be used to customize the position of legend. auto position will place the legend at the right, if the chart's width is greater than the chart's height. Else the legend will be placed at the bottom position.
|
||||
|
||||
* [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition-class.html) - used to position the legend relatively. The available options are auto, bottom, left, right, and top. Defaults to `auto`.
|
||||
* [`orientation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/orientation.html) - used to change the orientation of the legend, the default value is auto. Also you can set [`horizontal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation-class.html) or [`vertical`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation-class.html).
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfCartesianChart(
|
||||
primaryXAxis: DateTimeAxis(),
|
||||
legend: Legend(
|
||||
isVisible: true,
|
||||
// Legend will be placed at the left
|
||||
position: LegendPosition.left
|
||||
),
|
||||
series: <CartesianSeries>[
|
||||
AreaSeries<ChartData, DateTime>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y
|
||||
),
|
||||
]
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final DateTime x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Floating legend
|
||||
|
||||
Places the legend in custom position. If the [`offset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/offset.html) has been set, the legend is moved from its actual position. For example, if the [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition-class.html) is `top`, then the legend will be placed in the top but in the position added to the actual top position.
|
||||
Also, the legend will not take a dedicated position for it and will be drawn on the top of the chart's plot area.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfCartesianChart(
|
||||
primaryXAxis: DateTimeAxis(),
|
||||
legend: Legend(
|
||||
isVisible: true,
|
||||
// Legend will placed at the specified offset
|
||||
offset: Offset(20, 40)),
|
||||
series: <CartesianSeries>[
|
||||
AreaSeries<ChartData, DateTime>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y),
|
||||
]))));
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final DateTime x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Legend item template
|
||||
|
||||
You can customize the appearance of legend items with your template by using [`legendItemBuilder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/legendItemBuilder.html) property of [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/legend.html). Here you can specify the content that needs to be displayed in the legend text as widget.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfCartesianChart(
|
||||
primaryXAxis: CategoryAxis(),
|
||||
legend: Legend(
|
||||
isVisible: true,
|
||||
// Templating the legend item
|
||||
legendItemBuilder: (String name, dynamic series, dynamic point, int index) {
|
||||
return Container(
|
||||
child: Container(
|
||||
child: Text('template'))
|
||||
);
|
||||
}
|
||||
),
|
||||
series: <CartesianSeries>[
|
||||
AreaSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y
|
||||
)
|
||||
]
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final String x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
N> `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/flutter/cartesian-charts/getting-started#bind-data-source) topic for more details.
|
||||
|
|
@ -0,0 +1,256 @@
|
|||
---
|
||||
layout: post
|
||||
title: Selection in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about Selection feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Selection in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
The selection feature in chart let you to select a segment in a series or the series itself. This features allows you to select either individual or cluster of segments in the chart series.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late SelectionBehavior _selectionBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_selectionBehavior = SelectionBehavior(
|
||||
// Enables the selection
|
||||
enable: true);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfCartesianChart(
|
||||
series: <CartesianSeries>[
|
||||
ColumnSeries<ChartData, double>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
selectionBehavior: _selectionBehavior
|
||||
)
|
||||
]
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final double x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Customizing the segments
|
||||
|
||||
You can customize the segments using the below properties.
|
||||
|
||||
* [`selectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectedColor.html) - used to change the background color of selected segment.
|
||||
* [`unselectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/unselectedColor.html) - used to change the background color of unselected segment.
|
||||
* [`selectedBorderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectedBorderColor.html) - used to change the stroke color of the selected segment.
|
||||
* [`selectedBorderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectedBorderWidth.html) - used to change the stroke width of the selected segment.
|
||||
* [`unselectedBorderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/unselectedBorderColor.html) - used to change the stroke color of the unselected segment.
|
||||
* [`unselectedBorderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/unselectedBorderWidth.html) - used to change the stroke width of the unselected segment.
|
||||
* [`selectedOpacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectedOpacity.html) - used to control the transparency of the selected segment.
|
||||
* [`unselectedOpacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/unselectedOpacity.html) - used to control the transparency of the unselected segment.
|
||||
* [`selectionController`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectionController.html) - to customize the minimum range of selected series or points.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late SelectionBehavior _selectionBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_selectionBehavior = SelectionBehavior(
|
||||
enable: true,
|
||||
selectedColor: Colors.red,
|
||||
unselectedColor: Colors.grey);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfCartesianChart(
|
||||
primaryXAxis: CategoryAxis(),
|
||||
series: <CartesianSeries>[
|
||||
ColumnSeries<ChartData, String>(
|
||||
selectionBehavior: _selectionBehavior
|
||||
)
|
||||
]
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final String x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Selection modes
|
||||
|
||||
The selection features allows you to select segments in following modes using [`selectionType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/selectionType.html) property of chart.
|
||||
|
||||
* [`Point`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionType-class.html) - selects the individual data point.
|
||||
* [`Series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionType-class.html) - selects the entire series.
|
||||
* [`Cluster`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionType-class.html) - selects the cluster of points of different series i.e selects the points with same index in each series.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfCartesianChart(
|
||||
// Mode of selection
|
||||
selectionType: SelectionType.cluster
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Multi-selection
|
||||
|
||||
Multiple selection can be enabled using the [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/enableMultiSelection.html) property of chart.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfCartesianChart(
|
||||
// Enables multiple selection
|
||||
enableMultiSelection: true
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Selection on initial rendering
|
||||
|
||||
You can select a point or series programmatically on a chart using [`initialSelectedDataIndexes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/initialSelectedDataIndexes.html) property of chart.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
late SelectionBehavior _selectionBehavior;
|
||||
|
||||
@override
|
||||
void initState(){
|
||||
_selectionBehavior = SelectionBehavior(
|
||||
// Enables the selection
|
||||
enable: true );
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfCartesianChart(
|
||||
primaryXAxis: CategoryAxis(),
|
||||
series: <CartesianSeries>[
|
||||
ColumnSeries<ChartData, String>(
|
||||
// Initially selected the data at point index - 1.
|
||||
initialSelectedDataIndexes: <int>[1],
|
||||
dataSource: chartData1,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
selectionBehavior: _selectionBehavior
|
||||
),
|
||||
ColumnSeries<ChartData, String>(
|
||||
dataSource: chartData2,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
selectionBehavior: _selectionBehavior
|
||||
)
|
||||
]
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final String x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Toggle selection
|
||||
|
||||
You can decide, whether to deselect the selected data point/series or remain selected when interacted with it again by setting the [`toggleSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/toggleSelection.html) property `true` or `false`. If set to true, deselection will be performed else the point will not get deselected.
|
||||
This works even while calling public methods, in various selection modes, with multi-selection, and also on dynamic changes.
|
||||
Defaults to `true`.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfCartesianChart(
|
||||
series: <ColumnSeries<ChartData, String>>[
|
||||
ColumnSeries<ChartData, String>(
|
||||
dataSource: chartData1,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
selectionBehavior: SelectionBehavior(
|
||||
enable: true,
|
||||
toggleSelection: false,
|
||||
))
|
||||
]
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
Also refer [selection event](./events#onselectionchanged) for customizing the selection further.
|
||||
|
||||
#### See Also
|
||||
|
||||
* [Dynamically selecting the data points in a chart](https://www.syncfusion.com/kb/11811/how-to-select-the-data-points-dynamically-in-cartesian-charts-sfcartesianchart).
|
||||
|
||||
N> `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/flutter/cartesian-charts/getting-started#bind-data-source) topic for more details.
|
||||
|
|
@ -512,7 +512,7 @@ Also refer [`technical indicators event`](https://pub.dev/documentation/syncfusi
|
|||
|
||||
## Tooltip for technical indicators
|
||||
|
||||
The chart will display the segment information through the tooltip. It is used to show information about the segment when you tap on the segment. The technical indicator tooltip has the same [`ActivationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/activationMode.html) that has been given in the [`TooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) of the series.
|
||||
The chart will display the segment information through the tooltip. It is used to show information about the segment when you tap on the segment. The technical indicator tooltip has the same [`ActivationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/activationMode.html) that has been given in the [`TooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) of the series.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
|
|
@ -615,6 +615,10 @@ Refer the following example below
|
|||
|
||||
|
||||
|
||||
#### See Also
|
||||
|
||||
* [Refer this link for technical indicators callback](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onrenderdetailsupdate).
|
||||
|
||||
_Note_ : Each indicators has their own number of value mappers available,
|
||||
* [`Accumulation distribution indicator`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AccumulationDistributionIndicator-class.html) (AD) - can be rendered with five value mappers ([`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators/xValueMapper.html), [`lowValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators/lowValueMapper.html), [`highValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators/highValueMapper.html), [`closeValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicators/closeValueMapper.html), [`volumeValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AccumulationDistributionIndicator/volumeValueMapper.html)).
|
||||
|
||||
|
|
|
|||
|
|
@ -118,33 +118,98 @@ Triggers when data label is rendering. Text and text styles such as color, font
|
|||
|
||||
{% endhighlight %}
|
||||
|
||||
## onPointTapped
|
||||
## onPointTap
|
||||
|
||||
Triggers when tapping the series point. The [`onPointTapped`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/onPointTapped.html) Callback contains the following arguments.
|
||||
Triggers when tapping on the series point. The [onPointTap](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/onPointTap.html) callback contains the following arguments.
|
||||
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/dataPoints.html) - holds the data point collection.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/viewportPointIndex.html) - specifies the viewport index value of the tapped data point.
|
||||
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/pointIndex.html) - specifies the current point index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/dataPoints.html) - holds the data point collection.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/viewportPointIndex.html) - to get the viewport index value of the tapped data label.
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCircularChart(
|
||||
onPointTapped: (PointTapArgs args){
|
||||
print(args.seriesIndex);
|
||||
print(args.pointIndex);
|
||||
}
|
||||
series: <CircularSeries>[
|
||||
PieSeries<ChartData, String>(
|
||||
onPointTap: (ChartPointDetails details) {
|
||||
print(details.pointIndex);
|
||||
print(details.seriesIndex);
|
||||
}
|
||||
)
|
||||
],
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onPointDoubleTap
|
||||
|
||||
Triggers when double-tap the series point. The [onPointDoubleTap](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/onPointDoubleTap.html) callback contains the following arguments.
|
||||
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/dataPoints.html) - holds the data point collection.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/viewportPointIndex.html) - specifies the viewport index value of the double-tapped data point.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCircularChart(
|
||||
series: <CircularSeries>[
|
||||
PieSeries<ChartData, String>(
|
||||
onPointDoubleTap: (ChartPointDetails details) {
|
||||
print(details.pointIndex);
|
||||
print(details.seriesIndex);
|
||||
}
|
||||
)
|
||||
],
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onPointLongPress
|
||||
|
||||
Triggers when long press on the series point. The [onPointLongPress](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/onPointLongPress.html) callback contains the following arguments.
|
||||
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/dataPoints.html) - holds the data point collection.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/viewportPointIndex.html) - specifies the viewport index value of the long pressed data point.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfCircularChart(
|
||||
series: <CircularSeries>[
|
||||
PieSeries<ChartData, String>(
|
||||
onPointLongPress: (ChartPointDetails details) {
|
||||
print(details.pointIndex);
|
||||
print(details.seriesIndex);
|
||||
}
|
||||
)
|
||||
],
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
## onLegendTapped
|
||||
|
||||
Triggers when tapping the legend item. The [`onLegendTapped`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/onLegendTapped.html) Callback contains the following arguments.
|
||||
|
|
@ -177,7 +242,7 @@ Triggers when tapping the legend item. The [`onLegendTapped`](https://pub.dev/do
|
|||
|
||||
Triggers while selection changes. Here you can customize the selectedColor, unselectedColor, selectedBorderColor, selectedBorderWidth, unselectedBorderColor, and unselectedBorderWidth properties. The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/onSelectionChanged.html) Callback contains the following arguments.
|
||||
|
||||
* [`seriesRenderer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/series.html) - specifies current series.
|
||||
* [`seriesRenderer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/seriesRenderer.html) - specifies current series.
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/pointIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/pointIndex.html) - specifies the current point index.
|
||||
* [`selectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/selectedColor.html) - specifies color of the selected data points or series.
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 180 KiB |
|
|
@ -89,10 +89,10 @@ The following properties can be used to define and customize the [`title`](https
|
|||
|
||||
* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendTitle/text.html) - used to change the text of the title.
|
||||
* [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the text color, size, font family, fontStyle, and font weight.
|
||||
* [`textStyle.color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/color.html) - used to change the color of the text.
|
||||
* [`textStyle.fontFamily`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontFamily.html) - used to change the font family for legend text.
|
||||
* [`textStyle.fontStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontStyle.html) - used to change the font style for the legend text.
|
||||
* [`textStyle.fontSize`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontSize.html) - used to change the font size for the legend text.
|
||||
* [`textStyle.color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the color of the text.
|
||||
* [`textStyle.fontFamily`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the font family for legend text.
|
||||
* [`textStyle.fontStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the font style for the legend text.
|
||||
* [`textStyle.fontSize`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the font size for the legend text.
|
||||
* [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/alignment.html) - used to change the alignment of the title text. It can be near, center, or far.
|
||||
|
||||
{% highlight dart %}
|
||||
|
|
@ -273,6 +273,40 @@ You can change the position of the legend inside the chart. The following proper
|
|||
|
||||
|
||||
|
||||
## Floating legend
|
||||
|
||||
Places the legend in custom position. If the [`offset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/offset.html) has been set, the legend is moved from its actual position. For example, if the [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition-class.html) is `top`, then the legend will be placed in the top but in the position added to the actual top position.
|
||||
Also, the legend will not take a dedicated position for it and will be drawn on the top of the chart's plot area.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfCircularChart(
|
||||
legend: Legend(
|
||||
isVisible: true,
|
||||
// Legend will placed at the specified offset
|
||||
offset: Offset(20, 40)),
|
||||
series: <PieSeries>[
|
||||
PieSeries<ChartData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y),
|
||||
]))));
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final String x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Legend item template
|
||||
|
||||
You can customize the appearance of legend items with your template by using [`legendItemBuilder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/legendItemBuilder.html) property of [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/legend.html). Here you can specify the content that needs to be displayed in the legend text as widget.
|
||||
|
|
|
|||
|
|
@ -119,6 +119,41 @@ Multiple selection can be enabled using the [`enableMultiSelection`](https://pub
|
|||
|
||||
|
||||
|
||||
## Toggle selection
|
||||
|
||||
You can decide, whether to deselect the selected data point/series or remain selected when interacted with it again by setting the [`toggleSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/toggleSelection.html) property `true` or `false`. If set to true, deselection will be performed else the point will not get deselected.
|
||||
This works even while calling public methods, in various selection modes, with multi-selection, and also on dynamic changes.
|
||||
Defaults to `true`.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfCircularChart(
|
||||
series: <CircularSeries<ChartData, String>>[
|
||||
PieSeries<ChartData, String>(
|
||||
dataSource: chartData1,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
selectionBehavior: SelectionBehavior(
|
||||
enable: true,
|
||||
toggleSelection: false,
|
||||
)
|
||||
)
|
||||
]
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
Also refer [selection event](./events#onselectionchanged) for customizing the selection further.
|
||||
|
||||
#### See Also
|
||||
|
|
|
|||
|
|
@ -0,0 +1,699 @@
|
|||
---
|
||||
layout: post
|
||||
title: Editing in Flutter DataGrid | Flutter DataTable | Syncfusion
|
||||
description: Learn here all about how to perform editing in Syncfusion Flutter DataGrid (SfDataGrid) widget and more.
|
||||
platform: flutter
|
||||
control: SfDataGrid
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Editing in Flutter DataGrid
|
||||
|
||||
[SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) supports to edit the cell values by setting the [SfDataGrid.allowEditing](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/allowEditing.html) property as true and [SfDataGrid.navigationMode](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/navigationMode.html) as cell, [SfDataGrid.selectionMode](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/selectionMode.html) as other than none.
|
||||
|
||||
By default, [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) does not load any widget when cell is moved into edit mode. Users must load any widget when cell is moved into edit mode by returning the required widget through [DataGridSource.buildEditWidget](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/buildEditWidget.html) method in [DataGridSource](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/DataGridSource.html) class.
|
||||
|
||||
The following arguments are passed in `buildEditWidget` method,
|
||||
|
||||
* [row](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridRow-class.html): Gets the DataGridRow of the SfDataGrid.
|
||||
* [rowColumnIndex](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/RowColumnIndex-class.html): Gets the current row and column index of the DataGrid.
|
||||
* [column](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn-class.html): Gets the Grid Column of the SfDataGrid.
|
||||
* [submitCell](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/CellSubmit.html): Programmatically call to end the editing. Typically, this method can be called when the widget completes its
|
||||
editing. For example, `TextField.onSubmitted` method is called whenever TextField ends its editing. So, you can simply call submitCell method. This will automatically call the DataGridSource.
|
||||
|
||||
We recommend you save the edited value through editors in [DataGridSource.onCellSubmit](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/onCellSubmit.html) method. The `onCellSubmit` method will be called whenever the [submitCell](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/CellSubmit.html) method from [buildEditWidget](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/buildEditWidget.html) method is called or other cells are navigated when a cell is in edit mode.
|
||||
|
||||
The following example show how to enable editing in datagrid and committing the edited cell value in `onCellSubmit` method.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
allowEditing: true,
|
||||
selectionMode: SelectionMode.single,
|
||||
navigationMode: GridNavigationMode.cell,
|
||||
columns: [
|
||||
GridColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
/// Helps to hold the new value of all editable widget.
|
||||
/// Based on the new value we will commit the new value into the corresponding
|
||||
/// DataGridCell on onCellSubmit method.
|
||||
dynamic newCellValue;
|
||||
|
||||
/// Help to control the editable text in [TextField] widget.
|
||||
TextEditingController editingController = TextEditingController();
|
||||
|
||||
@override
|
||||
void onCellSubmit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex,
|
||||
GridColumn column) {
|
||||
final dynamic oldValue = dataGridRow
|
||||
.getCells()
|
||||
.firstWhereOrNull((DataGridCell dataGridCell) =>
|
||||
dataGridCell.columnName == column.columnName)
|
||||
?.value ??
|
||||
'';
|
||||
|
||||
final int dataRowIndex = dataGridRows.indexOf(dataGridRow);
|
||||
|
||||
if (newCellValue == null || oldValue == newCellValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (column.columnName == 'id') {
|
||||
dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] =
|
||||
DataGridCell<int>(columnName: 'id', value: newCellValue);
|
||||
_employees[dataRowIndex].id = newCellValue as int;
|
||||
} else if (column.columnName == 'name') {
|
||||
dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] =
|
||||
DataGridCell<String>(columnName: 'name', value: newCellValue);
|
||||
_employees[dataRowIndex].name = newCellValue.toString();
|
||||
} else if (column.columnName == 'designation') {
|
||||
dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] =
|
||||
DataGridCell<String>(columnName: 'designation', value: newCellValue);
|
||||
_employees[dataRowIndex].designation = newCellValue.toString();
|
||||
} else {
|
||||
dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] =
|
||||
DataGridCell<int>(columnName: 'salary', value: newCellValue);
|
||||
_employees[dataRowIndex].salary = newCellValue as int;
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget? buildEditWidget(DataGridRow dataGridRow,
|
||||
RowColumnIndex rowColumnIndex, GridColumn column, CellSubmit submitCell) {
|
||||
// Text going to display on editable widget
|
||||
final String displayText = dataGridRow
|
||||
.getCells()
|
||||
.firstWhereOrNull((DataGridCell dataGridCell) =>
|
||||
dataGridCell.columnName == column.columnName)
|
||||
?.value
|
||||
?.toString() ??
|
||||
'';
|
||||
|
||||
// The new cell value must be reset.
|
||||
// To avoid committing the [DataGridCell] value that was previously edited
|
||||
// into the current non-modified [DataGridCell].
|
||||
newCellValue = null;
|
||||
|
||||
final bool isTextAlignRight =
|
||||
column.columnName == 'id' || column.columnName == 'salary';
|
||||
|
||||
final bool isNumericKeyBoardType =
|
||||
column.columnName == 'id' || column.columnName == 'salary';
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
alignment:
|
||||
isTextAlignRight ? Alignment.centerRight : Alignment.centerLeft,
|
||||
child: TextField(
|
||||
autofocus: true,
|
||||
controller: editingController..text = displayText,
|
||||
textAlign: isTextAlignRight ? TextAlign.right : TextAlign.left,
|
||||
decoration: InputDecoration(
|
||||
contentPadding: const EdgeInsets.fromLTRB(0, 0, 0, 16.0),
|
||||
focusedBorder: UnderlineInputBorder(
|
||||
borderSide: BorderSide(color: Colors.black))),
|
||||
keyboardType:
|
||||
isNumericKeyBoardType ? TextInputType.number : TextInputType.text,
|
||||
onChanged: (String value) {
|
||||
if (value.isNotEmpty) {
|
||||
if (isNumericKeyBoardType) {
|
||||
newCellValue = int.parse(value);
|
||||
} else {
|
||||
newCellValue = value;
|
||||
}
|
||||
} else {
|
||||
newCellValue = null;
|
||||
}
|
||||
},
|
||||
onSubmitted: (String value) {
|
||||
// In Mobile Platform.
|
||||
// Call [CellSubmit] callback to fire the canSubmitCell and
|
||||
// onCellSubmit to commit the new value in single place.
|
||||
submitCell();
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
>**NOTE**
|
||||
Download demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-perform-editing-in-flutter-datatable-sfdatagrid).
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Disable the editing for specific column
|
||||
|
||||
To disable the editing for a particular column, set the [GridColumn.allowEditing](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/allowEditing.html) property as `false`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
allowEditing: true,
|
||||
selectionMode: SelectionMode.single,
|
||||
navigationMode: GridNavigationMode.cell,
|
||||
columns: [
|
||||
GridColumn(
|
||||
columnName: 'id',
|
||||
allowEditing: false,
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Entering edit mode
|
||||
|
||||
By default, cell will be moved to edit mode when you double tap the cells. You can enable the editing to be performed on tapping, set the [SfDataGrid.editingGestureType](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/editingGestureType.html) property as tap.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
allowEditing: true,
|
||||
selectionMode: SelectionMode.single,
|
||||
navigationMode: GridNavigationMode.cell,
|
||||
editingGestureType: EditingGestureType.tap,
|
||||
columns: [
|
||||
GridColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Methods
|
||||
|
||||
### onCellBeginEdit
|
||||
|
||||
The [DataGridSource.onCellBeginEdit](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/onCellBeginEdit.html) method is called when the cell enters into edit mode. You can return false if you don’t want to move any specific cells to edit mode. The following arguments are passed in this method,
|
||||
|
||||
* [row](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridRow-class.html): Gets the DataGridRow of the SfDataGrid.
|
||||
* [rowColumnIndex](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/RowColumnIndex-class.html): Gets the current row and column index of the DataGrid.
|
||||
* [column](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn-class.html): Gets the Grid Column of the SfDataGrid.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight dart %}
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
@override
|
||||
bool onCellBeginEdit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex,
|
||||
GridColumn column) {
|
||||
if(column.columnName == 'id'){
|
||||
// Return false, to restrict entering into the editing.
|
||||
return false;
|
||||
}else{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### canSubmitCell
|
||||
|
||||
The [DataGridSource.canSubmitCell](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/canSubmitCell.html) is called before the cell is ending its editing. If you want to restrict the cell from being end its editing, you can return false. [onCellSubmit](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/onCellSubmit.html) will be called only if the `canSubmitCell` returns true. The following arguments are passed in this method,
|
||||
|
||||
* [row](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridRow-class.html): Gets the DataGridRow of the SfDataGrid.
|
||||
* [rowColumnIndex](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/RowColumnIndex-class.html): Gets the current row and column index of the DataGrid.
|
||||
* [column](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn-class.html): Gets the Grid Column of the SfDataGrid.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight dart %}
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
@override
|
||||
bool canSubmitCell(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex,
|
||||
GridColumn column) {
|
||||
if (column.columnName == 'id' && newCellValue == null) {
|
||||
// Return false, to retain in edit mode.
|
||||
// To avoid null value for cell
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### onCellSubmit
|
||||
|
||||
The [DataGridSource.onCellSubmit](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/onCellSubmit.html) method is called when the editing is completed. We recommend you save the edited values to underlying collection in this method. It makes sense to handle the entire editing operation in this single method.
|
||||
|
||||
>**NOTE**
|
||||
There is no need to call the `notifyListeners` after you update the DataGridRows. DataGrid will refresh the UI automatically.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight dart %}
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
|
||||
@override
|
||||
void onCellSubmit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex,
|
||||
GridColumn column) {
|
||||
final dynamic oldValue = dataGridRow
|
||||
.getCells()
|
||||
.firstWhereOrNull((DataGridCell dataGridCell) =>
|
||||
dataGridCell.columnName == column.columnName)
|
||||
?.value ??
|
||||
'';
|
||||
|
||||
final int dataRowIndex = dataGridRows.indexOf(dataGridRow);
|
||||
|
||||
if (newCellValue == null || oldValue == newCellValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (column.columnName == 'id') {
|
||||
dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] =
|
||||
DataGridCell<int>(columnName: 'id', value: newCellValue);
|
||||
_employees[dataRowIndex].id = newCellValue as int;
|
||||
} else if (column.columnName == 'name') {
|
||||
dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] =
|
||||
DataGridCell<String>(columnName: 'name', value: newCellValue);
|
||||
_employees[dataRowIndex].name = newCellValue.toString();
|
||||
} else if (column.columnName == 'designation') {
|
||||
dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] =
|
||||
DataGridCell<String>(columnName: 'designation', value: newCellValue);
|
||||
_employees[dataRowIndex].designation = newCellValue.toString();
|
||||
} else {
|
||||
dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] =
|
||||
DataGridCell<int>(columnName: 'salary', value: newCellValue);
|
||||
_employees[dataRowIndex].salary = newCellValue as int;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### onCellCancelEdit
|
||||
|
||||
The [DataGridSource.onCellCancelEdit](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/onCellCancelEdit.html) method is called when you press the `Esc` key from Web and Desktop platforms. The [canSubmitCell](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/canSubmitCell.html) and [onCellSubmit](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/onCellSubmit.html) will not be called when `Esc` key is pressed.
|
||||
|
||||
>**NOTE**
|
||||
No need to call the notifyListener inside it.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight dart %}
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
@override
|
||||
void onCellCancelEdit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex, GridColumn column) {
|
||||
// handle the cancel editing code here
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Programmatic editing
|
||||
|
||||
### BeginEdit
|
||||
|
||||
The SfDataGrid allows to move the cell into edit mode programmatically by calling the [DataGridController.beginEdit](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridController/beginEdit.html) method.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight dart %}
|
||||
|
||||
final DataGridController _dataGridController = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
children: [
|
||||
TextButton(
|
||||
child: Text("Begin Edit"),
|
||||
onPressed: () {
|
||||
_dataGridController.beginEdit(RowColumnIndex(2, 3));
|
||||
},
|
||||
),
|
||||
Expanded(
|
||||
child: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
allowEditing: true,
|
||||
selectionMode: SelectionMode.single,
|
||||
navigationMode: GridNavigationMode.cell,
|
||||
controller: _dataGridController,
|
||||
columns: [
|
||||
GridColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### EndEdit
|
||||
|
||||
The [SfDataGrid.endEdit](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridController/endEdit.html) method can be called to programmatically end the editing for specific cell.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight dart %}
|
||||
|
||||
final DataGridController _dataGridControlle r = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
children: [
|
||||
TextButton(
|
||||
child: Text("End Edit"),
|
||||
onPressed: () {
|
||||
_dataGridController.endEdit();
|
||||
},
|
||||
),
|
||||
Expanded(
|
||||
child: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
allowEditing: true,
|
||||
selectionMode: SelectionMode.single,
|
||||
navigationMode: GridNavigationMode.cell,
|
||||
controller: _dataGridController,
|
||||
columns: [
|
||||
GridColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Restrict specific cell or column from being entered into edit mode at run time
|
||||
|
||||
In order to cancel the editing for specific cell or column at run time, you can override the [onCellBeginEdit](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/onCellBeginEdit.html) method in `DataGridSource` class and return false for specific cell or column.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight dart %}
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
@override
|
||||
bool onCellBeginEdit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex,
|
||||
GridColumn column) {
|
||||
|
||||
// Editing prevented for the cell at RowColumnIndex(2,2).
|
||||
if (rowColumnIndex.equals(RowColumnIndex(2, 2))) {
|
||||
return false;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
The following code example shows how to cancel the specific column from being entered into edit mode,
|
||||
|
||||
{% tabs %}
|
||||
{% highlight dart %}
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
@override
|
||||
bool onCellBeginEdit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex,
|
||||
GridColumn column) {
|
||||
if (column.columnName == 'id' || column.columnName == 'salary') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Cancel edited cell value from being committed
|
||||
|
||||
You can override the [canSubmitCell](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/canSubmitCell.html) from [DataGridSource](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource-class.html) class and return false based on your criteria.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight dart %}
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
@override
|
||||
bool canSubmitCell(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex,
|
||||
GridColumn column) {
|
||||
if (newCellValue == null || newCellValue == '') {
|
||||
// Editing widget will retain in view.
|
||||
// onCellSubmit method will not fire.
|
||||
return false;
|
||||
} else {
|
||||
// Allow to call the onCellSumbit.
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -0,0 +1,690 @@
|
|||
---
|
||||
layout: post
|
||||
title: Scrolling in Flutter DataGrid | DataTable | Syncfusion
|
||||
description: Learn here all about scrolling features of Syncfusion Flutter DataGrid (SfDataGrid) widget and more.
|
||||
platform: flutter
|
||||
control: SfDataGrid
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Scrolling in Flutter DataGrid (SfDataGrid)
|
||||
|
||||
SfDataGrid provides support to scroll the content in both the horizontal and vertical direction.
|
||||
|
||||
## Show Scrollbars always
|
||||
|
||||
You can show horizontal and vertical scrollbars always by using the [SfDataGrid.isScrollbarAlwaysShown](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/isScrollbarAlwaysShown.html) property. When the `isScrollbarAlwaysShown` is set to false, the scrollbar will be shown during scrolling and will fade out otherwise. When it is true, the scrollbar will always be visible and never fade out even after the scrolling.
|
||||
|
||||
N> The default value of `isScrollbarAlwaysShown` is false.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
isScrollbarAlwaysShown: true,
|
||||
columns: [
|
||||
GridColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Setting scroll physics for scroll bars
|
||||
|
||||
SfDataGrid allows you to set the [ScrollPhysics](https://api.flutter.dev/flutter/widgets/ScrollPhysics-class.html) for horizontal and vertical scrollbars to control how the scroll view should respond to user input by using [horizontalScrollPhysics](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/horizontalScrollPhysics.html) and [verticalScrollPhysics](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/verticalScrollPhysics.html) properties respectively.
|
||||
|
||||
N> The default values of `horizontalScrollPhysics` and `verticalScrollPhysics` properties are `AlwaysScrollableScrollPhysics()`.
|
||||
|
||||
The following example shows how to disable the horizontal and vertical scrolling by setting `NeverScrollableScrollPhysics()`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
horizontalScrollPhysics: NeverScrollableScrollPhysics(),
|
||||
verticalScrollPhysics: NeverScrollableScrollPhysics(),
|
||||
columns: [
|
||||
GridColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Programmatic scrolling
|
||||
|
||||
The Flutter DataTable provides support to scroll to a particular row and column index programmatically.
|
||||
|
||||
### Scroll to cell
|
||||
|
||||
Scroll programmatically to a particular cell can be achieved by passing the row and column index in the `scrollToCell` method. SfDataGrid allows to enable or disable the scrolling animation by passing `true` to the `canAnimate` parameter in `scrollToCell` method.
|
||||
|
||||
N> The default value of `canAnimate` is `false`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
final DataGridController _controller = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(children: [
|
||||
FlatButton(
|
||||
child: Text('ScrollToCell'),
|
||||
onPressed: () {
|
||||
_controller.scrollToCell(15, 2);
|
||||
},
|
||||
),
|
||||
Expanded( child:SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columns: [
|
||||
GridColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
controller: _controller,
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
### Scroll to row
|
||||
|
||||
You can scroll programmatically to a particular row by passing the row index in the `scrollToRow` method. SfDataGrid allows to enable or disable the scrolling animation by passing `true` to the `canAnimate` parameter in `scrollToRow` method.
|
||||
|
||||
N> The default value of `canAnimate` is `false`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
final DataGridController _controller = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(children: [
|
||||
FlatButton(
|
||||
child: Text('ScrollToRow'),
|
||||
onPressed: () {
|
||||
_controller.scrollToRow(15);
|
||||
},
|
||||
),
|
||||
Expanded( child:SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columns: [
|
||||
GridColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
controller: _controller,
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Scroll to column
|
||||
|
||||
You can scroll programmatically to a particular column by passing the column index in the `scrollToColumn` method. SfDataGrid allows to enable or disable the scrolling animation by passing `true` to the `canAnimate` parameter in `scrollToColumn` method.
|
||||
|
||||
N> The default value of `canAnimate` is `false`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
final DataGridController _controller = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(children: [
|
||||
FlatButton(
|
||||
child: Text('ScrollToColumn'),
|
||||
onPressed: () {
|
||||
_controller.scrollToColumn(2);
|
||||
},
|
||||
),
|
||||
Expanded( child:SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columns: [
|
||||
GridColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
controller: _controller,
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
### Scroll to specific position
|
||||
|
||||
`SfDataGrid` allows to position the scrolled row or column in view programmatically by passing `DataGridScrollPosition` to `rowPosition` and `columnPosition` arguments respectively in `scrollToCell` and `position` argument of `scrollToRow` and `scrollToColumn` methods. Below are the four types of positions available,
|
||||
|
||||
`makeVisible`: Scroll to make a specified row/column visible in datagrid. If the specified row/column is already in view, scrolling will not occur.
|
||||
`start`: Scroll to make the row/column positioned at the start of the datagrid.
|
||||
`center`: Scroll to make the row/column positioned at the center of the datagrid.
|
||||
`end`: Scroll to make the row/column positioned at the end of the datagrid.
|
||||
|
||||
N> The default value of `DataGridScrollPosition` is `Start`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
final DataGridController _controller = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(children: [
|
||||
FlatButton(
|
||||
child: Text('ScrollToCell'),
|
||||
onPressed: () {
|
||||
_controller.scrollToCell(15, 2,
|
||||
canAnimate: true,
|
||||
rowPosition: DataGridScrollPosition.start,
|
||||
columnPosition: DataGridScrollPosition.start);
|
||||
},
|
||||
),
|
||||
Expanded( child:SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columns: [
|
||||
GridColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
controller: _controller,
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Scroll to vertical offset
|
||||
|
||||
The Flutter DataTable supports to scroll programmatically to a particular vertical offset by passing the offset value to the `scrollToVerticalOffset` method. Also, it allows to enable the scrolling animation by passing `true` to the `canAnimate` parameter in `scrollToVerticalOffset` method.
|
||||
|
||||
N> The default value of `canAnimate` is `false`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
final DataGridController _controller = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(children: [
|
||||
FlatButton(
|
||||
child: Text('ScrollToVerticalOffset'),
|
||||
onPressed: () {
|
||||
_controller.scrollToVerticalOffset(500);
|
||||
},
|
||||
),
|
||||
Expanded( child:SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columns: [
|
||||
GridColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
controller: _controller,
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Scroll to horizontal offset
|
||||
|
||||
The Flutter DataTable supports to scroll programmatically to a particular horizontal offset by passing the offset value to the `scrollToHorizontalOffset` method. Also, it allows to enable the scrolling animation by passing `true` to the `canAnimate` parameter in `scrollToHorizontalOffset` method.
|
||||
|
||||
N> The default value of `canAnimate` is `false`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
final DataGridController _controller = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(children: [
|
||||
FlatButton(
|
||||
child: Text('ScrollToHorizontalOffset'),
|
||||
onPressed: () {
|
||||
_controller.scrollToHorizontalOffset(400);
|
||||
},
|
||||
),
|
||||
Expanded( child:SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columns: [
|
||||
GridColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
controller: _controller,
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
N> The vertical and horizontal scrolled offset can be retrieved by using `DataGridController.verticalOffset` and `DataGridController.horizontalOffset` properties.
|
||||
|
||||
## Listen the scroll changes
|
||||
|
||||
Listen to the vertical and horizontal scroll changes by using the [verticalScrollController](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/verticalScrollController.html) and the [horizontalScrollController](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/horizontalScrollController.html) properties respectively . Set the listener in the `verticalScrollController` and the `horizontalScrollController` using the `addListener` method. By subscribing to this listener, the subscribed method in the sample level will be called on vertical or horizontal scrolling.
|
||||
|
||||
The following example demonstrates how to load more rows when vertical scrolling reaches 70% of the vertical maxScrollExtent,
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late _EmployeeDataSource employeeDataSource;
|
||||
late ScrollController verticalScrollController;
|
||||
|
||||
void verticalListner() {
|
||||
if (verticalScrollController.position.pixels >=
|
||||
verticalScrollController.position.maxScrollExtent * (70 / 100)) {
|
||||
employeeDataSource.loadMoreRows();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
employeeDataSource = _EmployeeDataSource();
|
||||
verticalScrollController = ScrollController()..addListener(verticalListner);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Flutter DataGrid Sample'),
|
||||
),
|
||||
body: SfDataGrid(
|
||||
source: employeeDataSource,
|
||||
verticalScrollController: verticalScrollController,
|
||||
columnWidthMode: ColumnWidthMode.fill,
|
||||
columns: _getColumns()),
|
||||
);
|
||||
}
|
||||
|
||||
class _EmployeeDataSource extends DataGridSource {
|
||||
_EmployeeDataSource() {
|
||||
loadEmployees(25);
|
||||
}
|
||||
|
||||
List<_Employee> employees = [];
|
||||
|
||||
List<DataGridRow> dataGridRows = [];
|
||||
|
||||
@override
|
||||
List<DataGridRow> get rows => dataGridRows;
|
||||
|
||||
@override
|
||||
DataGridRowAdapter buildRow(DataGridRow row) {
|
||||
return DataGridRowAdapter(cells: [
|
||||
Container(
|
||||
padding: EdgeInsets.all(8),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
row.getCells()[0].value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
padding: EdgeInsets.all(8),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
row.getCells()[1].value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
padding: EdgeInsets.all(8),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
row.getCells()[2].value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
padding: EdgeInsets.all(8),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
NumberFormat.currency(locale: 'en_US', symbol: '\$')
|
||||
.format(row.getCells()[3].value)
|
||||
.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
]);
|
||||
}
|
||||
|
||||
void loadEmployees(int count) {
|
||||
final Random random = Random();
|
||||
final int startIndex = employees.isNotEmpty ? employees.length : 0,
|
||||
endIndex = startIndex + count;
|
||||
|
||||
for (int i = startIndex; i < endIndex; i++) {
|
||||
var employee = _Employee(
|
||||
1000 + i,
|
||||
1700 + i,
|
||||
names[i < names.length ? i : random.nextInt(names.length - 1)],
|
||||
random.nextInt(1000) + random.nextDouble(),
|
||||
cities[random.nextInt(cities.length - 1)],
|
||||
1500.0 + random.nextInt(100),
|
||||
);
|
||||
employees.add(employee);
|
||||
dataGridRows.add(employee.getDataGridRow);
|
||||
}
|
||||
}
|
||||
|
||||
void loadMoreRows() {
|
||||
loadEmployees(15);
|
||||
notifyListeners();
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
**NOTE**
|
||||
Download demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-load-data-lazily-when-scrolling-reaches-70-in-flutter-datatable-sfdatagrid).
|
||||
|
|
@ -222,29 +222,88 @@ N> This callback will not be called, when the builder is specified for data labe
|
|||
|
||||
{% endhighlight %}
|
||||
|
||||
## onPointTapped
|
||||
## onPointTap
|
||||
|
||||
Triggers when tapping the series point. The [`onPointTapped`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onPointTapped.html) Callback contains the following arguments.
|
||||
Triggers when tapping on the series point. The [onPointTap](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/onPointTap.html) callback contains the following arguments.
|
||||
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/pointIndex.html) - specifies the current point index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/dataPoints.html) - holds the data point collection.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/viewportPointIndex.html) - to get the viewport index value of the tapped data label.
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/dataPoints.html) - holds the data point collection.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/viewportPointIndex.html) - specifies the viewport index value of the tapped data point.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfFunnelChart(
|
||||
onPointTapped: (PointTapArgs args){
|
||||
print(args.seriesIndex);
|
||||
print(args.pointIndex);
|
||||
}
|
||||
series: FunnelSeries<Sample, DateTime>(
|
||||
onPointTap: (ChartPointDetails details) {
|
||||
print(details.pointIndex);
|
||||
print(details.seriesIndex);
|
||||
}
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onPointDoubleTap
|
||||
|
||||
Triggers when double-tap the series point. The [onPointDoubleTap](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/onPointDoubleTap.html) callback contains the following arguments.
|
||||
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/dataPoints.html) - holds the data point collection.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/viewportPointIndex.html) - specifies the viewport index value of the double-tapped data point.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfFunnelChart(
|
||||
series: FunnelSeries<Sample, DateTime>(
|
||||
onPointDoubleTap: (ChartPointDetails details) {
|
||||
print(details.pointIndex);
|
||||
print(details.seriesIndex);
|
||||
}
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onPointLongPress
|
||||
|
||||
Triggers when long press on the series point. The [onPointLongPress](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/onPointLongPress.html) callback contains the following arguments.
|
||||
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/dataPoints.html) - holds the data point collection.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/viewportPointIndex.html) - specifies the viewport index value of the long pressed data point.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfFunnelChart(
|
||||
series: FunnelSeries<Sample, DateTime>(
|
||||
onPointLongPress: (ChartPointDetails details) {
|
||||
print(details.pointIndex);
|
||||
print(details.seriesIndex);
|
||||
}
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -84,10 +84,10 @@ The following properties can be used to define and customize the [`title`](https
|
|||
|
||||
* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendTitle/text.html) - used to change the text of the title.
|
||||
* [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the text color, size, font family, fontStyle, and font weight.
|
||||
* [`textStyle.color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/color.html) - used to change the color of the text.
|
||||
* [`textStyle.fontFamily`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontFamily.html) - used to change the font family for legend text.
|
||||
* [`textStyle.fontStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontStyle.html) - used to change the font style for the legend text.
|
||||
* [`textStyle.fontSize`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontSize.html) - used to change the font size for the legend text.
|
||||
* [`textStyle.color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the color of the text.
|
||||
* [`textStyle.fontFamily`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the font family for legend text.
|
||||
* [`textStyle.fontStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the font style for the legend text.
|
||||
* [`textStyle.fontSize`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the font size for the legend text.
|
||||
* [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/alignment.html) - used to change the alignment of the title text. It can be near, center, or far.
|
||||
|
||||
{% highlight dart %}
|
||||
|
|
@ -255,6 +255,39 @@ You can change the position of the legend inside the chart. The following proper
|
|||
|
||||
|
||||
|
||||
## Floating legend
|
||||
|
||||
Places the legend in custom position. If the [`offset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/offset.html) has been set, the legend is moved from its actual position. For example, if the [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition-class.html) is `top`, then the legend will be placed in the top but in the position added to the actual top position.
|
||||
Also, the legend will not take a dedicated position for it and will be drawn on the top of the chart's plot area.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfFunnelChart(
|
||||
legend: Legend(
|
||||
isVisible: true,
|
||||
// Legend will placed at the specified offset
|
||||
offset: Offset(20, 40)),
|
||||
series: FunnelSeries<SalesData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y),
|
||||
))));
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final String x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Legend item template
|
||||
|
||||
You can customize the appearance of legend items with your template by using [`legendItemBuilder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/legendItemBuilder.html) property of [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/legend.html). Here you can specify the content that needs to be displayed in the legend text as widget.
|
||||
|
|
|
|||
|
|
@ -141,6 +141,33 @@ You can select a point or series programmatically on a chart using [`initialSele
|
|||
|
||||
|
||||
|
||||
## Toggle selection
|
||||
|
||||
You can decide, whether to deselect the selected data point/series or remain selected when interacted with it again by setting the [`toggleSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/toggleSelection.html) property `true` or `false`. If set to true, deselection will be performed else the point will not get deselected.
|
||||
This works even while calling public methods, in various selection modes, with multi-selection, and also on dynamic changes.
|
||||
Defaults to `true`.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfFunnelChart(
|
||||
series: FunnelSeries<SalesData, String>(
|
||||
dataSource: chartData1,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
selectionBehavior: SelectionBehavior(
|
||||
enable: true,
|
||||
toggleSelection: false,
|
||||
))
|
||||
))));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
Also refer [selection event](./events#onselectionchanged) for customizing the selection further.
|
||||
|
||||
## Methods in SelectionBehavior
|
||||
|
|
|
|||
|
|
@ -206,7 +206,7 @@ N> This callback will not be called, when the builder is specified for data labe
|
|||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
child: SfFunnelChart(
|
||||
child: SfPyramidChart(
|
||||
onDatalabelTapped: (DataLabelTapArgs args) {
|
||||
print(args.seriesIndex);
|
||||
},
|
||||
|
|
@ -224,30 +224,88 @@ N> This callback will not be called, when the builder is specified for data labe
|
|||
|
||||
{% endhighlight %}
|
||||
|
||||
## onPointTapped
|
||||
## onPointTap
|
||||
|
||||
Triggers when tapping the series point. The [`onPointTapped`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/onPointTapped.html) Callback contains the following arguments.
|
||||
Triggers when tapping on the series point. The [onPointTap](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/onPointTap.html) callback contains the following arguments.
|
||||
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/pointIndex.html) - specifies the current point index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/dataPoints.html) - holds the data point collection.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/viewportPointIndex.html) - to get the viewport index value of the tapped data label.
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/dataPoints.html) - holds the data point collection.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/viewportPointIndex.html) - specifies the viewport index value of the tapped data point.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfPyramidChart(
|
||||
onPointTapped: (PointTapArgs args){
|
||||
print(args.seriesIndex);
|
||||
print(args.pointIndex);
|
||||
}
|
||||
series: PyramidSeries<Sample, DateTime>(
|
||||
onPointTap: (ChartPointDetails details) {
|
||||
print(details.pointIndex);
|
||||
print(details.seriesIndex);
|
||||
}
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onPointDoubleTap
|
||||
|
||||
Triggers when double-tap the series point. The [onPointDoubleTap](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/onPointDoubleTap.html) callback contains the following arguments.
|
||||
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/dataPoints.html) - holds the data point collection.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/viewportPointIndex.html) - specifies the viewport index value of the double-tapped data point.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfPyramidChart(
|
||||
series: PyramidSeries<Sample, DateTime>(
|
||||
onPointDoubleTap: (ChartPointDetails details) {
|
||||
print(details.pointIndex);
|
||||
print(details.seriesIndex);
|
||||
}
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onPointLongPress
|
||||
|
||||
Triggers when long press on the series point. The [onPointLongPress](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/onPointLongPress.html) callback contains the following arguments.
|
||||
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/dataPoints.html) - holds the data point collection.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/viewportPointIndex.html) - specifies the viewport index value of the long pressed data point.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfPyramidChart(
|
||||
series: PyramidSeries<Sample, DateTime>(
|
||||
onPointLongPress: (ChartPointDetails details) {
|
||||
print(details.pointIndex);
|
||||
print(details.seriesIndex);
|
||||
}
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -88,10 +88,10 @@ The following properties are used to define and customize the [`title`](https://
|
|||
|
||||
* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendTitle/text.html) - used to change the text of the title.
|
||||
* [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the text color, size, font family, fontStyle, and font weight.
|
||||
* [`textStyle.color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/color.html) - used to change the color of the text.
|
||||
* [`textStyle.fontFamily`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontFamily.html) - used to change the font family for legend text.
|
||||
* [`textStyle.fontStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontStyle.html) - used to change the font style for the legend text.
|
||||
* [`textStyle.fontSize`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontSize.html) - used to change the font size for the legend text.
|
||||
* [`textStyle.color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the color of the text.
|
||||
* [`textStyle.fontFamily`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the font family for legend text.
|
||||
* [`textStyle.fontStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the font style for the legend text.
|
||||
* [`textStyle.fontSize`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/textStyle.html) - used to change the font size for the legend text.
|
||||
* [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/alignment.html) - used to change the alignment of the title text; it can be near, center, or far.
|
||||
|
||||
{% highlight dart %}
|
||||
|
|
@ -259,6 +259,39 @@ You can change the position of the legend inside the chart. The following proper
|
|||
|
||||
|
||||
|
||||
## Floating legend
|
||||
|
||||
Places the legend in custom position. If the [`offset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/offset.html) has been set, the legend is moved from its actual position. For example, if the [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition-class.html) is `top`, then the legend will be placed in the top but in the position added to the actual top position.
|
||||
Also, the legend will not take a dedicated position for it and will be drawn on the top of the chart's plot area.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfPyramidChart(
|
||||
legend: Legend(
|
||||
isVisible: true,
|
||||
// Legend will placed at the specified offset
|
||||
offset: Offset(20, 40)),
|
||||
series: PyramidSeries<SalesData, String>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y),
|
||||
))));
|
||||
}
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y);
|
||||
final String x;
|
||||
final double? y;
|
||||
}
|
||||
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Legend item template
|
||||
|
||||
You can customize the appearance of legend items with your template by using [`legendItemBuilder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/legendItemBuilder.html) property of [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/legend.html). Here you can specify the content that needs to be displayed in the legend text as widget.
|
||||
|
|
|
|||
|
|
@ -117,6 +117,33 @@ Multiple selection can be enabled using the [`enableMultiSelection`](https://pub
|
|||
|
||||
|
||||
|
||||
## Toggle selection
|
||||
|
||||
You can decide, whether to deselect the selected data point/series or remain selected when interacted with it again by setting the [`toggleSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/toggleSelection.html) property `true` or `false`. If set to true, deselection will be performed else the point will not get deselected.
|
||||
This works even while calling public methods, in various selection modes, with multi-selection, and also on dynamic changes.
|
||||
Defaults to `true`.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfPyramidChart(
|
||||
series: PyramidSeries<SalesData, String>(
|
||||
dataSource: chartData1,
|
||||
xValueMapper: (ChartData data, _) => data.x,
|
||||
yValueMapper: (ChartData data, _) => data.y,
|
||||
selectionBehavior: SelectionBehavior(
|
||||
enable: true,
|
||||
toggleSelection: false,
|
||||
))
|
||||
))));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Selection on initial rendering
|
||||
|
||||
You can select a point or series programmatically on a chart using [`initialSelectedDataIndexes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries/initialSelectedDataIndexes.html) property of chart.
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче