Latest source merged from Syncfusion
This commit is contained in:
pipeline
Родитель
e2103e5829
Коммит
beefe69ebd
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Callbacks in Flutter Date Range Picker | Date Picker | Syncfusion
|
||||
description: This session describes the Date Range Picker callbacks in the SfDateRangePicker widget in the Flutter.
|
||||
title: Callbacks in Flutter Date Range Picker widget | Syncfusion
|
||||
description: Learn here all about Callbacks of Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget and more.
|
||||
platform: Flutter
|
||||
control: SfDateRangePicker
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
## Callbacks in Flutter date range picker
|
||||
## Callbacks in Flutter Date Range Picker (SfDateRangePicker)
|
||||
Calendar supports the `ViewChangedCallback` and `SelectionChangedCallback` to interact with the Flutter date range picker.
|
||||
|
||||
### View changed callback
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility of Syncfusion Flutter Date Range Picker | Date Picker
|
||||
description: Learn about the accessibility support in Syncfusion Flutter SfDateRangePicker widget in Flutter | DatePicker
|
||||
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 with Flutter DateRangePicker (SfDateRangePicker)
|
||||
# Accessibility in Flutter DateRangePicker (SfDateRangePicker)
|
||||
|
||||
The `SfDateRangePicker` can easily be accessed by screen readers. Please find the following table for inner elements.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,102 @@
|
|||
---
|
||||
layout: post
|
||||
title: Builders in Flutter Date Range Picker widget | Syncfusion
|
||||
description: Learn here all about Bulders feature of Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget and more.
|
||||
platform: Flutter
|
||||
control: SfDateRangePicker
|
||||
documentation: ug
|
||||
---
|
||||
# Builders in Flutter Date Range Picker (SfDateRangePicker)
|
||||
The date range picker allows you to create a responsive UI with the conditions based on a widget’s details, and to design and create your custom view to the month cells and year cells in the date range picker.
|
||||
|
||||
## Cell builder
|
||||
The [DateRangePickerCellBuilder](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerCellBuilder.html) allows you to design your custom view and assign the view to the month and year view cells of the date range picker by returning an appropriate widget in the [cellBuilder](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/cellBuilder.html) of [SfDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker-class.html).
|
||||
|
||||
[DateRangePickerCellDetails](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerCellDetails-class.html): Returns the details of the cell.
|
||||
|
||||
`date`: The date associate with the cell.
|
||||
`bound`: Returns the cell bounds.
|
||||
`visibleDates`: The visible dates of the current view.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
class MyAppState extends State<MyApp> {
|
||||
DateRangePickerController _controller = DateRangePickerController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfDateRangePicker(
|
||||
controller: _controller,
|
||||
cellBuilder:
|
||||
(BuildContext context, DateRangePickerCellDetails details) {
|
||||
final bool isToday = isSameDate(details.date, DateTime.now());
|
||||
final bool isBlackOut = isBlackedDate(details.date.day);
|
||||
final bool isSpecialDate = isSpecialDay(details.date.day);
|
||||
return Container(
|
||||
margin: EdgeInsets.all(2),
|
||||
padding: EdgeInsets.only(top: kIsWeb ? 5 : 10),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.blueAccent,
|
||||
border: isToday
|
||||
? Border.all(color: Colors.black, width: 2)
|
||||
: null),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: <Widget>[
|
||||
Text(
|
||||
details.date.day.toString(),
|
||||
style: TextStyle(
|
||||
fontSize: kIsWeb ? 11 : 15,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
isBlackOut
|
||||
? Icon(
|
||||
Icons.block_sharp,
|
||||
size: 13,
|
||||
)
|
||||
: isSpecialDate
|
||||
? Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.cake,
|
||||
size: 13,
|
||||
),
|
||||
Icon(
|
||||
Icons.celebration,
|
||||
size: 13,
|
||||
),
|
||||
Icon(
|
||||
Icons.audiotrack,
|
||||
size: 13,
|
||||
)
|
||||
],
|
||||
)
|
||||
: Container()
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
)),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
>**NOTE**
|
||||
* Use [HijriDateRangePickerCellDetails]() for the [SfHijriDateRangePicker](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfHijriDateRangePicker-class.html).
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
[How to customize the date range picker cells using builder in the Flutter (SfDateRangePicker)](https://www.syncfusion.com/kb/12208/how-to-customize-the-date-range-picker-cells-using-builder-in-the-flutter-sfdaterangepicker)
|
||||
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
---
|
||||
layout: post
|
||||
title: Customizations in Flutter Date Range Picker widget | Syncfusion
|
||||
description: Learn here all about Customizations features of Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget and more.
|
||||
platform: Flutter
|
||||
control: SfDateRangePicker
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Customizations in Flutter Date Range Picker (SfDateRangePicker)
|
||||
|
||||
## Month cell customization
|
||||
You can customize the calendar month view by using the `monthCellStyle` of `SfDateRangePicker`.
|
||||
|
||||
• **Current month dates** – You can customize the current month date's text style and background of the `DateRangePicker` by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/textStyle.html) and [cellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/cellDecoration.html) properties of [DateRangePickerMonthCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle-class.html)
|
||||
|
||||
• **Today date** – You can customize the today date text style and background of the `DateRangePicker` by using the [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayTextStyle.html) and [todayCellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayCellDecoration.html).
|
||||
|
||||
• **Leading dates** – You can hide the leading dates by using the [showTrailingAndLeadingDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/showTrailingAndLeadingDates.html) property in the [DateRangePickerMonthViewSettings](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings-class.html) class. You can also customize the leading month dates text style and background of the `DateRangePicker` by using the [leadingDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesTextStyle.html) and [leadingDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesDecoration.html).
|
||||
|
||||
• **Trailing dates** - You can hide the trailing dates by using `showTrailingAndLeadingDates` dates property in `DateRangePickerMonthViewSettings` class. You can also customize the trailing month dates text style and background of the `DateRangePicker` by using the [trailingDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/trailingDatesTextStyle.html) and [trailingDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/trailingDatesDecoration.html).
|
||||
|
||||
• **Blackout Dates** - You can customize the blackout dates text style and background of the `DateRangePicker` by using the [blackoutDateTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/blackoutDateTextStyle.html) and [blackoutDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/blackoutDatesDecoration.html).
|
||||
|
||||
• **Disabled dates** – Disable dates text style and background beyond of the `minDate` and `maxDate` in `DateRangePicker` by using [disableDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesTextStyle.html) and [disableDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesDecoration.html).
|
||||
|
||||
• **Special Dates** – You can add special dates to the `DateRangePicker` by using [specialDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/specialDates.html) property, and you can also customize the special dates text style and background by using the [specialDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/specialDatesTextStyle.html) and [specialDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/specialDatesDecoration.html).
|
||||
|
||||
• **Weekend Dates** – You can change weekend dates to `DateRangePicker` by using the [weekendDays](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/weekendDays.html) property, and you can also customize the weekend dates text style and background by using the [weekendDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/weekendTextStyle.html) and [weekendDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/weekendDatesDecoration.html).
|
||||
|
||||
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDateRangePicker(
|
||||
view: DateRangePickerView.month,
|
||||
monthViewSettings:DateRangePickerMonthViewSettings(blackoutDates:[DateTime(2020, 03, 26)],
|
||||
weekendDays: [7,6],
|
||||
specialDates:[DateTime(2020, 03, 20),DateTime(2020, 03, 16),DateTime(2020,03,17)],
|
||||
showTrailingAndLeadingDates: true),
|
||||
monthCellStyle: DateRangePickerMonthCellStyle(
|
||||
blackoutDatesDecoration: BoxDecoration(
|
||||
color: Colors.red,
|
||||
border: Border.all(color: const Color(0xFFF44436), width: 1),
|
||||
shape: BoxShape.circle),
|
||||
weekendDatesDecoration: BoxDecoration(
|
||||
color: const Color(0xFFDFDFDF),
|
||||
border: Border.all(color: const Color(0xFFB6B6B6), width: 1),
|
||||
shape: BoxShape.circle),
|
||||
specialDatesDecoration: BoxDecoration(
|
||||
color: Colors.green,
|
||||
border: Border.all(color: const Color(0xFF2B732F), width: 1),
|
||||
shape: BoxShape.circle),
|
||||
blackoutDateTextStyle: TextStyle(color: Colors.white, decoration: TextDecoration.lineThrough),
|
||||
specialDatesTextStyle: const TextStyle(color: Colors.white),
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Month format
|
||||
You can customize the month format of the `DateRangePicker` using the [monthFormat](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/monthFormat.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDateRangePicker(
|
||||
view: DateRangePickerView.month,
|
||||
monthFormat: 'MMM',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Selection cell customization
|
||||
|
||||
You can also customize the date range picker section by using the `monthCellStyle` of `SfDateRangePicker`.
|
||||
|
||||
• **Selection date text style** – Selected date text style can be customized using the [selectionTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionTextStyle.html) property of `SfDateRangePicker` that is applicable for `selectionMode` is `single` and `multiple`, it is also applicable to start and end of the selected range text style in the `single` and `multi-range` selection.
|
||||
|
||||
• **Selection color** – Selected date background color can be customized using the [selectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionColor.html) property of `SfDateRangePicker` that is applicable for `single` and `multiple` selections.
|
||||
|
||||
• **Range selection text style** – Range selection date text style can be customized using the [rangeTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/rangeTextStyle.html) property that is applicable when `selectionMode` is `range` or `multi-range`.
|
||||
|
||||
• **Range selection color** - Range selection color text style can be customized using the [startRangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/startRangeSelectionColor.html), [endRangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/endRangeSelectionColor.html) , [rangeSelectionColor](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/rangeSelectionColor.html) properties that is applicable when `selectionMode` is in `range` or `multi-range`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDateRangePicker(
|
||||
view: DateRangePickerView.month,
|
||||
selectionMode: DateRangePickerSelectionMode.range,
|
||||
selectionTextStyle: const TextStyle(color: Colors.white),
|
||||
selectionColor: Colors.blue,
|
||||
startRangeSelectionColor: Colors.purple,
|
||||
endRangeSelectionColor: Colors.purple,
|
||||
rangeSelectionColor: Colors.purpleAccent,
|
||||
rangeTextStyle: const TextStyle(color: Colors.white, fontSize: 20),
|
||||
));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Year cell customization
|
||||
You can customize the calendar `year`, `decade`, and `century` view by using the `yearCellStyle` of `SfDateRangePicker`.
|
||||
|
||||
• **Current year** – You can customize current month dates text style and background of the `DateRangePicker` by using the [textStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/textStyle.html) and [cellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/cellDecoration.html) properties of [DateRangePickerYearCellStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerYearCellStyle-class.html)
|
||||
|
||||
• **Disabled dates** – Disable dates text style and background beyond of the `DateRangePicker` by using the [disableDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesTextStyle.html) and [disableDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/disabledDatesDecoration.html).
|
||||
|
||||
• **Leading dates** – You can also customize the leading month dates text style and background of the `DateRangePicker` by using the [leadingDatesTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesTextStyle.html) and [leadingDatesDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/leadingDatesDecoration.html).
|
||||
|
||||
• **Today date** – You can customize the today date text style and background of the `DateRangePicker` by using the [todayTextStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayTextStyle.html) and [todayCellDecoration](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthCellStyle/todayCellDecoration.html).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDateRangePicker(
|
||||
view: DateRangePickerView.month,
|
||||
selectionMode: DateRangePickerSelectionMode.range,
|
||||
yearCellStyle: DateRangePickerYearCellStyle(
|
||||
disabledDatesDecoration:BoxDecoration(
|
||||
color: const Color(0xFFDFDFDF),
|
||||
border: Border.all(color: const Color(0xFFB6B6B6), width: 1),
|
||||
shape: BoxShape.circle),
|
||||
disabledDatesTextStyle: const TextStyle(color: Colors.black),
|
||||
leadingDatesDecoration:BoxDecoration(
|
||||
color: const Color(0xFFDFDFDF),
|
||||
border: Border.all(color: const Color(0xFFB6B6B6), width: 1),
|
||||
shape: BoxShape.circle),
|
||||
leadingDatesTextStyle: const TextStyle(color: Colors.black),
|
||||
textStyle: const TextStyle(color: Colors.blue),
|
||||
todayCellDecoration: BoxDecoration(
|
||||
color: const Color(0xFFDFDFDF),
|
||||
border: Border.all(color: const Color(0xFFB6B6B6), width: 1),
|
||||
shape: BoxShape.circle),
|
||||
todayTextStyle: const TextStyle(color: Colors.purple),
|
||||
)
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
[How to customize the month cell of the Flutter date range picker (SfDateRangePicker)?](https://www.syncfusion.com/kb/11307/how-to-customize-the-month-cell-of-the-flutter-date-range-picker-sfdaterangepicker)
|
||||
|
||||
[How to style the current month date cell in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12190/how-to-style-the-current-month-date-cell-in-the-flutter-date-range-picker-sfdaterangepicker)
|
||||
|
||||
[How to change the week end dates in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12182/how-to-change-the-week-end-dates-in-the-flutter-date-range-picker-sfdaterangepicker)
|
||||
|
||||
[How to change the month format in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12169/how-to-change-the-month-format-in-the-flutter-date-range-picker-sfdaterangepicker)
|
||||
|
||||
[How to customize the selected range cells in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12148/how-to-customize-the-selected-range-cells-in-the-flutter-date-range-picker)
|
||||
|
||||
[How to add the indicator in the month cells of the date range picker (SfDateRangePicker), when the Flutter event calendar (SfCalendar) has an appointments?](https://www.syncfusion.com/kb/12119/how-to-add-the-indicator-in-the-month-cells-of-the-date-range-picker-sfdaterangepicker-when)
|
||||
|
||||
[How to add custom fonts in Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12212/how-to-add-custom-fonts-in-flutter-date-range-picker-sfdaterangepicker)
|
||||
|
||||
[How to style the year, decade, century views in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12321/how-to-style-the-year-decade-century-views-in-the-flutter-date-range-picker)
|
||||
|
||||
[How to customize the special dates using builder in the Flutter date picker](https://www.syncfusion.com/kb/12374/how-to-customize-the-special-dates-using-builder-in-the-flutter-date-picker)
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Date Navigations of Syncfusion Flutter Date Range Picker | Syncfusion
|
||||
description: Learn about the complete navigation and gesture support in Syncfusion SfDateRangePicker widget in Flutter
|
||||
title: Date Navigations in Flutter Date Range Picker widget | Syncfusion
|
||||
description: Learn here all about Date navigations feature of Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget and more.
|
||||
platform: Flutter
|
||||
control: SfDateRangePicker
|
||||
documentation: ug
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
---
|
||||
layout: post
|
||||
title: Date restrictions in Flutter Date Range Picker widget | Syncfusion
|
||||
description: Learn here all about Date restrictions feature of Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget and more.
|
||||
platform: flutter
|
||||
control: SfDateRangePicker
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Date Restrictions in Flutter Date Range Picker (SfDateRangePicker)
|
||||
|
||||
## Minimum display date
|
||||
The [minDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/minDate.html) will restrict `backward` date navigations features, and cannot swipe the control using the touch gesture beyond the min date range in all views.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDateRangePicker(
|
||||
view: DateRangePickerView.month,
|
||||
minDate: DateTime(2020, 03, 05, 10 , 0, 0),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Maximum display date
|
||||
The [maxDate](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/maxDate.html) will restrict `forward` date navigations features, and cannot swipe the control using the touch gesture beyond the max date range in all views.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDateRangePicker(
|
||||
view: DateRangePickerView.month,
|
||||
maxDate: DateTime(2020, 03, 25, 10 , 0, 0),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Enable and disable past dates
|
||||
|
||||
The `DateRangePicker` allows you to enable or disable the past dates from today's date in `MonthView`. This can be achieved by changing the [enablePastDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/enablePastDates.html) property. By default, the value of this property is set to true.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDateRangePicker(
|
||||
view: DateRangePickerView.month,
|
||||
enablePastDates : false,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Blackout Dates
|
||||
In `DateRangePicker`, [blackoutDates](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/DateRangePickerMonthViewSettings/blackoutDates.html) refer to the disabled dates that restrict the user from selecting it. These dates will be marked with Strikethrough.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDateRangePicker(
|
||||
view: DateRangePickerView.year,
|
||||
monthViewSettings: DateRangePickerMonthViewSettings(blackoutDates:[DateTime(2020, 03, 18), DateTime(2020, 03, 19)]),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## See also
|
||||
|
||||
[How to enable or disable the past dates in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12168/how-to-enable-or-disable-the-past-dates-in-the-flutter-date-range-picker-sfdaterangepicker)
|
||||
|
||||
[How to add active dates in the Flutter date range picker (SfDateRangePicker)](https://www.syncfusion.com/kb/12075/how-to-add-active-dates-in-the-flutter-date-range-picker-sfdaterangepicker)
|
||||
|
||||
[How to restrict date range picker within the date limit in Flutter date range picker (SfDateRangePicker)?](https://www.syncfusion.com/kb/11329/how-to-restrict-date-range-picker-within-the-date-limit-in-flutter-date-range-picker)
|
||||
|
||||
[How to update blackout dates using onViewChanged callback in the Flutter date picker](https://www.syncfusion.com/kb/12372/how-to-update-blackout-dates-using-onviewchanged-callback-in-the-flutter-date-picker)
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Flutter Date Range Picker | Date Picker | Date Selection | Syncfusion
|
||||
description: The Syncfusion Flutter Date Range Picker widget allows users to easily select dates or a range of dates. It allows us to quickly navigate to the desired date.
|
||||
title: Getting started with Flutter Date Range Picker widget | Syncfusion
|
||||
description: Learn here about getting started with Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget, its elements, and more.
|
||||
platform: flutter
|
||||
control: SfDateRangePicker
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Getting Started with Flutter Date Range Picker (SfDateRangePicker)
|
||||
# Getting started with Flutter Date Range Picker (SfDateRangePicker)
|
||||
This section explains the steps required to add the date range picker widget. This section covers only basic features needed to get started with Syncfusion date range picker widget.
|
||||
|
||||
## Add flutter Date Range Picker to an application
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Header in Flutter Date Range Picker | Date Picker | Syncfusion
|
||||
description: Learn about Headers support in the Syncfusion Flutter Date range picker (SfDateRangePicker) widget and more details.
|
||||
title: Headers in Flutter Date Range Picker widget | Syncfusion | Date Picker
|
||||
description: Learn here all about Headers feature of Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget and more.
|
||||
platform: Flutter
|
||||
control: SfDateRangePicker
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Header in Flutter Date Range Picker
|
||||
# Headers in Flutter Date Range Picker (SfDateRangePicker)
|
||||
You can customize the header of the data range picker using the [headerStyle](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/headerStyle.html) and [headerHeight](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/headerHeight.html) properties in date range picker.
|
||||
|
||||
## Customize the header height
|
||||
|
|
|
|||
|
|
@ -0,0 +1,418 @@
|
|||
---
|
||||
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 %}
|
||||
|
||||
|
||||
|
||||
## 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 %}
|
||||
|
||||
|
||||
|
||||
## Month cell customization
|
||||
You can 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)
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Localization of Syncfusion Flutter Date Range Picker | Date Picker
|
||||
description: Describe how to Localize the contents in Syncfusion SfDateRangePicker widget in Flutter | Globalization | Internationalization | Date picker
|
||||
title: Localization in Flutter Date Range Picker widget | Syncfusion
|
||||
description: Learn here all about Localization feature of Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget and more.
|
||||
platform: flutter
|
||||
control: SfDateRangePicker
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Localization in Flutter DateRangePicker (SfDateRangePicker)
|
||||
# Localization in Flutter Date Range Picker (SfDateRangePicker)
|
||||
|
||||
By default, the calendar widget supports US English localizations. You can change other languages by specifying the `MaterialApp` properties and adding the `flutter_localizations` package to your application.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Overview of Syncfusion Flutter Date Range Picker | Date Picker
|
||||
description: Learn the key features of Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget and more details | Calendar
|
||||
title: About Flutter Date Range Picker widget | Syncfusion
|
||||
description: Learn here all about introduction of Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget, its features, and more.
|
||||
platform: flutter
|
||||
control: SfDateRangePicker
|
||||
documentation: ug
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Right to Left of Syncfusion Flutter Date Range Picker | Date Picker
|
||||
description: Describe how DateRangePicker works on right-to-left direction in Syncfusion SfDateRangePicker widget in Flutter
|
||||
title: Right to Left in Flutter Date Range Picker widget | Syncfusion
|
||||
description: Learn here all about Right to Left feature in Syncfusion Flutter Date Range Picker (SfDateRangePicker) widget and more.
|
||||
platform: flutter
|
||||
control: SfDateRangePicker
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Right to Left (RTL) in Flutter DateRangePicker (SfDateRangePicker)
|
||||
# Right to Left (RTL) in Flutter Date Range Picker (SfDateRangePicker)
|
||||
|
||||
The `SfDateRangePicker` supports changing the layout direction of the widget in the right-to-left direction by using the `Directionality` widget `textDirection` property to rtl.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Selections in Syncfusion Flutter Date Range Picker | Syncfusion
|
||||
description: This session describes the multiple selections in SfDateRangePicker widget in Flutter | DatePicker | Syncfusion
|
||||
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
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Views of Syncfusion Flutter Date Range Picker | Syncfusion
|
||||
description: This session describes the Date Range Picker views in SfDateRangePicker widget in Flutter | Date Picker
|
||||
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)
|
||||
# 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
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility of Syncfusion Flutter Calendar | Scheduler
|
||||
description: Learn about the accessibility support in Syncfusion Flutter Calendar (SfCalendar) widget | Scheduler
|
||||
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 with Flutter Calendar (SfCalendar)
|
||||
# Accessibility in Flutter Event Calendar (SfCalendar)
|
||||
The `SfCalendar` can easily be accessed by screen readers. Please find the following table for inner elements.
|
||||
|
||||
## Month view
|
||||
|
|
|
|||
|
|
@ -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 in flutter calendar
|
||||
# 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,327 @@
|
|||
---
|
||||
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 %}
|
||||
|
||||
|
||||
|
||||
## 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,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Callbacks in the Flutter Calendar | Scheduler | Syncfusion
|
||||
description: Learn about the callbacks in Syncfusion Flutter Calendar and the return values and usage of the callbacks
|
||||
title: Callbacks in Flutter Event Calendar widget | Syncfusion | Scheduler
|
||||
description: Learn here all about callbacks feature of Syncfusion Flutter Event Calendar (SfCalendar) widget and more.
|
||||
platform: flutter
|
||||
control: SfCalendar
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Callbacks
|
||||
# Callbacks in Flutter Event Calendar (SfCalendar)
|
||||
Calendar supports the [ViewChangedCallback](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ViewChangedCallback.html) and [CalendarTapCallback](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarTapCallback.html) to interact with Flutter calendar.
|
||||
|
||||
## View changed callback
|
||||
|
|
@ -27,7 +27,7 @@ Widget build(BuildContext context) {
|
|||
child: SfCalendar(
|
||||
view: CalendarView.week,
|
||||
onViewChanged: (ViewChangedDetails details) {
|
||||
dates = details.visibleDates;
|
||||
List<DateTime> dates = details.visibleDates;
|
||||
},
|
||||
),
|
||||
),
|
||||
|
|
@ -38,6 +38,9 @@ Widget build(BuildContext context) {
|
|||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
>**NOTE**
|
||||
* Initially, the `onViewChanged` callback would be triggered to load the appointment data on the basis of visible dates.
|
||||
|
||||
## Calendar tap callback
|
||||
|
||||
The [onTapUp](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onTap.html) callback triggers whenever the calendar tapped.
|
||||
|
|
@ -57,9 +60,9 @@ Widget build(BuildContext context) {
|
|||
child: SfCalendar(
|
||||
view: CalendarView.week,
|
||||
onTap: (CalendarTapDetails details) {
|
||||
appointment = details.appointments;
|
||||
date = details.date;
|
||||
element = details.targetElement;
|
||||
dynamic appointment = details.appointments;
|
||||
DateTime date = details.date!;
|
||||
CalendarElement element = details.targetElement;
|
||||
},
|
||||
),
|
||||
),
|
||||
|
|
@ -70,3 +73,41 @@ Widget build(BuildContext context) {
|
|||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Long press callback
|
||||
The [onLongPress](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onLongPress.html) callback called whenever the `SfCalendar` elements long pressed on view.
|
||||
|
||||
The long-pressed date, appointments, and element details when the long-press action performed on element available in the [CalendarLongPressDetails](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarLongPressDetails-class.html).
|
||||
|
||||
`date` - returns the long-pressed date.
|
||||
`appointments` - returns the long-pressed appointments.
|
||||
`targetElement` - returns the long-pressed calendar element.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: Container(
|
||||
child: SfCalendar(
|
||||
view: CalendarView.week,
|
||||
onLongPress: (CalendarLongPressDetails details) {
|
||||
DateTime date = details.date!;
|
||||
dynamic appointments = details.appointments;
|
||||
CalendarElement view = details.targetElement;
|
||||
},
|
||||
),
|
||||
)));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## See also
|
||||
|
||||
[How to get visible dates details from the flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/11026/how-to-get-visible-dates-details-from-the-flutter-event-calendar-sfcalendar)
|
||||
|
||||
[How to get Datetime details while tapping the Flutter event calendar elements](https://www.syncfusion.com/kb/10998/how-to-get-datetime-details-while-tapping-the-flutter-event-calendar-elements)
|
||||
|
||||
[How to handle the long press action on date selection in the Flutter event calendar (SfCalendar)?](https://www.syncfusion.com/kb/12121/how-to-handle-the-long-press-action-on-date-selection-in-the-flutter-event-calendar)
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Date Navigations of Syncfusion Flutter Calendar | Scheduler
|
||||
description: Learn about the complete navigation and gesture support in Syncfusion Flutter Calendar (SfCalendar) widget | Scheduler
|
||||
title: Date Navigations in Flutter Event Calendar widget | Syncfusion
|
||||
description: Learn here all about date navigation features of Syncfusion Flutter Calendar (SfCalendar) widget and more.
|
||||
platform: flutter
|
||||
control: SfCalendar
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Date Navigations in Flutter Calendar (SfCalendar)
|
||||
# Date Navigations in Flutter Event Calendar (SfCalendar)
|
||||
|
||||
## Range for visible dates
|
||||
Visible dates can be restricted between certain range of dates, using [minDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/minDate.html) and [maxDate](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/maxDate.html) properties in `SfCalendar`. It is applicable in all the schedule views.
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
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 of flutter calendar
|
||||
# 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
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
---
|
||||
layout: post
|
||||
title: Header of Syncfusion Flutter Calendar | Scheduler
|
||||
description: Learn about the header and view header and their customization in Syncfusion Flutter Calendar widget
|
||||
title: Headers in Flutter Event Calendar widget | Syncfusion | Scheduler
|
||||
description: Learn here all about headers feature of Syncfusion Flutter Event Calendar (SfCalendar) widget and more.
|
||||
platform: flutter
|
||||
control: SfCalendar
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Headers in Flutter Event Calendar (SfCalendar)
|
||||
|
||||
## Header
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Load more support in Syncfusion Flutter Calendar | Lazy loading events
|
||||
description: Learn about lazily loading more appointments on-demand with an intuitive interface using Flutter Calendar.
|
||||
title: Load more in Flutter Event Calendar widget | Syncfusion
|
||||
description: Learn here all about load more feature of Syncfusion Flutter Event Calendar (SfCalendar) widget and more.
|
||||
platform: flutter
|
||||
control: SfCalendar
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Load more in flutter calendar
|
||||
# Load more in Flutter Event Calendar (SfCalendar).
|
||||
|
||||
The Calendar provides the support to display an interactive view when the calendar view is changed, or the schedule view reaches its start or end offset. You can use the [loadMoreWidgetBuilder](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/loadMoreWidgetBuilder.html) builder to display the view while loading appointments in the calendar.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Localization of Syncfusion Flutter Calendar | Scheduler
|
||||
description: Describes how to Localize the contents and custom texts of calendar (SfCalendar) control in Flutter | Globalization | Internationalization | Scheduler
|
||||
title: Localization in Flutter Event Calendar widget | Syncfusion | Scheduler
|
||||
description: Learn here all about Localization feature of Syncfusion Flutter Event Calendar (SfCalendar) widget and more.
|
||||
platform: flutter
|
||||
control: SfCalendar
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Localization in Flutter Calendar (SfCalendar)
|
||||
# Localization in Flutter Event Calendar (SfCalendar)
|
||||
|
||||
By default, the calendar widget supports US English localizations. You can change the other languages by specifying the `MaterialApp` properties and adding the `flutter_localizations` package to your application.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Month and agenda view of Syncfusion Flutter Calendar | Scheduler
|
||||
description: Learn how to customize the Calendar month view settings and its appearance in SfCalendar widget in Flutter
|
||||
title: Month view in Flutter Event Calendar widget | Syncfusion
|
||||
description: Learn here all about Month view feature of Syncfusion Flutter Event Calendar (SfCalendar) widget and more.
|
||||
platform: flutter
|
||||
control: SfCalendar
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Month view in flutter calendar
|
||||
# Month view in Flutter Event Calendar (SfCalendar)
|
||||
|
||||
The `month` view of SfCalendar used to display entire dates of the specific month and current month by default initially. Current date color is differentiated with other dates of the current month, also the color differentiation for dates will be applicable for previous and next month dates.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Overview of Syncfusion Flutter calendar | Scheduler
|
||||
description: Learn the key features of Syncfusion Flutter Calendar (SfCalendar) widget and more details | Scheduler.
|
||||
title: About Flutter Event Calendar widget | Syncfusion | Scheduler
|
||||
description: Learn here all about introduction of Syncfusion Flutter Event Calendar (SfCalendar) widget, its features, and more.
|
||||
platform: flutter
|
||||
control: SfCalendar
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Overview of Syncfusion Flutter calendar
|
||||
# Flutter Event Calendar (SfCalendar) Overview
|
||||
|
||||
The Syncfusion Flutter Calendar library was written natively in Dart and has seven types of built-in configurable view modes that provide basic functionality for scheduling, managing, and representing appointments efficiently. The Calendar Widget exposes a clean and convenient user interface for custom working days and hours and basic calendar operations such as date navigation and selection.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,208 @@
|
|||
---
|
||||
layout: post
|
||||
title: Resource view in the Flutter Event Calendar widget | Syncfusion
|
||||
description: Learn here all about Resource view feature of Syncfusion Flutter Event Calendar (SfCalendar) widget and more.
|
||||
platform: flutter
|
||||
control: SfCalendar
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
|
||||
# Resource view in Flutter Event Calendar (SfCalendar)
|
||||
The timeline resource grouping is a discrete view integrated into our Event calendar widget that allows you to group the appointments based on the available resource in timeline views of the calendar. Using this feature, you can group the appointments and time regions arranged in a row-wise order based on the allocated resource in the timeline views. This rich feature set includes customization and you can assign unique styles to the available resource view.
|
||||
|
||||
You can create a resource view by setting the [displayName](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarResource/displayName.html), [color](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarResource/color.html), [id](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarResource/id.html), and [image](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarResource/image.html) property of the [CalendarResource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarResource-class.html).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
List<CalendarResource> resourceColl = <CalendarResource>[];
|
||||
resourceColl.add(CalendarResource(
|
||||
displayName: 'John',
|
||||
id: '0001',
|
||||
color: Colors.red,
|
||||
));
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
You can add resources that can be assigned to the appointments and time regions using the [resources](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/resources.html) property of [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
class _AppointmentDataSource extends CalendarDataSource {
|
||||
_AppointmentDataSource(
|
||||
List<Appointment> source, List<CalendarResource> resourceColl) {
|
||||
appointments = source;
|
||||
resources = resourceColl;
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Assigning events for resources
|
||||
You can associate resources to the appointments by adding `id` of a resource to the [resourceIds](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment/resourceIds.html) property of [Appointment](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/Appointment-class.html). The appointments will be displayed in the row associates with the resource in the event calendar timeline views.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
appointments.add(Appointment(
|
||||
startTime: DateTime(2020, 08, 25, 14, 0, 0),
|
||||
endTime: DateTime(2020, 08, 25, 14, 30, 0),
|
||||
subject: 'General Meeting',
|
||||
color: Colors.red,
|
||||
resourceIds: ['0000', '0001'],
|
||||
));
|
||||
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Assigning custom business objects for resources
|
||||
You can associate resources to custom business objects using the equivalent field of [resourceIds](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getResourceIds.html) in the custom business object class.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
class _AppointmentDataSource extends CalendarDataSource {
|
||||
_AppointmentDataSource(
|
||||
List<Appointment> source, List<CalendarResource> resourceColl) {
|
||||
appointments = source;
|
||||
resources = resourceColl;
|
||||
}
|
||||
|
||||
@override
|
||||
List<Object> getResourceIds(int index) {
|
||||
return appointments![index].ids;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
For more about custom appointments, refer to this [link](https://help.syncfusion.com/xamarin/scheduler/resource-view#assigning-custom-events-to-resources).
|
||||
|
||||
## Assigning time regions for resources
|
||||
You can add time regions to the resources by adding `id` of the resource in the [resourceIds](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion/resourceIds.html) property of [TimeRegion](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/TimeRegion-class.html).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
List<TimeRegion> _specialTimeRegions = <TimeRegion>[];
|
||||
_specialTimeRegions.add(TimeRegion(
|
||||
startTime: DateTime(2020, 08, 20, 13, 0, 0),
|
||||
endTime: DateTime(2020, 08, 20, 14, 0, 0),
|
||||
text: 'Lunch',
|
||||
color: Colors.green.withOpacity(0.2),
|
||||
recurrenceRule: 'FREQ=DAILY;INTERVAL=1',
|
||||
resourceIds: <Object>['0001', '0001']));
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Visible resource count
|
||||
You can customize the number of visible resources in the current view using the [visibleResourceCount](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewSettings/visibleResourceCount.html) property of [resourceViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/resourceViewSettings.html) in the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html). By default, the value of this property is set to ‘-1.’
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfCalendar(
|
||||
dataSource: _dataSource,
|
||||
resourceViewSettings: ResourceViewSettings(
|
||||
visibleResourceCount: 2,
|
||||
),
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Customization
|
||||
### Show avatar
|
||||
You can disable the user profile image and the circle representation of the resource by setting `false` to the [showAvatar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewSettings/showAvatar.html) property available in the [ResourceViewSettings](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewSettings-class.html). This will display each resource with a resource name and the color assigned to the resource.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfCalendar(
|
||||
dataSource: _dataSource,
|
||||
resourceViewSettings: ResourceViewSettings(showAvatar: false),
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
### Display name text style
|
||||
The display name text style for the resource view can be customized by setting an appropriate text style to the [displayNameTextStyle](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewSettings/displayNameTextStyle.html) property available in the `ResourceViewSettings`.
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfCalendar(
|
||||
dataSource: _dataSource,
|
||||
resourceViewSettings: ResourceViewSettings(
|
||||
displayNameTextStyle: TextStyle(
|
||||
fontSize: 11,
|
||||
color: Colors.redAccent,
|
||||
fontStyle: FontStyle.italic)),
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
### Resource panel size
|
||||
You can customize the size of the panel that displays the resource views in the calendar by setting an appropriate value to the [size](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/ResourceViewSettings/size.html) property available in the `ResourceViewSettings`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfCalendar(
|
||||
dataSource: _dataSource,
|
||||
resourceViewSettings: ResourceViewSettings(size: 120),
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
[How to add appointment for the selected resources using appointment editor in Flutter event calendar (SfCalendar)?](https://www.syncfusion.com/kb/12109/how-to-add-appointment-for-the-selected-resources-using-appointment-editor-in-flutter-event)
|
||||
|
||||
[How to add resources in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12070/how-to-add-resources-in-the-flutter-event-calendar-sfcalendar)
|
||||
|
||||
[How to customize the resource view in the Flutter event calendar (SfCalendar)](https://www.syncfusion.com/kb/12351/how-to-customize-the-resource-view-in-the-flutter-event-calendar-sfcalendar)
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Right to Left of Syncfusion Flutter Calendar | Scheduler
|
||||
description: Describes how Calendar works on right-to-left direction in Flutter Calendar (SfCalendar) | Scheduler
|
||||
title: Right to Left in Flutter Event Calendar widget | Syncfusion
|
||||
description: Learn here all about Right to Left feature of Syncfusion Flutter Event Calendar (SfCalendar) widget and more.
|
||||
platform: flutter
|
||||
control: SfCalendar
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Right to left (RTL) in Flutter Calendar (SfCalendar)
|
||||
# Right to left (RTL) in Flutter Event Calendar (SfCalendar)
|
||||
`SfCalendar` supports changing the layout direction of the widget in the right-to-left direction by using the `Directionality` widget `textDirection` property to rtl.
|
||||
|
||||
You can also change the right to left direction by specifying locale, which support RTL language such as (Arabic ,Persian ,Hebrew, Pashto, Urdu) by specifying the `MaterialApp` properties and adding the `flutter_localizations` package to your application.
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Schedule view of Syncfusion Flutter Calendar | Scheduler
|
||||
description: Learn how to customize the schedule view and its appearance customization in Flutter event calendar.
|
||||
title: Schedule view in Flutter Event Calendar widget | Syncfusion
|
||||
description: Learn here all about Schedule view feature of Syncfusion Flutter Event Calendar (SfCalendar) widget and more.
|
||||
platform: flutter
|
||||
control: SfCalendar
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Schedule view in flutter calendar
|
||||
# Schedule view in Flutter Event Calendar (SfCalendar)
|
||||
|
||||
The `schedule` view of SfCalendar shows a list of scheduled appointments grouped by week, between min, and max dates, by default displaying the appointments from the current date. If the `DataSource` property of `SfCalendar` is null then the schedule view will display the month, week, and date headers alone in the view.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Day, week, work week views of Syncfusion Flutter Calendar | Scheduler
|
||||
description: Learn how to customize the Calendar timeslot view settings and its appearance in SfCalendar widget in Flutter
|
||||
title: Timeslot views in Flutter Event Calendar widget | Syncfusion
|
||||
description: Learn here all about timeslot views feature of Syncfusion Flutter Event Calendar (SfCalendar) widget and more.
|
||||
platform: flutter
|
||||
control: SfCalendar
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Timeslot views in flutter calendar
|
||||
# Timeslot views in Flutter Event Calendar (SfCalendar)
|
||||
Calendar has six built-in time slot views used to display date, and the views will display based on the current day by default. Appointments on a specific day will be arranged in respective timeslots based on its duration.
|
||||
|
||||
* **Day view:** Displays a single day.
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Time zone in Syncfusion Flutter Calendar | Scheduler
|
||||
description: Learn about the Time zone and the usage of it with events in Syncfusion Flutter Calendar | Scheduler.
|
||||
title: Time zone in Flutter Event Calendar widget | Syncfusion | Scheduler
|
||||
description: Learn here all about Time zone feature of Syncfusion Flutter Event Calendar (SfCalendar) widget and more.
|
||||
platform: flutter
|
||||
control: SfCalendar
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Time zone in Flutter Calendar (SfCalendar)
|
||||
# Time zone in Flutter Event Calendar (SfCalendar)
|
||||
|
||||
Calendar allows you to create appointments in various time zones and display them in users’ time zone or any other time zone. You can use a time zone in the following four different ways:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Bubbles in Syncfusion Flutter Maps | Syncfusion
|
||||
description: This section explains how to show bubbles in the Flutter maps and customize their appearances like size and color.
|
||||
title: Bubbles in Flutter Maps widget | Syncfusion
|
||||
description: Learn here all about the Bubbles feature of Syncfusion Flutter Maps (SfMaps) widget to customize their appearances and more.
|
||||
platform: Flutter
|
||||
control: SfMaps
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Bubbles in the Flutter Maps
|
||||
# Bubbles in Flutter Maps (SfMaps)
|
||||
|
||||
Bubbles can be rendered in different colors and sizes based on the data values of their assigned shape. You can add information to shapes such as population density, number of users, and more.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Data labels in Syncfusion Flutter Maps | Syncfusion
|
||||
description: This section explains about how to show data labels to the shapes and customize its appearance in the Flutter maps.
|
||||
title: Data Labels in Flutter Maps widget | Syncfusion
|
||||
description: Learn here all about the Data Labels feature of Syncfusion Flutter Maps (SfMaps) widget to add labels to the shapes and more.
|
||||
platform: Flutter
|
||||
control: SfMaps
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Data labels in the Flutter Maps
|
||||
# Data Labels in Flutter Maps (SfMaps)
|
||||
|
||||
Data labels provides identification for the shapes by displaying their names. You can trim or hide the labels if they exceed the shape bounds.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,388 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting started with Flutter Maps widget | Syncfusion
|
||||
description: Learn here about getting started with Syncfusion Flutter Maps (SfMaps) widget, its elements, and more.
|
||||
platform: Flutter
|
||||
control: SfMaps
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Getting started with Flutter Maps (SfMaps)
|
||||
This section explains the steps required to add the maps widget with shape layer and its elements such as data labels, tooltip, assignable colors based on region, and legends. It also explains about adding tile layer with OpenStreetMap. This section covers only basic features needed to know to get started with Syncfusion maps.
|
||||
|
||||
To get start quickly with our Flutter Maps widget, you can check on this video.
|
||||
|
||||
<style>#flutterMapsVideoTutorial{width : 90% !important; height: 300px !important }</style>
|
||||
<iframe id='flutterMapsVideoTutorial' src='https://www.youtube.com/embed/TNnAHfXXTFM'></iframe>
|
||||
|
||||
## Add Flutter maps 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 maps dependency to your pubspec.yaml file.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
dependencies:
|
||||
|
||||
syncfusion_flutter_maps: ^xx.x.xx
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Maps`](https://pub.dev/packages/syncfusion_flutter_maps/versions) package.
|
||||
|
||||
**Get packages**
|
||||
|
||||
Run the following command to get the required packages.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
$ flutter pub get
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
**Import package**
|
||||
|
||||
Import the following package in your Dart code.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
import 'package:syncfusion_flutter_maps/maps.dart';
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Initialize maps
|
||||
|
||||
After importing the package, initialize the maps widget as a child of any widget.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfMaps(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Set GeoJSON data for shape layer from various source
|
||||
|
||||
The [`layers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps/layers.html) in [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html) contains collection of either [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) or [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html). The actual geographical rendering is done in the each [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html). The [`source`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/source.html) property of the [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) is of type [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html). The [`source`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/source.html) can be set as the .json source from an asset bundle, from network or from Uint8List as bytes. Use the respective constructor depends on the type of the source.
|
||||
|
||||
The [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) property of the [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html) is used to refer the unique field name in the .json source to identify each shapes. In [`Mapping the data source`](https://help.syncfusion.com/flutter/maps/getting-started#mapping-the-data-source-for-shape-layer) section of this document, this [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) will be used to map with respective value returned in [`primaryValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/primaryValueMapper.html) from the data source.
|
||||
|
||||
### From asset bundle
|
||||
|
||||
Load .json data from an asset bundle.
|
||||
|
||||
N> If you are using the [`MapShapeSource.asset`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/MapShapeSource.asset.html) constructor, you must add the .json file to the assets folder of your root directory and refer the json file path in the `pubspec.yaml` file as shown in the below code snippet. You can get the [`australia.json`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/australia-json-910278184.zip) file here.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
flutter:
|
||||
uses-material-design: true
|
||||
assets:
|
||||
- australia.json
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late MapShapeSource _dataSource;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_dataSource = MapShapeSource.asset(
|
||||
'assets/australia.json',
|
||||
shapeDataField: 'STATE_NAME',
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Padding(
|
||||
padding: EdgeInsets.all(15),
|
||||
child: SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(source: _dataSource),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### From network
|
||||
|
||||
Load .json data from the network.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late MapShapeSource _dataSource;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_dataSource = MapShapeSource.network(
|
||||
'http://www.json-generator.com/api/json/get/bVqXoJvfjC?indent=2',
|
||||
shapeDataField: 'name',
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Padding(
|
||||
padding: EdgeInsets.all(15),
|
||||
child: SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(source: _dataSource),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### From memory
|
||||
|
||||
Load .json data as bytes from `Uint8List`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: FutureBuilder(
|
||||
future: _fetchJsonData(),
|
||||
builder: (BuildContext context, snapshot) {
|
||||
if (snapshot.hasData) {
|
||||
Uint8List bytesData = snapshot.data as Uint8List;
|
||||
return SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(
|
||||
source: MapShapeSource.memory(
|
||||
bytesData,
|
||||
shapeDataField: 'STATE_NAME',
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
} else {
|
||||
return CircularProgressIndicator();
|
||||
}
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Future<Uint8List> _fetchJsonData() async {
|
||||
return (await rootBundle.load('assets/australia.json')).buffer.asUint8List();
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Mapping the data source for shape layer
|
||||
|
||||
By default, the value specified for the [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) in the GeoJSON source will be used in the elements like data labels, tooltip, and legend for their respective shapes. However, it is possible to keep a data source and customize these elements based on the requirement. As mentioned above, [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) will be used to map with respective value returned in [`primaryValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/primaryValueMapper.html) from the data source.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<Model> data;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
data = <Model>[
|
||||
Model('New South Wales',
|
||||
' New\nSouth Wales'),
|
||||
Model('Queensland', 'Queensland'),
|
||||
Model('Northern Territory', 'Northern\nTerritory'),
|
||||
Model('Victoria', 'Victoria'),
|
||||
Model('South Australia', 'South Australia'),
|
||||
Model('Western Australia', 'Western Australia'),
|
||||
Model('Tasmania', 'Tasmania'),
|
||||
Model('Australian Capital Territory', 'ACT')
|
||||
];
|
||||
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: <MapShapeLayer>[
|
||||
MapShapeLayer(
|
||||
source: MapShapeSource.asset(
|
||||
'assets/australia.json',
|
||||
shapeDataField: 'STATE_NAME',
|
||||
dataCount: data.length,
|
||||
primaryValueMapper: (int index) => data[index].state,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class Model {
|
||||
Model(this.state, this.stateCode);
|
||||
|
||||
String state;
|
||||
String stateCode;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
N>
|
||||
* Refer the [`MapShapeSource.primaryValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/primaryValueMapper.html), for mapping the data of the data source collection with the respective [`MapShapeSource.shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) in .json source.
|
||||
* Refer the [`MapShapeSource.bubbleSizeMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/bubbleSizeMapper.html), for customizing the bubble size.
|
||||
* Refer the [`MapShapeSource.bubbleColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/bubbleColorValueMapper.html), for customizing the bubble colors.
|
||||
* Refer the [`MapShapeSource.dataLabelMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/dataLabelMapper.html), for customizing the data label text.
|
||||
* Refer the [`MapShapeSource.shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html), for customizing the shape colors.
|
||||
|
||||
## Add shape layer maps elements
|
||||
|
||||
Add the basic maps elements such as data labels, legend, and tooltip as shown in the below code snippet.
|
||||
|
||||
* **Data labels** - You can show data labels using the [`MapShapeLayer.showDataLabels`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/showDataLabels.html) property and also, it is possible to show data labels only for the particular shapes/or show custom text using the [`MapShapeSource.dataLabelMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/dataLabelMapper.html) property.
|
||||
|
||||
* **Legend** - You can enable legend using the [`MapShapeLayer.legend`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/legend.html) property. The icons color of the legend is applied based on the colors returned in the [`MapShapeSource.shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html) property. It is possible to customize the legend icons color and texts using the [`MapShapeSource.shapeColorMappers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorMappers.html) property.
|
||||
|
||||
* **Tooltip** - You can enable tooltip for the shapes using the [`MapShapeLayer.shapeTooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/shapeTooltipBuilder.html) property. It will be called with the corresponding index every time when you interacts with the shapes i.e., while tapping in touch devices and hover enter in the mouse enabled devices.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<Model> data;
|
||||
late MapShapeSource dataSource;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
data = <Model>[
|
||||
Model('New South Wales', Color.fromRGBO(255, 215, 0, 1.0),
|
||||
' New\nSouth Wales'),
|
||||
Model('Queensland', Color.fromRGBO(72, 209, 204, 1.0), 'Queensland'),
|
||||
Model('Northern Territory', Colors.red.withOpacity(0.85),
|
||||
'Northern\nTerritory'),
|
||||
Model('Victoria', Color.fromRGBO(171, 56, 224, 0.75), 'Victoria'),
|
||||
Model('South Australia', Color.fromRGBO(126, 247, 74, 0.75),
|
||||
'South Australia'),
|
||||
Model('Western Australia', Color.fromRGBO(79, 60, 201, 0.7),
|
||||
'Western Australia'),
|
||||
Model('Tasmania', Color.fromRGBO(99, 164, 230, 1), 'Tasmania'),
|
||||
Model('Australian Capital Territory', Colors.teal, 'ACT')
|
||||
];
|
||||
|
||||
dataSource = MapShapeSource.asset(
|
||||
'assets/australia.json',
|
||||
shapeDataField: 'STATE_NAME',
|
||||
dataCount: data.length,
|
||||
primaryValueMapper: (int index) => data[index].state,
|
||||
dataLabelMapper: (int index) => data[index].stateCode,
|
||||
shapeColorValueMapper: (int index) => data[index].color,
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final ThemeData themeData = Theme.of(context);
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SizedBox(
|
||||
height: MediaQuery.of(context).size.height * 0.55,
|
||||
child: SfMaps(
|
||||
layers: <MapShapeLayer>[
|
||||
MapShapeLayer(
|
||||
source: dataSource,
|
||||
showDataLabels: true,
|
||||
legend: MapLegend(MapElement.shape),
|
||||
shapeTooltipBuilder: (BuildContext context, int index) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(7),
|
||||
child: Text(data[index].stateCode,
|
||||
style: themeData.textTheme.caption!
|
||||
.copyWith(color: themeData.colorScheme.surface)),
|
||||
);
|
||||
},
|
||||
tooltipSettings: MapTooltipSettings(
|
||||
color: Colors.grey[700],
|
||||
strokeColor: Colors.white,
|
||||
strokeWidth: 2),
|
||||
strokeColor: Colors.white,
|
||||
strokeWidth: 0.5,
|
||||
dataLabelSettings: MapDataLabelSettings(
|
||||
textStyle: TextStyle(
|
||||
color: Colors.black,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: themeData.textTheme.caption!.fontSize)),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class Model {
|
||||
Model(this.state, this.color, this.stateCode);
|
||||
|
||||
String state;
|
||||
Color color;
|
||||
String stateCode;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Add tile layer
|
||||
|
||||
The [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html) needs to be added in the [`layers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps/layers.html) collection in [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html). The URL of the providers must be set in the [`MapTileLayer.urlTemplate`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer/urlTemplate.html) property.
|
||||
|
||||
Kindly refer the [tile layer](https://help.syncfusion.com/flutter/maps/tile-layer#setting-url-template) section for more information.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SfMaps(
|
||||
layers: [
|
||||
MapTileLayer(
|
||||
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Markers in Syncfusion Flutter Maps | Syncfusion
|
||||
description: This section explains about how to add the markers and customize them dynamically in the Flutter maps.
|
||||
title: Markers in Flutter Maps widget | Syncfusion
|
||||
description: Learn here all about the Markers feature of Syncfusion Flutter Maps (SfMaps) widget to customize its appearance including text, icon and more.
|
||||
platform: Flutter
|
||||
control: SfMaps
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Markers in the Flutter Maps
|
||||
# Markers in Flutter Maps (SfMaps)
|
||||
|
||||
Markers can be used to denote the locations. It is possible to use the built-in symbols or display a custom widget at a specific latitude and longitude on a map.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Overview of Syncfusion Flutter Maps
|
||||
description: Syncfusion Flutter maps provides a rich set of features such as data labels, selection, markers, bubbles, assignable colors based on region, and legends.
|
||||
title: About Flutter Maps widget | Syncfusion
|
||||
description: Learn here all about the introduction of Syncfusion Flutter Maps (SfMaps) widget, its features, and more.
|
||||
platform: Flutter
|
||||
control: SfMaps
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Overview of Flutter Maps
|
||||
# Flutter Maps (SfMaps) Overview
|
||||
|
||||
Syncfusion Flutter Maps is a powerful data visualization component that displays statistical information for a geographical area. Its rich feature set includes tile rendering from OpenStreetMap, Bing Maps, and other tile providers with marker support and shape layer with features like selection, legends, labels, markers, tooltips, bubbles, color mapping, and much more.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Shape selection in Syncfusion Flutter Maps | Syncfusion
|
||||
description: This section explains about how to enable shape selection and explains how to perform any action during selection.
|
||||
title: Shape Selection in Flutter Maps widget | Syncfusion
|
||||
description: Learn here all about the Shape Selection feature of Syncfusion Flutter Maps (SfMaps) widget and more.
|
||||
platform: Flutter
|
||||
control: SfMaps
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Shape selection in the Flutter Maps
|
||||
# Shape Selection in Flutter Maps (SfMaps)
|
||||
|
||||
You can select a shape in order to highlight that area on a map. You can use the callback for performing any action during shape selection.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Shape Sublayer in Syncfusion Flutter maps | Syncfusion
|
||||
description: This section explains how to add the shape sublayer for tile and shape layer and enable its features.
|
||||
title: Shape Sublayer in Flutter Maps widget | Syncfusion
|
||||
description: Learn here all about the Shape Sublayer feature of the Syncfusion Flutter Maps (SfMaps) widget in the tile and the shape layer.
|
||||
platform: Flutter
|
||||
control: SfMaps
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Shape sublayer features in Maps
|
||||
# Shape Sublayer in Flutter Maps (SfMaps)
|
||||
|
||||
The shape sublayer is where geographical rendering will happen for the sublayer. This is similar to the main [`shape layer`](https://help.syncfusion.com/flutter/maps/getting-started#add-a-geojson-file-for-shape-layer) rendering. This section explains adding a shape sublayer on the shape layer and tile layer.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Shape colors in Syncfusion Flutter Maps | Syncfusion
|
||||
description: This section explains about shapes and how to apply colors to the shapes based on specific values in the Flutter maps.
|
||||
title: Shape colors in Flutter Maps widget | Syncfusion
|
||||
description: Learn here all about different shape appearance customization options of the Syncfusion Flutter Maps (SfMaps) widget.
|
||||
platform: Flutter
|
||||
control: SfMaps
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Shapes in the Flutter Maps
|
||||
# Shapes in Flutter Maps (SfMaps)
|
||||
|
||||
This section explains about shapes and how to apply colors to the shapes based on specific values in the Flutter maps.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Tile layer in Syncfusion Flutter Maps | Syncfusion
|
||||
description: This section describes how to add the tile layer for rendering OpenStreetMap, Bing Maps, etc and enable its features.
|
||||
title: Tile Layer in Flutter Maps widget | Syncfusion
|
||||
description: Learn here all about adding the Tile Layer feature of Syncfusion Flutter Maps (SfMaps) widget and more.
|
||||
platform: Flutter
|
||||
control: SfMaps
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Tile layer features in Maps
|
||||
# Tile Layer in Flutter Maps (SfMaps)
|
||||
|
||||
The tile layer renders the tiles returned from web map tile services such as Bing Maps, OpenStreetMaps, Google Maps, TomTom, etc.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Tooltip in Syncfusion Flutter maps | Syncfusion
|
||||
description: This section explains how to show tooltips in shape, bubble, and marker and customize its appearance in the Flutter maps.
|
||||
title: Tooltip in Flutter Maps widget | Syncfusion
|
||||
description: Learn here all about adding the Tooltip feature of Syncfusion Flutter Maps (SfMaps) widget and more.
|
||||
platform: Flutter
|
||||
control: SfMaps
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Tooltip features in maps
|
||||
# Tooltip in Flutter Maps (SfMaps)
|
||||
|
||||
Tooltip is used to indicate the shape, bubble, marker information during the tap, or click interaction. This section helps to learn about how to show tooltip for the shapes, bubbles, and markers in the maps and customize them.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Adding arcs in Syncfusion Flutter maps | Syncfusion
|
||||
description: This section explains about how to add arcs on the map and customize its appearance in the Flutter maps.
|
||||
title: Adding Arc layer in Flutter Maps widget | Syncfusion
|
||||
description: Learn here all about adding the Arc Layer feature of Syncfusion Flutter Maps (SfMaps) widget and more.
|
||||
platform: Flutter
|
||||
control: SfMaps
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Arcs in the Flutter maps
|
||||
# Arc Layer in Flutter Maps (SfMaps)
|
||||
|
||||
Arc layer is a sublayer that renders a group of [`MapArc`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapArc-class.html) on [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) and [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html). This section helps to learn about how to add the arcs and customize them.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,802 @@
|
|||
---
|
||||
layout: post
|
||||
title: Adding Circle Layer in Flutter Maps widget | Syncfusion
|
||||
description: Learn here all about adding Circle Layer feature of Syncfusion Flutter Maps (SfMaps) widget and more.
|
||||
platform: Flutter
|
||||
control: SfMaps
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Circle Layer in Flutter Maps (SfMaps)
|
||||
|
||||
Circle layer is a sublayer that renders a group of [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) on [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) and [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html). This section helps to learn about how to add the circles and customize them.
|
||||
|
||||
## Adding circles
|
||||
|
||||
The [`circles`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/circles.html) is a collection of [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html). Every single [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) renders a circle using the [`MapCircle.center`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/center.html) and [`MapCircle.radius`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/radius.html) properties.
|
||||
|
||||
N> It is applicable for both the tile layer and shape layer.
|
||||
|
||||
<b>In the shape layer</b>
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<MapLatLng> circles;
|
||||
late MapShapeSource dataSource;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
circles = <MapLatLng>[
|
||||
MapLatLng(15.2993, 74.1240),
|
||||
MapLatLng(15.5057, 80.0499),
|
||||
MapLatLng(19.7515, 75.7139),
|
||||
MapLatLng(23.0225, 72.5714),
|
||||
MapLatLng(24.8607, 67.0011),
|
||||
MapLatLng(27.0238, 74.2179),
|
||||
MapLatLng(26.8467, 80.9462),
|
||||
MapLatLng(21.2787, 85.2799),
|
||||
MapLatLng(20.9517, 85.0985),
|
||||
MapLatLng(25.0961, 85.3131),
|
||||
MapLatLng(24.6637, 93.9063),
|
||||
MapLatLng(26.2006, 92.9376),
|
||||
MapLatLng(28.7041, 77.1025),
|
||||
MapLatLng(29.0588, 76.0856),
|
||||
MapLatLng(30.0668, 79.0193),
|
||||
MapLatLng(31.1471, 75.3412),
|
||||
];
|
||||
|
||||
dataSource = MapShapeSource.asset(
|
||||
'assets/india.json',
|
||||
shapeDataField: 'name',
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(
|
||||
source: dataSource,
|
||||
sublayers: [
|
||||
MapCircleLayer(
|
||||
circles: List<MapCircle>.generate(
|
||||
circles.length,
|
||||
(int index) {
|
||||
return MapCircle(
|
||||
center: circles[index],
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
<b>In the tile layer</b>
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<MapLatLng> circles;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
circles = <MapLatLng>[
|
||||
MapLatLng(15.2993, 74.1240),
|
||||
MapLatLng(15.5057, 80.0499),
|
||||
MapLatLng(19.7515, 75.7139),
|
||||
MapLatLng(23.0225, 72.5714),
|
||||
MapLatLng(24.8607, 67.0011),
|
||||
MapLatLng(27.0238, 74.2179),
|
||||
MapLatLng(26.8467, 80.9462),
|
||||
MapLatLng(21.2787, 85.2799),
|
||||
MapLatLng(20.9517, 85.0985),
|
||||
MapLatLng(25.0961, 85.3131),
|
||||
MapLatLng(24.6637, 93.9063),
|
||||
MapLatLng(26.2006, 92.9376),
|
||||
MapLatLng(28.7041, 77.1025),
|
||||
MapLatLng(29.0588, 76.0856),
|
||||
MapLatLng(30.0668, 79.0193),
|
||||
MapLatLng(31.1471, 75.3412),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapTileLayer(
|
||||
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
initialFocalLatLng: MapLatLng(20.5937, 78.9629),
|
||||
initialZoomLevel: 4,
|
||||
sublayers: [
|
||||
MapCircleLayer(
|
||||
circles: List<MapCircle>.generate(
|
||||
circles.length,
|
||||
(int index) {
|
||||
return MapCircle(
|
||||
center: circles[index],
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Radius
|
||||
|
||||
You can change the size of the circles using the [`MapCircle.radius`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/radius.html) property. The default value of the [`MapCircle.radius`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/radius.html) property is 5.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<MapLatLng> circles;
|
||||
late MapShapeSource dataSource;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
circles = <MapLatLng>[
|
||||
MapLatLng(15.2993, 74.1240),
|
||||
MapLatLng(15.5057, 80.0499),
|
||||
MapLatLng(19.7515, 75.7139),
|
||||
MapLatLng(23.0225, 72.5714),
|
||||
MapLatLng(24.8607, 67.0011),
|
||||
MapLatLng(27.0238, 74.2179),
|
||||
MapLatLng(26.8467, 80.9462),
|
||||
MapLatLng(21.2787, 85.2799),
|
||||
MapLatLng(20.9517, 85.0985),
|
||||
MapLatLng(25.0961, 85.3131),
|
||||
MapLatLng(24.6637, 93.9063),
|
||||
MapLatLng(26.2006, 92.9376),
|
||||
MapLatLng(28.7041, 77.1025),
|
||||
MapLatLng(29.0588, 76.0856),
|
||||
MapLatLng(30.0668, 79.0193),
|
||||
MapLatLng(31.1471, 75.3412),
|
||||
];
|
||||
|
||||
dataSource = MapShapeSource.asset(
|
||||
'assets/india.json',
|
||||
shapeDataField: 'name',
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(
|
||||
source: dataSource,
|
||||
sublayers: [
|
||||
MapCircleLayer(
|
||||
circles: List<MapCircle>.generate(
|
||||
circles.length,
|
||||
(int index) {
|
||||
return MapCircle(
|
||||
center: circles[index],
|
||||
radius: 10,
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Fill color
|
||||
|
||||
You can apply the same color for all [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) in the [`circles`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/circles.html) collection using the [`MapCircleLayer.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/color.html) property. Alternatively, you can apply different colors to each [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) in the [`circles`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/circles.html) collection using the individual [`MapCircle.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/color.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<MapCircleModel> circles;
|
||||
late MapShapeSource dataSource;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
circles = <MapCircleModel>[
|
||||
MapCircleModel(MapLatLng(15.2993, 74.1240), Colors.pink),
|
||||
MapCircleModel(MapLatLng(15.5057, 80.0499), Colors.teal),
|
||||
MapCircleModel(MapLatLng(19.7515, 75.7139), Colors.purple),
|
||||
MapCircleModel(MapLatLng(23.0225, 72.5714), Colors.green),
|
||||
MapCircleModel(MapLatLng(24.8607, 67.0011), Colors.orange),
|
||||
MapCircleModel(MapLatLng(27.0238, 74.2179), Colors.blue),
|
||||
MapCircleModel(MapLatLng(26.8467, 80.9462), Colors.purpleAccent),
|
||||
MapCircleModel(MapLatLng(21.2787, 85.2799), Colors.redAccent),
|
||||
];
|
||||
|
||||
dataSource = MapShapeSource.asset(
|
||||
'assets/india.json',
|
||||
shapeDataField: 'name',
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(
|
||||
source: dataSource,
|
||||
sublayers: [
|
||||
MapCircleLayer(
|
||||
circles: List<MapCircle>.generate(
|
||||
circles.length,
|
||||
(int index) {
|
||||
return MapCircle(
|
||||
center: circles[index].center,
|
||||
radius: 10,
|
||||
color: circles[index].color,
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class MapCircleModel {
|
||||
MapCircleModel(this.center, this.color);
|
||||
|
||||
final MapLatLng center;
|
||||
final Color color;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Stroke width and color
|
||||
|
||||
You can apply the same stroke width for all [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) in the [`circles`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/circles.html) collection using the [`MapCircleLayer.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/strokeWidth.html) property. Alternatively, you can apply different stroke width to each [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) in the [`circles`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/circles.html) collection using the individual [`MapCircle.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/strokeWidth.html) property. The default value of the [`MapCircleLayer.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/strokeWidth.html) property is `2`.
|
||||
|
||||
You can apply the same stroke color for all [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) in the [`circles`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/circles.html) collection using the [`MapCircleLayer.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/strokeColor.html) property. Alternatively, you can apply different stroke color to each [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) in the [`circles`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/circles.html) collection using the individual [`MapCircle.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/strokeColor.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<MapCircleModel> circles;
|
||||
late MapShapeSource dataSource;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
circles = <MapCircleModel>[
|
||||
MapCircleModel(MapLatLng(15.2993, 74.1240), Colors.pink),
|
||||
MapCircleModel(MapLatLng(15.5057, 80.0499), Colors.teal),
|
||||
MapCircleModel(MapLatLng(19.7515, 75.7139), Colors.purple),
|
||||
MapCircleModel(MapLatLng(23.0225, 72.5714), Colors.green),
|
||||
MapCircleModel(MapLatLng(24.8607, 67.0011), Colors.orange),
|
||||
MapCircleModel(MapLatLng(27.0238, 74.2179), Colors.blue),
|
||||
MapCircleModel(MapLatLng(26.8467, 80.9462), Colors.purpleAccent),
|
||||
MapCircleModel(MapLatLng(21.2787, 85.2799), Colors.redAccent),
|
||||
];
|
||||
|
||||
dataSource = MapShapeSource.asset(
|
||||
'assets/india.json',
|
||||
shapeDataField: 'name',
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(
|
||||
source: dataSource,
|
||||
sublayers: [
|
||||
MapCircleLayer(
|
||||
circles: List<MapCircle>.generate(
|
||||
circles.length,
|
||||
(int index) {
|
||||
return MapCircle(
|
||||
center: circles[index].center,
|
||||
radius: index % 2 == 0 ? 10 : 20,
|
||||
strokeWidth: 3,
|
||||
strokeColor: circles[index].color,
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class MapCircleModel {
|
||||
MapCircleModel(this.center, this.color);
|
||||
|
||||
final MapLatLng center;
|
||||
final Color color;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Animation
|
||||
|
||||
You can apply animation for the [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) using the [`MapCircleLayer.animation`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/animation.html) property and able to customize the animation flow, curve and duration.
|
||||
|
||||
By default, there will not be any animation.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<MapLatLng> circles;
|
||||
late MapShapeSource dataSource;
|
||||
late AnimationController animationController;
|
||||
late Animation animation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
circles = <MapLatLng>[
|
||||
MapLatLng(15.2993, 74.1240),
|
||||
MapLatLng(15.5057, 80.0499),
|
||||
MapLatLng(19.7515, 75.7139),
|
||||
MapLatLng(23.0225, 72.5714),
|
||||
MapLatLng(24.8607, 67.0011),
|
||||
MapLatLng(27.0238, 74.2179),
|
||||
MapLatLng(26.8467, 80.9462),
|
||||
MapLatLng(21.2787, 85.2799),
|
||||
MapLatLng(20.9517, 85.0985),
|
||||
MapLatLng(25.0961, 85.3131),
|
||||
MapLatLng(24.6637, 93.9063),
|
||||
MapLatLng(26.2006, 92.9376),
|
||||
MapLatLng(28.7041, 77.1025),
|
||||
MapLatLng(29.0588, 76.0856),
|
||||
MapLatLng(30.0668, 79.0193),
|
||||
MapLatLng(31.1471, 75.3412),
|
||||
];
|
||||
|
||||
dataSource = MapShapeSource.asset(
|
||||
'assets/india.json',
|
||||
shapeDataField: 'name',
|
||||
);
|
||||
|
||||
animationController = AnimationController(
|
||||
duration: Duration(seconds: 3),
|
||||
vsync: this,
|
||||
);
|
||||
animation = CurvedAnimation(
|
||||
parent: animationController,
|
||||
curve: Curves.easeInOut,
|
||||
);
|
||||
animationController.forward(from: 0);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
animationController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(
|
||||
source: dataSource,
|
||||
sublayers: [
|
||||
MapCircleLayer(
|
||||
circles: List<MapCircle>.generate(
|
||||
circles.length,
|
||||
(int index) {
|
||||
return MapCircle(
|
||||
center: circles[index],
|
||||
radius: 10,
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
animation: animation,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Tap
|
||||
|
||||
You can use the [`onTap`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/onTap.html) callback to get a notification if the particular [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) is tapped. You can also customize the tapped [`MapCircle`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle-class.html) based on the index passed in the callback as shown in the below code snippet.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<MapLatLng> circles;
|
||||
late MapShapeSource dataSource;
|
||||
late int selectedIndex;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
circles = <MapLatLng>[
|
||||
MapLatLng(15.2993, 74.1240),
|
||||
MapLatLng(15.5057, 80.0499),
|
||||
MapLatLng(19.7515, 75.7139),
|
||||
MapLatLng(23.0225, 72.5714),
|
||||
MapLatLng(24.8607, 67.0011),
|
||||
MapLatLng(27.0238, 74.2179),
|
||||
MapLatLng(26.8467, 80.9462),
|
||||
MapLatLng(21.2787, 85.2799),
|
||||
MapLatLng(20.9517, 85.0985),
|
||||
MapLatLng(25.0961, 85.3131),
|
||||
MapLatLng(24.6637, 93.9063),
|
||||
MapLatLng(26.2006, 92.9376),
|
||||
MapLatLng(28.7041, 77.1025),
|
||||
MapLatLng(29.0588, 76.0856),
|
||||
MapLatLng(30.0668, 79.0193),
|
||||
MapLatLng(31.1471, 75.3412),
|
||||
];
|
||||
|
||||
dataSource = MapShapeSource.asset(
|
||||
'assets/india.json',
|
||||
shapeDataField: 'name',
|
||||
);
|
||||
|
||||
selectedIndex = -1;
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(
|
||||
source: dataSource,
|
||||
sublayers: [
|
||||
MapCircleLayer(
|
||||
circles: List<MapCircle>.generate(
|
||||
circles.length,
|
||||
(int index) {
|
||||
return MapCircle(
|
||||
center: circles[index],
|
||||
radius: 10,
|
||||
color: selectedIndex == index ? Colors.pink : Colors.blue,
|
||||
onTap: () {
|
||||
setState(() {
|
||||
selectedIndex = index;
|
||||
});
|
||||
},
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Tooltip
|
||||
|
||||
You can show additional information about the circles drawn using the [`tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSublayer/tooltipBuilder.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<MapLatLng> circles;
|
||||
late MapShapeSource dataSource;
|
||||
late Random random;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
circles = <MapLatLng>[
|
||||
MapLatLng(15.2993, 74.1240),
|
||||
MapLatLng(15.5057, 80.0499),
|
||||
MapLatLng(19.7515, 75.7139),
|
||||
MapLatLng(23.0225, 72.5714),
|
||||
MapLatLng(24.8607, 67.0011),
|
||||
MapLatLng(27.0238, 74.2179),
|
||||
MapLatLng(26.8467, 80.9462),
|
||||
MapLatLng(21.2787, 85.2799),
|
||||
MapLatLng(20.9517, 85.0985),
|
||||
MapLatLng(25.0961, 85.3131),
|
||||
MapLatLng(24.6637, 93.9063),
|
||||
MapLatLng(26.2006, 92.9376),
|
||||
MapLatLng(28.7041, 77.1025),
|
||||
MapLatLng(29.0588, 76.0856),
|
||||
MapLatLng(30.0668, 79.0193),
|
||||
MapLatLng(31.1471, 75.3412),
|
||||
];
|
||||
|
||||
dataSource = MapShapeSource.asset(
|
||||
'assets/india.json',
|
||||
shapeDataField: 'name',
|
||||
);
|
||||
|
||||
random = Random();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final ThemeData themeData = Theme.of(context);
|
||||
final TextStyle textStyle = themeData.textTheme.caption!
|
||||
.copyWith(color: themeData.colorScheme.surface);
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(
|
||||
source: dataSource,
|
||||
sublayers: [
|
||||
MapCircleLayer(
|
||||
circles: List<MapCircle>.generate(
|
||||
circles.length,
|
||||
(int index) {
|
||||
return MapCircle(
|
||||
center: circles[index],
|
||||
radius: 10,
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
tooltipBuilder: (BuildContext context, int index) {
|
||||
return Container(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text('Disease name :', style: textStyle),
|
||||
Text(' ' + 'Corona', style: textStyle),
|
||||
],
|
||||
),
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text('Active cases :', style: textStyle),
|
||||
Text(' ' + random.nextInt(62342).toString(),
|
||||
style: textStyle),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Tooltip customization
|
||||
|
||||
You can customize the appearance of the tooltip.
|
||||
|
||||
* Background color - Change the background color of the tooltip in the maps using the [`MapTooltipSettings.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/color.html) property.
|
||||
* Stroke color - Change the stroke color of the tooltip in the maps using the [`MapTooltipSettings.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeColor.html) property.
|
||||
* Stroke width - Change the stroke width of the tooltip in the maps using the [`MapTooltipSettings.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeWidth.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<MapLatLng> circles;
|
||||
late MapShapeSource dataSource;
|
||||
late Random random;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
circles = <MapLatLng>[
|
||||
MapLatLng(15.2993, 74.1240),
|
||||
MapLatLng(15.5057, 80.0499),
|
||||
MapLatLng(19.7515, 75.7139),
|
||||
MapLatLng(23.0225, 72.5714),
|
||||
MapLatLng(24.8607, 67.0011),
|
||||
MapLatLng(27.0238, 74.2179),
|
||||
MapLatLng(26.8467, 80.9462),
|
||||
MapLatLng(21.2787, 85.2799),
|
||||
MapLatLng(20.9517, 85.0985),
|
||||
MapLatLng(25.0961, 85.3131),
|
||||
MapLatLng(24.6637, 93.9063),
|
||||
MapLatLng(26.2006, 92.9376),
|
||||
MapLatLng(28.7041, 77.1025),
|
||||
MapLatLng(29.0588, 76.0856),
|
||||
MapLatLng(30.0668, 79.0193),
|
||||
MapLatLng(31.1471, 75.3412),
|
||||
];
|
||||
|
||||
dataSource = MapShapeSource.asset(
|
||||
'assets/india.json',
|
||||
shapeDataField: 'name',
|
||||
);
|
||||
|
||||
random = Random();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(
|
||||
source: dataSource,
|
||||
tooltipSettings: const MapTooltipSettings(
|
||||
color: Colors.white,
|
||||
strokeWidth: 2,
|
||||
strokeColor: Colors.black,
|
||||
),
|
||||
sublayers: [
|
||||
MapCircleLayer(
|
||||
circles: List<MapCircle>.generate(
|
||||
circles.length,
|
||||
(int index) {
|
||||
return MapCircle(
|
||||
center: circles[index],
|
||||
radius: 10,
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
tooltipBuilder: (BuildContext context, int index) {
|
||||
return Container(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text('Disease name :',
|
||||
style: TextStyle(
|
||||
color: Colors.black,
|
||||
fontWeight: FontWeight.bold)),
|
||||
Text(' ' + 'Corona',
|
||||
style: TextStyle(color: Colors.black)),
|
||||
],
|
||||
),
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text('Active cases :',
|
||||
style: TextStyle(
|
||||
color: Colors.black,
|
||||
fontWeight: FontWeight.bold)),
|
||||
Text(' ' + random.nextInt(62342).toString(),
|
||||
style: TextStyle(color: Colors.black)),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Inverted circle
|
||||
|
||||
You can apply color to the inverted circle by initializing the [`MapCircleLayer.inverted`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/MapCircleLayer.inverted.html) constructor. The inner circle color is transparent and the outer portion of the circle covered by an overlay color.
|
||||
|
||||
You can customize the inverted circle using the following properties:
|
||||
|
||||
* **Stroke color** - Change the stroke color of the circle using the [`strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/strokeColor.html) property.
|
||||
* **Stroke width** - Change the stroke width of the circle using the [`strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/strokeWidth.html) property. The default value of the `strokeWidth` property is `1`.
|
||||
* **Overlay color** - Change the outer portion color of the circle using the [`color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/color.html) property.
|
||||
* **Tooltip** - You can enable tooltip for the inverted circle using the [`tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSublayer/tooltipBuilder.html) property.
|
||||
* **Animation** - You can apply animation for the inverted circle using the [`animation`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/animation.html) property and able to customize the animation curve and duration.
|
||||
|
||||
N> It is applicable for both the tile layer and shape layer.
|
||||
|
||||
I> The individual circle customization like [`MapCircle.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/color.html), [`MapCircle.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/strokeColor.html) and [`MapCircle.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircle/strokeWidth.html) are not supported for the inverted circle.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late MapZoomPanBehavior zoomPanBehavior;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
zoomPanBehavior = MapZoomPanBehavior(zoomLevel: 4, maxZoomLevel: 15);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapTileLayer(
|
||||
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
initialFocalLatLng: MapLatLng(-14.2350, -51.9253),
|
||||
sublayers: [
|
||||
MapCircleLayer.inverted(
|
||||
circles: List<MapCircle>.generate(
|
||||
1,
|
||||
(int index) {
|
||||
return MapCircle(
|
||||
center: MapLatLng(-14.2350, -51.9253),
|
||||
radius: 50,
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
color: Colors.black.withOpacity(0.3),
|
||||
strokeColor: Colors.red,
|
||||
strokeWidth: 1,
|
||||
),
|
||||
],
|
||||
zoomPanBehavior: zoomPanBehavior,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
N>
|
||||
* Refer [`tooltip`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSublayer/tooltipBuilder.html) section, for adding and customizing tooltip to the inverted circle.
|
||||
* Refer [`animation`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapCircleLayer/animation.html) section, for applying animation to the inverted circle.
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Adding lines in Syncfusion Flutter maps | Syncfusion
|
||||
description: This section explains about how to add lines on the map and customize its appearance in the Flutter maps.
|
||||
title: Lines in Flutter Maps widget | Syncfusion
|
||||
description: Learn here all about adding the Line Layer feature of Syncfusion Flutter Maps (SfMaps) widget and more.
|
||||
platform: Flutter
|
||||
control: SfMaps
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Lines in the Flutter maps
|
||||
# Lines in Flutter Maps (SfMaps)
|
||||
|
||||
Line layer is a sublayer that renders a group of [`MapLine`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine-class.html) on [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) and [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html). This section helps to learn about how to add the lines and customize them.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,614 @@
|
|||
---
|
||||
layout: post
|
||||
title: Adding polygons in Flutter Maps widget | Syncfusion
|
||||
description: Learn here all about adding the Polygons feature of Syncfusion Flutter Maps (SfMaps) widget and more.
|
||||
platform: Flutter
|
||||
control: SfMaps
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Polygons in Flutter Maps (SfMaps)
|
||||
|
||||
Polygon layer is a sublayer that renders a group of [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) on [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) and [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html). This section helps to learn about how to add the polygons and customize them.
|
||||
|
||||
## Adding polygons
|
||||
|
||||
The [`polygons`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/polygons.html) is a collection of [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html). Every single [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) connects multiple coordinates through a [`points`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon/points.html) property.
|
||||
|
||||
N> It is applicable for both the tile layer and shape layer.
|
||||
|
||||
<b>In the shape layer</b>
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<PolygonModel> polygons;
|
||||
late List<MapLatLng> polygon1;
|
||||
late List<MapLatLng> polygon2;
|
||||
late MapShapeSource dataSource;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
polygon1 = <MapLatLng>[
|
||||
MapLatLng(55.7558, 37.6173),
|
||||
MapLatLng(53.7596, 87.1216),
|
||||
MapLatLng(61.5240, 105.3188),
|
||||
];
|
||||
|
||||
polygon2 = <MapLatLng>[
|
||||
MapLatLng(64.2823, -135.0000),
|
||||
MapLatLng(51.2538, -85.3232),
|
||||
MapLatLng(48.4284, -123.3656),
|
||||
];
|
||||
|
||||
polygons = <PolygonModel>[
|
||||
PolygonModel(polygon1),
|
||||
PolygonModel(polygon2),
|
||||
];
|
||||
dataSource = MapShapeSource.asset(
|
||||
'assets/world_map.json',
|
||||
shapeDataField: 'continent',
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(
|
||||
source: dataSource,
|
||||
sublayers: [
|
||||
MapPolygonLayer(
|
||||
polygons: List<MapPolygon>.generate(
|
||||
polygons.length,
|
||||
(int index) {
|
||||
return MapPolygon(
|
||||
points: polygons[index].points,
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class PolygonModel {
|
||||
PolygonModel(this.points);
|
||||
final List<MapLatLng> points;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
<b>In the tile layer</b>
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<PolygonModel> polygons;
|
||||
late List<MapLatLng> polygon1;
|
||||
late List<MapLatLng> polygon2;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
polygon1 = <MapLatLng>[
|
||||
MapLatLng(55.7558, 37.6173),
|
||||
MapLatLng(53.7596, 87.1216),
|
||||
MapLatLng(61.5240, 105.3188),
|
||||
];
|
||||
|
||||
polygon2 = <MapLatLng>[
|
||||
MapLatLng(64.2823, -135.0000),
|
||||
MapLatLng(51.2538, -85.3232),
|
||||
MapLatLng(48.4284, -123.3656),
|
||||
];
|
||||
|
||||
polygons = <PolygonModel>[
|
||||
PolygonModel(polygon1),
|
||||
PolygonModel(polygon2),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapTileLayer(
|
||||
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
sublayers: [
|
||||
MapPolygonLayer(
|
||||
polygons: List<MapPolygon>.generate(
|
||||
polygons.length,
|
||||
(int index) {
|
||||
return MapPolygon(
|
||||
points: polygons[index].points,
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class PolygonModel {
|
||||
PolygonModel(this.points);
|
||||
final List<MapLatLng> points;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Fill color
|
||||
|
||||
You can apply the same color for all [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) in the [`polygons`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/polygons.html) collection using the [`MapPolygonLayer.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/color.html) property. Alternatively, you can apply different colors to each [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) in the [`polygons`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/polygons.html) collection using the individual [`MapPolygon.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon/color.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<PolygonModel> polygons;
|
||||
late List<MapLatLng> polygon1;
|
||||
late List<MapLatLng> polygon2;
|
||||
late MapShapeSource dataSource;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
polygon1 = <MapLatLng>[
|
||||
MapLatLng(55.7558, 37.6173),
|
||||
MapLatLng(53.7596, 87.1216),
|
||||
MapLatLng(61.5240, 105.3188),
|
||||
];
|
||||
|
||||
polygon2 = <MapLatLng>[
|
||||
MapLatLng(64.2823, -135.0000),
|
||||
MapLatLng(51.2538, -85.3232),
|
||||
MapLatLng(48.4284, -123.3656),
|
||||
];
|
||||
|
||||
polygons = <PolygonModel>[
|
||||
PolygonModel(polygon1, Colors.greenAccent),
|
||||
PolygonModel(polygon2, Colors.pinkAccent),
|
||||
];
|
||||
|
||||
dataSource = MapShapeSource.asset(
|
||||
'assets/world_map.json',
|
||||
shapeDataField: 'continent',
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(
|
||||
source: dataSource,
|
||||
sublayers: [
|
||||
MapPolygonLayer(
|
||||
polygons: List<MapPolygon>.generate(
|
||||
polygons.length,
|
||||
(int index) {
|
||||
return MapPolygon(
|
||||
points: polygons[index].points,
|
||||
color: polygons[index].color,
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class PolygonModel {
|
||||
PolygonModel(this.points, this.color);
|
||||
final List<MapLatLng> points;
|
||||
final Color color;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Stroke width and color
|
||||
|
||||
You can apply the same stroke width for all [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) in the [`polygons`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/polygons.html) collection using the [`MapPolygonLayer.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/strokeWidth.html) property. Alternatively, you can apply different stroke width to each [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) in the [`polygons`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/polygons.html) collection using the individual [`MapPolygon.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon/strokeWidth.html) property. The default value of the [`MapPolygonLayer.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/strokeWidth.html) property is `2`.
|
||||
|
||||
You can apply the same stroke color for all [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) in the [`polygons`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/polygons.html) collection using the [`MapPolygonLayer.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/strokeColor.html) property. Alternatively, you can apply different stroke color to each [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) in the [`polygons`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/polygons.html) collection using the individual [`MapPolygon.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon/strokeColor.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<PolygonModel> polygons;
|
||||
late List<MapLatLng> polygon1;
|
||||
late List<MapLatLng> polygon2;
|
||||
late MapShapeSource dataSource;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
polygon1 = <MapLatLng>[
|
||||
MapLatLng(55.7558, 37.6173),
|
||||
MapLatLng(53.7596, 87.1216),
|
||||
MapLatLng(61.5240, 105.3188),
|
||||
];
|
||||
|
||||
polygon2 = <MapLatLng>[
|
||||
MapLatLng(64.2823, -135.0000),
|
||||
MapLatLng(51.2538, -85.3232),
|
||||
MapLatLng(48.4284, -123.3656),
|
||||
];
|
||||
|
||||
polygons = <PolygonModel>[
|
||||
PolygonModel(polygon1, 3),
|
||||
PolygonModel(polygon2, 4),
|
||||
];
|
||||
dataSource = MapShapeSource.asset(
|
||||
'assets/world_map.json',
|
||||
shapeDataField: 'continent',
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(
|
||||
source: dataSource,
|
||||
sublayers: [
|
||||
MapPolygonLayer(
|
||||
polygons: List<MapPolygon>.generate(
|
||||
polygons.length,
|
||||
(int index) {
|
||||
return MapPolygon(
|
||||
points: polygons[index].points,
|
||||
strokeWidth: polygons[index].width,
|
||||
strokeColor: Colors.pink,
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class PolygonModel {
|
||||
PolygonModel(this.points, this.width);
|
||||
final List<MapLatLng> points;
|
||||
final double width;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Tap
|
||||
|
||||
You can use the [`onTap`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon/onTap.html) callback to get a notification if the particular [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) is tapped. You can also customize the tapped [`MapPolygon`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon-class.html) based on the index passed in the callback as shown in the below code snippet.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<PolygonModel> polygons;
|
||||
late List<MapLatLng> polygon1;
|
||||
late List<MapLatLng> polygon2;
|
||||
late MapShapeSource dataSource;
|
||||
late int selectedIndex;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
polygon1 = <MapLatLng>[
|
||||
MapLatLng(55.7558, 37.6173),
|
||||
MapLatLng(53.7596, 87.1216),
|
||||
MapLatLng(61.5240, 105.3188),
|
||||
];
|
||||
|
||||
polygon2 = <MapLatLng>[
|
||||
MapLatLng(64.2823, -135.0000),
|
||||
MapLatLng(51.2538, -85.3232),
|
||||
MapLatLng(48.4284, -123.3656),
|
||||
];
|
||||
|
||||
polygons = <PolygonModel>[
|
||||
PolygonModel(polygon1),
|
||||
PolygonModel(polygon2),
|
||||
];
|
||||
dataSource = MapShapeSource.asset(
|
||||
'assets/world_map.json',
|
||||
shapeDataField: 'continent',
|
||||
);
|
||||
|
||||
selectedIndex = -1;
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(
|
||||
source: dataSource,
|
||||
sublayers: [
|
||||
MapPolygonLayer(
|
||||
polygons: List<MapPolygon>.generate(
|
||||
polygons.length,
|
||||
(int index) {
|
||||
return MapPolygon(
|
||||
points: polygons[index].points,
|
||||
color: selectedIndex == index ? Colors.pink : Colors.blue,
|
||||
onTap: () {
|
||||
setState(() {
|
||||
selectedIndex = index;
|
||||
});
|
||||
}
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class PolygonModel {
|
||||
PolygonModel(this.points);
|
||||
final List<MapLatLng> points;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Tooltip
|
||||
|
||||
You can show additional information about the polygon drawn using the [`tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSublayer/tooltipBuilder.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<PolygonModel> polygons;
|
||||
late List<MapLatLng> polygon1;
|
||||
late List<MapLatLng> polygon2;
|
||||
late MapShapeSource dataSource;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
polygon1 = <MapLatLng>[
|
||||
MapLatLng(55.7558, 37.6173),
|
||||
MapLatLng(53.7596, 87.1216),
|
||||
MapLatLng(61.5240, 105.3188),
|
||||
];
|
||||
|
||||
polygon2 = <MapLatLng>[
|
||||
MapLatLng(64.2823, -135.0000),
|
||||
MapLatLng(51.2538, -85.3232),
|
||||
MapLatLng(48.4284, -123.3656),
|
||||
];
|
||||
|
||||
polygons = <PolygonModel>[
|
||||
PolygonModel(polygon1),
|
||||
PolygonModel(polygon2),
|
||||
];
|
||||
dataSource = MapShapeSource.asset(
|
||||
'assets/world_map.json',
|
||||
shapeDataField: 'continent',
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(
|
||||
source: dataSource,
|
||||
sublayers: [
|
||||
MapPolygonLayer(
|
||||
polygons: List<MapPolygon>.generate(
|
||||
polygons.length,
|
||||
(int index) {
|
||||
return MapPolygon(
|
||||
points: polygons[index].points,
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
tooltipBuilder: (BuildContext context, int index) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: Text('Luxurious \n restaurant'),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class PolygonModel {
|
||||
PolygonModel(this.points);
|
||||
final List<MapLatLng> points;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Tooltip customization
|
||||
|
||||
You can customize the appearance of the tooltip.
|
||||
|
||||
* Background color - Change the background color of the tooltip in the maps using the [`MapTooltipSettings.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/color.html) property.
|
||||
* Stroke color - Change the stroke color of the tooltip in the maps using the [`MapTooltipSettings.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeColor.html) property.
|
||||
* Stroke width - Change the stroke width of the tooltip in the maps using the [`MapTooltipSettings.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTooltipSettings/strokeWidth.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<PolygonModel> polygons;
|
||||
late List<MapLatLng> polygon1;
|
||||
late MapShapeSource dataSource;
|
||||
late MapZoomPanBehavior zoomPanBehavior;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
polygon1 = <MapLatLng>[
|
||||
MapLatLng(27.6648, -81.5158),
|
||||
MapLatLng(32.3078, -64.7505),
|
||||
MapLatLng(18.2208, -66.5901),
|
||||
];
|
||||
|
||||
polygons = <PolygonModel>[
|
||||
PolygonModel(polygon1),
|
||||
];
|
||||
dataSource = MapShapeSource.asset(
|
||||
'assets/world_map.json',
|
||||
shapeDataField: 'continent',
|
||||
);
|
||||
|
||||
zoomPanBehavior = MapZoomPanBehavior(
|
||||
focalLatLng: MapLatLng(25.3078, -74.7505),
|
||||
zoomLevel: 4,
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapTileLayer(
|
||||
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
zoomPanBehavior: zoomPanBehavior,
|
||||
tooltipSettings: const MapTooltipSettings(
|
||||
color: Colors.white,
|
||||
strokeColor: Colors.black,
|
||||
strokeWidth: 2,
|
||||
),
|
||||
sublayers: [
|
||||
MapPolygonLayer(
|
||||
polygons: List<MapPolygon>.generate(
|
||||
polygons.length,
|
||||
(int index) {
|
||||
return MapPolygon(
|
||||
points: polygons[index].points,
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
tooltipBuilder: (BuildContext context, int index) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: Text('Bermuda \n triangle'),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class PolygonModel {
|
||||
PolygonModel(this.points);
|
||||
final List<MapLatLng> points;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Inverted polygon
|
||||
|
||||
You can apply color to the inverted polygon by initializing the [`MapPolygonLayer.inverted`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/MapPolygonLayer.inverted.html) constructor. The inner polygon color is transparent and the outer portion of the polygon covered by an overlay color.
|
||||
|
||||
You can customize the inverted polygon using the following properties:
|
||||
|
||||
* **Stroke color** - Change the stroke color of the polygon using the [`strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/strokeColor.html) property.
|
||||
* **Stroke width** - Change the stroke width of the polygon using the [`strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/strokeWidth.html) property. The default value of the `strokeWidth` property is `1`.
|
||||
* **Overlay color** - Change the outer portion color of the polygon using the [`color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygonLayer/color.html) property.
|
||||
* **Tooltip** - You can enable tooltip for the inverted polygon using the [`tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSublayer/tooltipBuilder.html) property.
|
||||
|
||||
N> It is applicable for both the tile layer and shape layer.
|
||||
|
||||
I> The individual polygon customization like [`MapPolygon.color`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon/color.html), [`MapPolygon.strokeColor`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon/strokeColor.html) and [`MapPolygon.strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolygon/strokeWidth.html) are not supported for the inverted polygon.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late MapZoomPanBehavior zoomPanBehavior;
|
||||
late List<MapLatLng> _polygon;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_polygon = <MapLatLng>[
|
||||
MapLatLng(27.6648, -81.5158),
|
||||
MapLatLng(32.3078, -64.7505),
|
||||
MapLatLng(18.2208, -66.5901),
|
||||
];
|
||||
|
||||
zoomPanBehavior = MapZoomPanBehavior(zoomLevel: 4);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfMaps(
|
||||
layers: [
|
||||
MapTileLayer(
|
||||
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
initialFocalLatLng: MapLatLng(25.0119, -73.4842),
|
||||
sublayers: [
|
||||
MapPolygonLayer.inverted(
|
||||
polygons: List<MapPolygon>.generate(
|
||||
1,
|
||||
(int index) {
|
||||
return MapPolygon(
|
||||
points: _polygon,
|
||||
);
|
||||
},
|
||||
).toSet(),
|
||||
color: Colors.black.withOpacity(0.3),
|
||||
strokeColor: Colors.red,
|
||||
strokeWidth: 1,
|
||||
),
|
||||
],
|
||||
zoomPanBehavior: zoomPanBehavior,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
N> Refer [`tooltip`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapSublayer/tooltipBuilder.html) section, for adding and customizing tooltip to the inverted polygon.
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Adding polylines in Syncfusion Flutter maps | Syncfusion
|
||||
description: This section explains how to add polylines on the map and customize its appearance in the Flutter maps.
|
||||
title: Adding Polylines in Flutter Maps widget | Syncfusion
|
||||
description: Learn here all about adding the Polylines feature of Syncfusion Flutter Maps (SfMaps) widget and more.
|
||||
platform: Flutter
|
||||
control: SfMaps
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Polylines in the Flutter maps
|
||||
# Polylines in Flutter Maps (SfMaps)
|
||||
|
||||
Polyline layer is a sublayer that renders a group of [`MapPolyline`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapPolyline-class.html) on [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) and [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html). This section helps to learn about how to add the polylines and customize them.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Zooming and panning in Syncfusion Flutter Maps | Syncfusion
|
||||
description: This section explains how to enable and customize zooming and panning in shape and tile layers in the Flutter Maps.
|
||||
title: Zooming and Panning in Flutter Maps widget | Syncfusion
|
||||
description: Learn here all about the Zooming and Panning feature of Syncfusion Flutter Maps (SfMaps) widget and more.
|
||||
platform: Flutter
|
||||
control: SfMaps
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Zooming and Panning features in Maps
|
||||
# Zooming and Panning in Flutter Maps (SfMaps)
|
||||
|
||||
It is possible to zoom in and out for any layer to take a closer look at a specific region by pinching the map, scrolling the mouse wheel or track pad, or using the toolbar on the web. Pan the map to navigate across the regions. You can also customize the zoom level and the center point of the initial rendering.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Basic features for Syncfusion Flutter Slider | Syncfusion
|
||||
description: This section explains about how to add the numeric slider and date slider in the Flutter application.
|
||||
title: Basic features in Flutter Slider widget | Syncfusion
|
||||
description: Learn here all about adding the Basic feature of Syncfusion Flutter Slider (SfSlider) widget and more.
|
||||
platform: Flutter
|
||||
control: SfSlider
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Basic features of slider
|
||||
# Basic features in Flutter Slider (SfSlider)
|
||||
This section explains about how to add the numeric and date slider.
|
||||
|
||||
## Minimum
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Enable & disable state in Syncfusion Flutter Slider | Syncfusion
|
||||
description: This section explains about how to render the slider in disabled state and customize its appearance.
|
||||
title: Enable & disable state in Flutter Slider widget | Syncfusion
|
||||
description: Learn here all about the enabled and disabled states of the Syncfusion Flutter Slider (SfSlider) widget and how to customize them.
|
||||
platform: Flutter
|
||||
control: SfSlider
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Enabled and disabled state in the slider
|
||||
# Enabled and disabled state in Flutter Slider (SfSlider)
|
||||
|
||||
This section helps to learn about the enabled and disabled state in the Flutter slider.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Started for Syncfusion Flutter Slider | Syncfusion
|
||||
description: This section explains the steps required to add the slider widget and its elements such as numeric and date values, ticks, labels and tooltip.
|
||||
title: Getting started with Flutter Slider widget | Syncfusion
|
||||
description: Learn here about getting started with Syncfusion Flutter Slider (SfSlider) widget, its elements, and more.
|
||||
platform: Flutter
|
||||
control: SfSlider
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Getting Started with Flutter Slider (SfSlider)
|
||||
# Getting started with Flutter Slider (Slider)
|
||||
This section explains the steps required to add the slider widget and its elements such as numeric and date values, ticks, labels and tooltip. This section covers only basic features needed to know to get started with Syncfusion slider.
|
||||
|
||||
## Add Flutter slider to an application
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Interval in Syncfusion Flutter Slider | Syncfusion
|
||||
description: This section explains about how to add intervals for numeric and date slider in Flutter application.
|
||||
title: Interval in Flutter Slider widget | Syncfusion
|
||||
description: Learn here all about adding the Interval feature of Syncfusion Flutter Slider (SfSlider) widget and more.
|
||||
platform: Flutter
|
||||
control: SfSlider
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Interval in Flutter Slider
|
||||
# Interval in Flutter Slider (SfSlider)
|
||||
This section explains about how to add the interval for numeric and date slider.
|
||||
|
||||
## Numeric interval
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Labels features in Syncfusion Flutter Slider | Syncfusion
|
||||
description: This section explains about how to show labels, divisors and how to customize them in the Flutter slider.
|
||||
title: Labels and Divisors in Flutter Slider widget | Syncfusion
|
||||
description: Learn here all about the Labels and Divisors feature of Syncfusion Flutter Slider (SfSlider) widget and more.
|
||||
platform: Flutter
|
||||
control: SfSlider
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Labels and divisors in the slider
|
||||
# Labels and Divisors in Flutter Treemap (SfTreemap)
|
||||
This section explains about how to add the labels and divisors in the slider.
|
||||
|
||||
## Show labels
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Overview of Syncfusion Flutter Slider
|
||||
description: Syncfusion Flutter slider provides a rich set of features such as support for numeric and date values, tooltip, labels, and ticks.
|
||||
title: About Flutter Slider widget | Syncfusion
|
||||
description: Learn here all about the introduction of Syncfusion Flutter Slider (SfSlider) widget, its features, and more.
|
||||
platform: Flutter
|
||||
control: SfSlider
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Overview of Flutter Slider
|
||||
# Flutter Slider (SfSlider) Overview
|
||||
|
||||
Syncfusion Flutter Slider is a highly interactive UI control, allowing users to select a single value from a range of values. It provides rich features, such as numeric and date values, labels, ticks, divisors, and tooltip.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: RTL feature in Syncfusion Flutter Slider | Syncfusion
|
||||
description: This section explains about how to render the Flutter slider in right to left direction using Directionality widget.
|
||||
title: RTL in Flutter Slider widget | Syncfusion
|
||||
description: Learn here all about enabling the RTL rendering in the Syncfusion Flutter Slider (SfSlider) widget and more.
|
||||
platform: Flutter
|
||||
control: SfSlider
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Right to Left (RTL) in Flutter slider
|
||||
# Right to Left (RTL) in Flutter Slider (SfSlider)
|
||||
|
||||
The Slider supports changing the layout direction of the widget in the right-to-left direction by setting the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property to `rtl` in the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Thumb features in Syncfusion Flutter Slider | Syncfusion
|
||||
description: This section explains about how to customize the thumb and thumb overlay in the Flutter application.
|
||||
title: Thumb and Thumb Overlay in Flutter Slider widget | Syncfusion
|
||||
description: Learn here all about the Thumb and Thumb Overlay feature of Syncfusion Flutter Slider (SfSlider) widget and more.
|
||||
platform: Flutter
|
||||
control: SfSlider
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Thumb and thumb overlay features in slider
|
||||
# Thumb and Thumb Overlay in Flutter Slider (SfSlider)
|
||||
|
||||
This section helps to learn about how to customize the thumb and thumb overlay in the slider.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Tick features in Syncfusion Flutter Slider | Syncfusion
|
||||
description: This section explains about how to show minor ticks, major ticks and how to customize them in the slider.
|
||||
title: Tick in Flutter Slider widget | Syncfusion
|
||||
description: Learn here all about adding the Tick feature of Syncfusion Flutter Slider (SfSlider) widget and more.
|
||||
platform: Flutter
|
||||
control: SfSlider
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Ticks features in Flutter slider
|
||||
# Tick in Flutter Slider (SfSlider)
|
||||
|
||||
This section helps to learn about how to add major and minor ticks in the slider.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Tooltip features in Syncfusion Flutter Slider | Syncfusion
|
||||
description: This section explains about how to show tooltip, and customize its appearance in the Flutter slider.
|
||||
title: Tooltip in Flutter Slider widget | Syncfusion
|
||||
description: Learn here all about adding the Tooltip feature of Syncfusion Flutter Slider (SfSlider) widget and more.
|
||||
platform: Flutter
|
||||
control: SfSlider
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Tooltip features in Flutter slider
|
||||
# Tooltip in Flutter Slider (SfSlider)
|
||||
|
||||
This section helps to learn about how to add tooltip in the slider.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Track features in Syncfusion Flutter Slider | Syncfusion
|
||||
description: This section explains about how to customize the appearance of the track in the Flutter application.
|
||||
title: Track in Flutter Slider widget | Syncfusion
|
||||
description: Learn here all about adding the Track feature of Syncfusion Flutter Slider (SfSlider) widget and more.
|
||||
platform: Flutter
|
||||
control: SfSlider
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Track features in Flutter slider
|
||||
# Track in Flutter Slider (SfSlider)
|
||||
|
||||
This section helps to learn about how to customize the track in the slider.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,266 @@
|
|||
---
|
||||
layout: post
|
||||
title: Colors Customization in Flutter Treemap widget | Syncfusion
|
||||
description: Learn here all about the Colors Customization feature of Syncfusion Flutter Treemap (SfTreemap) widget and more.
|
||||
platform: Flutter
|
||||
control: SfTreemap
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Colors Customization in Flutter Treemap (SfTreemap)
|
||||
|
||||
This section explains about the customization of color for the tiles based on specific value or range of values.
|
||||
|
||||
## Level color
|
||||
|
||||
You can apply uniform color to the whole level using the [`TreemapLevel.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/color.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<JobVacancyModel> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <JobVacancyModel>[
|
||||
JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70),
|
||||
JobVacancyModel(
|
||||
country: 'America', job: 'Technical', group: 'Testers', vacancy: 35),
|
||||
JobVacancyModel(
|
||||
country: 'America',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 105),
|
||||
JobVacancyModel(
|
||||
country: 'America',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Web',
|
||||
vacancy: 40),
|
||||
JobVacancyModel(
|
||||
country: 'India', job: 'Technical', group: 'Testers', vacancy: 25),
|
||||
JobVacancyModel(
|
||||
country: 'India',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 155),
|
||||
JobVacancyModel(
|
||||
country: 'India',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Web',
|
||||
vacancy: 60),
|
||||
JobVacancyModel(
|
||||
country: 'Germany', job: 'Technical', group: 'Testers', vacancy: 25),
|
||||
JobVacancyModel(
|
||||
country: 'Germany',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 155),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].vacancy;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) => _source[index].country,
|
||||
color: Colors.cyan,
|
||||
padding: EdgeInsets.all(1.5),
|
||||
),
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) => _source[index].job,
|
||||
color: Colors.pink[200],
|
||||
padding: EdgeInsets.all(10),
|
||||
),
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) => _source[index].group,
|
||||
color: Colors.green[400],
|
||||
padding: EdgeInsets.all(10),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class JobVacancyModel {
|
||||
const JobVacancyModel(
|
||||
{required this.country,
|
||||
required this.job,
|
||||
this.group,
|
||||
this.role,
|
||||
required this.vacancy});
|
||||
final String country;
|
||||
final String job;
|
||||
final String? group;
|
||||
final String? role;
|
||||
final double vacancy;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
N>
|
||||
* Refer the [`TreemapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/TreemapColorMapper.value.html), for applying tile color based on specific value.
|
||||
* Refer the [`TreemapColorMapper.range`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/TreemapColorMapper.range.html), for applying tile color based on range of values.
|
||||
|
||||
## Equal color mapping
|
||||
|
||||
If you return a value of different type other than the color from the [`TreemapLevel.colorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/colorValueMapper.html), then you must set the [`colorMappers`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/colorMappers.html) property which is a collection of [`TreemapColorMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper-class.html).
|
||||
|
||||
The value returned from the [`TreemapLevel.colorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/colorValueMapper.html) callback will be used for the comparison in the [`TreemapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/TreemapColorMapper.value.html). For the matched values, the [`TreemapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/color.html) will be applied to the respective tiles.
|
||||
|
||||
N> You can customize the legend icons color and texts using the [`TreemapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/color.html) and the [`TreemapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/TreemapColorMapper.value.html) properties respectively.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<SocialMediaUsers> _source;
|
||||
late List<TreemapColorMapper> _colorMappers;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <SocialMediaUsers>[
|
||||
SocialMediaUsers('India', 'Facebook', 25.4),
|
||||
SocialMediaUsers('USA', 'Instagram', 19.11),
|
||||
SocialMediaUsers('Japan', 'Facebook', 13.3),
|
||||
SocialMediaUsers('Germany', 'Instagram', 10.65),
|
||||
SocialMediaUsers('France', 'Twitter', 7.54),
|
||||
SocialMediaUsers('UK', 'Instagram', 4.93),
|
||||
];
|
||||
|
||||
_colorMappers = <TreemapColorMapper>[
|
||||
TreemapColorMapper.value(value: 'Facebook', color: Colors.blue[200]!),
|
||||
TreemapColorMapper.value(value: 'Instagram', color: Colors.deepOrange),
|
||||
TreemapColorMapper.value(value: 'Twitter', color: Colors.blue[800]!),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].usersInMillions;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
padding: const EdgeInsets.all(2.5),
|
||||
groupMapper: (int index) {
|
||||
return _source[index].country;
|
||||
},
|
||||
labelBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Text(_source[tile.indices[0]].socialMedia);
|
||||
},
|
||||
colorValueMapper: (TreemapTile tile) {
|
||||
return _source[tile.indices[0]].socialMedia;
|
||||
},
|
||||
),
|
||||
],
|
||||
colorMappers: _colorMappers,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class SocialMediaUsers {
|
||||
const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions);
|
||||
|
||||
final String country;
|
||||
final String socialMedia;
|
||||
final double usersInMillions;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
N>
|
||||
* Refer the [`TreemapColorMapper.range`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/TreemapColorMapper.range.html), for applying color based on range of values.
|
||||
|
||||
## Range color mapping
|
||||
|
||||
If you return a range value in the [`TreemapLevel.colorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/colorValueMapper.html), then you must set the [`colorMappers`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/colorMappers.html) property.
|
||||
|
||||
The value returned from the [`TreemapLevel.colorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/colorValueMapper.html) callback will be checked whether it lies in the [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) and [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) range. For the matched values, the [`TreemapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/color.html) will be applied to the respective tiles.
|
||||
|
||||
N> You can customize the legend icons color and texts using the [`TreemapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/color.html) and the [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) and [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) properties.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<SocialMediaUsers> _source;
|
||||
late List<TreemapColorMapper> _colorMappers;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <SocialMediaUsers>[
|
||||
SocialMediaUsers('India', 'Facebook', 25.4),
|
||||
SocialMediaUsers('USA', 'Instagram', 19.11),
|
||||
SocialMediaUsers('Japan', 'Facebook', 13.3),
|
||||
SocialMediaUsers('Germany', 'Instagram', 10.65),
|
||||
SocialMediaUsers('France', 'Twitter', 7.54),
|
||||
SocialMediaUsers('UK', 'Instagram', 4.93),
|
||||
];
|
||||
|
||||
_colorMappers = <TreemapColorMapper>[
|
||||
TreemapColorMapper.range(from: 0, to: 10, color: Colors.blue[200]!),
|
||||
TreemapColorMapper.range(from: 10, to: 20, color: Colors.deepOrange),
|
||||
TreemapColorMapper.range(from: 20, to: 30, color: Colors.blue[800]!),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].usersInMillions;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
padding: EdgeInsets.all(2.5),
|
||||
groupMapper: (int index) {
|
||||
return _source[index].country;
|
||||
},
|
||||
colorValueMapper: (TreemapTile tile) {
|
||||
return tile.weight;
|
||||
},
|
||||
),
|
||||
],
|
||||
colorMappers: _colorMappers,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class SocialMediaUsers {
|
||||
SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions);
|
||||
|
||||
final String country;
|
||||
final String socialMedia;
|
||||
final double usersInMillions;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
N>
|
||||
* Refer the [`TreemapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/TreemapColorMapper.value.html), for applying color to the tiles based on the specific value.
|
||||
|
|
@ -0,0 +1,373 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting started with Flutter Treemap widget | Syncfusion
|
||||
description: Learn here about getting started with Syncfusion Flutter Treemap (SfTreemap) widget, its elements, and more.
|
||||
platform: Flutter
|
||||
control: SfTreemap
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Getting started with Flutter Treemap (SfTreemap)
|
||||
|
||||
This section explains the steps required to add the treemap widget and enable its features such as labels, tooltip, assigning colors based on region, and legends. This section covers only basic features needed to know to get started with Syncfusion treemap.
|
||||
|
||||
## Add Flutter treemap 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 Treemap dependency to your pubspec.yaml file.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
dependencies:
|
||||
|
||||
syncfusion_flutter_treemap: ^xx.x.xx
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Treemap`](https://pub.dev/packages/syncfusion_flutter_treemap/versions) package.
|
||||
|
||||
**Get packages**
|
||||
|
||||
Run the following command to get the required packages.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
$ flutter pub get
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
**Import package**
|
||||
|
||||
Import the following package in your Dart code.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
import 'package:syncfusion_flutter_treemap/treemap.dart';
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Initialize treemap and populate data source
|
||||
|
||||
After importing the package, initialize the treemap widget as a child of any widget.
|
||||
|
||||
To populate the data source, set its count to the [`dataCount`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/dataCount.html) property of the treemap. The data will be grouped based on the values returned from the [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) callback. You can have more than one TreemapLevel in the [`levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection to form a hierarchical treemap. The quantitative value of the underlying data has to be returned from the [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback. Based on this value, every tile (rectangle) will have its size.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<SocialMediaUsers> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <SocialMediaUsers>[
|
||||
SocialMediaUsers(
|
||||
country: 'India', socialMedia: 'Facebook', usersInMillions: 25.4),
|
||||
SocialMediaUsers(
|
||||
country: 'USA', socialMedia: 'Instagram', usersInMillions: 19.11),
|
||||
SocialMediaUsers(
|
||||
country: 'Japan', socialMedia: 'Facebook', usersInMillions: 13.3),
|
||||
SocialMediaUsers(
|
||||
country: 'Germany', socialMedia: 'Instagram', usersInMillions: 10.65),
|
||||
SocialMediaUsers(
|
||||
country: 'France', socialMedia: 'Twitter', usersInMillions: 7.54),
|
||||
SocialMediaUsers(
|
||||
country: 'UK', socialMedia: 'Instagram', usersInMillions: 4.93),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].usersInMillions;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) {
|
||||
return _source[index].country;
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class SocialMediaUsers {
|
||||
const SocialMediaUsers({
|
||||
required this.country,
|
||||
required this.socialMedia,
|
||||
required this.usersInMillions,
|
||||
});
|
||||
|
||||
final String country;
|
||||
final String socialMedia;
|
||||
final double usersInMillions;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
N>
|
||||
* Refer the [`SfTreemap.levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html), for adding flat or hierarchical structured treemap.
|
||||
* Refer the [`SfTreemap.colorMappers`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/colorMappers.html), for customizing the tiles color.
|
||||
|
||||
## Add labels
|
||||
|
||||
You can add any type of custom widgets to the tiles as labels based on the index using the [`TreemapLevel.labelBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/labelBuilder.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<SocialMediaUsers> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <SocialMediaUsers>[
|
||||
SocialMediaUsers(
|
||||
country: 'India', socialMedia: 'Facebook', usersInMillions: 25.4),
|
||||
SocialMediaUsers(
|
||||
country: 'USA', socialMedia: 'Instagram', usersInMillions: 19.11),
|
||||
SocialMediaUsers(
|
||||
country: 'Japan', socialMedia: 'Facebook', usersInMillions: 13.3),
|
||||
SocialMediaUsers(
|
||||
country: 'Germany', socialMedia: 'Instagram', usersInMillions: 10.65),
|
||||
SocialMediaUsers(
|
||||
country: 'France', socialMedia: 'Twitter', usersInMillions: 7.54),
|
||||
SocialMediaUsers(
|
||||
country: 'UK', socialMedia: 'Instagram', usersInMillions: 4.93),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].usersInMillions;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) {
|
||||
return _source[index].country;
|
||||
},
|
||||
labelBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.only(left: 2.5, right: 2.4, top: 1),
|
||||
child: Text(tile.group),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class SocialMediaUsers {
|
||||
const SocialMediaUsers({
|
||||
required this.country,
|
||||
required this.socialMedia,
|
||||
required this.usersInMillions,
|
||||
});
|
||||
|
||||
final String country;
|
||||
final String socialMedia;
|
||||
final double usersInMillions;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Add tooltip
|
||||
|
||||
You can enable tooltip for any tile in the treemap and able to return the completely customized widget using the [`tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<SocialMediaUsers> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <SocialMediaUsers>[
|
||||
SocialMediaUsers(
|
||||
country: 'India', socialMedia: 'Facebook', usersInMillions: 25.4),
|
||||
SocialMediaUsers(
|
||||
country: 'USA', socialMedia: 'Instagram', usersInMillions: 19.11),
|
||||
SocialMediaUsers(
|
||||
country: 'Japan', socialMedia: 'Facebook', usersInMillions: 13.3),
|
||||
SocialMediaUsers(
|
||||
country: 'Germany', socialMedia: 'Instagram', usersInMillions: 10.65),
|
||||
SocialMediaUsers(
|
||||
country: 'France', socialMedia: 'Twitter', usersInMillions: 7.54),
|
||||
SocialMediaUsers(
|
||||
country: 'UK', socialMedia: 'Instagram', usersInMillions: 4.93),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].usersInMillions;
|
||||
},
|
||||
tooltipSettings: TreemapTooltipSettings(color: Colors.black),
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) {
|
||||
return _source[index].country;
|
||||
},
|
||||
labelBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.only(left: 2.5, right: 2.4, top: 1),
|
||||
child: Text(tile.group),
|
||||
);
|
||||
},
|
||||
tooltipBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 5, right: 5, top: 2, bottom: 3),
|
||||
child: Text(
|
||||
'Country : ${tile.group}\nSocial media : ${tile.weight}M',
|
||||
style: TextStyle(color: Colors.white)),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class SocialMediaUsers {
|
||||
const SocialMediaUsers({
|
||||
required this.country,
|
||||
required this.socialMedia,
|
||||
required this.usersInMillions,
|
||||
});
|
||||
|
||||
final String country;
|
||||
final String socialMedia;
|
||||
final double usersInMillions;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Add legend
|
||||
|
||||
You can show legend by initializing the [`legend`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/legend.html) property in the [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html). It is possible to customize the legend item's color and text using the [`SfTreemap.colorMappers`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/colorMappers.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<SocialMediaUsers> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <SocialMediaUsers>[
|
||||
SocialMediaUsers(
|
||||
country: 'India', socialMedia: 'Facebook', usersInMillions: 25.4),
|
||||
SocialMediaUsers(
|
||||
country: 'USA', socialMedia: 'Instagram', usersInMillions: 19.11),
|
||||
SocialMediaUsers(
|
||||
country: 'Japan', socialMedia: 'Facebook', usersInMillions: 13.3),
|
||||
SocialMediaUsers(
|
||||
country: 'Germany', socialMedia: 'Instagram', usersInMillions: 10.65),
|
||||
SocialMediaUsers(
|
||||
country: 'France', socialMedia: 'Twitter', usersInMillions: 7.54),
|
||||
SocialMediaUsers(
|
||||
country: 'UK', socialMedia: 'Instagram', usersInMillions: 4.93),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].usersInMillions;
|
||||
},
|
||||
tooltipSettings: TreemapTooltipSettings(color: Colors.black),
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) {
|
||||
return _source[index].country;
|
||||
},
|
||||
labelBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.only(left: 2.5, right: 2.4, top: 1),
|
||||
child: Text(tile.group),
|
||||
);
|
||||
},
|
||||
tooltipBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 5, right: 5, top: 2, bottom: 3),
|
||||
child: Text(
|
||||
'Country : ${tile.group}\nSocial media : ${tile.weight}M',
|
||||
style: TextStyle(color: Colors.white)),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
legend: TreemapLegend(),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class SocialMediaUsers {
|
||||
const SocialMediaUsers({
|
||||
required this.country,
|
||||
required this.socialMedia,
|
||||
required this.usersInMillions,
|
||||
});
|
||||
|
||||
final String country;
|
||||
final String socialMedia;
|
||||
final double usersInMillions;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
---
|
||||
layout: post
|
||||
title: Item Builder in Flutter Treemap widget | Syncfusion
|
||||
description: Learn here all about the Item Builder feature of Syncfusion Flutter Treemap (SfTreemap) widget and more.
|
||||
platform: Flutter
|
||||
control: SfTreemap
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Item Builder in Flutter Treemap (SfTreemap)
|
||||
|
||||
You can add any type of custom widgets such as image widget as a background of the tiles to easily visualize the type of data that a particular tile shows.
|
||||
|
||||
## Add images
|
||||
|
||||
You can add images as a background of the tiles using the [`TreemapLevel.itemBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/itemBuilder.html) callback.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<SocialMediaUsers> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <SocialMediaUsers>[
|
||||
SocialMediaUsers('India', 'Facebook', 25.4),
|
||||
SocialMediaUsers('USA', 'Instagram', 19.11),
|
||||
SocialMediaUsers('Japan', 'Facebook', 13.3),
|
||||
SocialMediaUsers('Germany', 'Instagram', 10.65),
|
||||
SocialMediaUsers('France', 'Twitter', 7.54),
|
||||
SocialMediaUsers('UK', 'Instagram', 4.93),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].usersInMillions;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) {
|
||||
return _source[index].country;
|
||||
},
|
||||
itemBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Align(
|
||||
alignment: Alignment.center,
|
||||
child: Image.asset(
|
||||
_getImageSource(tile)!,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
String? _getImageSource(TreemapTile tile) {
|
||||
if (_source[tile.indices[0]].socialMedia == 'Facebook') {
|
||||
return 'images/facebook.png';
|
||||
} else if (_source[tile.indices[0]].socialMedia == 'Instagram') {
|
||||
return 'images/instagram.png';
|
||||
} else if (_source[tile.indices[0]].socialMedia == 'Twitter') {
|
||||
return 'images/twitter.png';
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
class SocialMediaUsers {
|
||||
const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions);
|
||||
|
||||
final String country;
|
||||
final String socialMedia;
|
||||
final double usersInMillions;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
N>
|
||||
* Refer the [`Align`](https://api.flutter.dev/flutter/widgets/Align-class.html) widget, to change the position of the widget.
|
||||
* Refer the [`TreemapLevel.labelBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/labelBuilder.html), to add labels on the tiles.
|
||||
|
|
@ -0,0 +1,407 @@
|
|||
---
|
||||
layout: post
|
||||
title: Labels in Flutter Treemap widget | Syncfusion
|
||||
description: Learn here all about adding the Labels feature of Syncfusion Flutter Treemap (SfTreemap) widget and more.
|
||||
platform: Flutter
|
||||
control: SfTreemap
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Labels in Flutter Treemap (SfTreemap)
|
||||
|
||||
You can add any type of widgets like text widget to improve the readability of the individual tiles by providing brief descriptions on labels.
|
||||
|
||||
## Add labels
|
||||
|
||||
You can add labels on the tiles using the [`TreemapLevel.labelBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/labelBuilder.html) callback which is available in the [`SfTreemap.levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<JobVacancyModel> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <JobVacancyModel>[
|
||||
JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70),
|
||||
JobVacancyModel(
|
||||
country: 'America', job: 'Technical', group: 'Testers', vacancy: 35),
|
||||
JobVacancyModel(
|
||||
country: 'America',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 105),
|
||||
JobVacancyModel(
|
||||
country: 'America',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Web',
|
||||
vacancy: 40),
|
||||
JobVacancyModel(country: 'America', job: 'Management', vacancy: 40),
|
||||
JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60),
|
||||
JobVacancyModel(
|
||||
country: 'India', job: 'Technical', group: 'Testers', vacancy: 25),
|
||||
JobVacancyModel(
|
||||
country: 'India',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 155),
|
||||
JobVacancyModel(
|
||||
country: 'India',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Web',
|
||||
vacancy: 60),
|
||||
JobVacancyModel(
|
||||
country: 'Germany', job: 'Sales', group: 'Executive', vacancy: 30),
|
||||
JobVacancyModel(
|
||||
country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40),
|
||||
JobVacancyModel(
|
||||
country: 'UK',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 100),
|
||||
JobVacancyModel(
|
||||
country: 'UK',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Web',
|
||||
vacancy: 30),
|
||||
JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60),
|
||||
JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].vacancy;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) => _source[index].country,
|
||||
color: Colors.pink,
|
||||
labelBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.all(5),
|
||||
child: Text(tile.group),
|
||||
);
|
||||
},
|
||||
),
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) => _source[index].job,
|
||||
color: Colors.green,
|
||||
labelBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.all(5),
|
||||
child: Text(tile.group),
|
||||
);
|
||||
},
|
||||
),
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) => _source[index].group,
|
||||
color: Colors.blue,
|
||||
labelBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.all(5),
|
||||
child: Text(tile.group),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class JobVacancyModel {
|
||||
const JobVacancyModel(
|
||||
{required this.country,
|
||||
required this.job,
|
||||
this.group,
|
||||
this.role,
|
||||
required this.vacancy});
|
||||
final String country;
|
||||
final String job;
|
||||
final String? group;
|
||||
final String? role;
|
||||
final double vacancy;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Overflow mode
|
||||
|
||||
You can trim or fade the label when it is overflowed from the tile using the [`Text.overflow`](https://api.flutter.dev/flutter/widgets/Text/overflow.html) property. The possible values are `visible`, `ellipsis`, `clip` and `fade`. The default value of the [`Text.overflow`](https://api.flutter.dev/flutter/widgets/Text/overflow.html)property is `TextOverflow.visible`.
|
||||
|
||||
By default, the labels will render even if it overflows from the tile.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<JobVacancyModel> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <JobVacancyModel>[
|
||||
JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70),
|
||||
JobVacancyModel(
|
||||
country: 'America', job: 'Technical', group: 'Testers', vacancy: 35),
|
||||
JobVacancyModel(
|
||||
country: 'America',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 105),
|
||||
JobVacancyModel(
|
||||
country: 'America',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Web',
|
||||
vacancy: 40),
|
||||
JobVacancyModel(country: 'America', job: 'Management', vacancy: 40),
|
||||
JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60),
|
||||
JobVacancyModel(
|
||||
country: 'India', job: 'Technical', group: 'Testers', vacancy: 25),
|
||||
JobVacancyModel(
|
||||
country: 'India',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 155),
|
||||
JobVacancyModel(
|
||||
country: 'India',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Web',
|
||||
vacancy: 60),
|
||||
JobVacancyModel(
|
||||
country: 'Germany', job: 'Sales', group: 'Executive', vacancy: 30),
|
||||
JobVacancyModel(
|
||||
country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40),
|
||||
JobVacancyModel(
|
||||
country: 'UK',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 100),
|
||||
JobVacancyModel(
|
||||
country: 'UK',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Web',
|
||||
vacancy: 30),
|
||||
JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60),
|
||||
JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].vacancy;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) => _source[index].country,
|
||||
color: Colors.pink,
|
||||
labelBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.all(5),
|
||||
child: Text(
|
||||
tile.group,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) => _source[index].job,
|
||||
color: Colors.green,
|
||||
labelBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.all(5),
|
||||
child: Text(
|
||||
tile.group,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) => _source[index].group,
|
||||
color: Colors.blue,
|
||||
labelBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.all(5),
|
||||
child: Text(
|
||||
tile.group,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class JobVacancyModel {
|
||||
const JobVacancyModel(
|
||||
{required this.country,
|
||||
required this.job,
|
||||
this.group,
|
||||
this.role,
|
||||
required this.vacancy});
|
||||
final String country;
|
||||
final String job;
|
||||
final String? group;
|
||||
final String? role;
|
||||
final double vacancy;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Alignment
|
||||
|
||||
You can change the labels alignment by wrapping the text widget using the [`Align`](https://api.flutter.dev/flutter/widgets/Align-class.html) widget and set the [`alignment`](https://api.flutter.dev/flutter/widgets/Align/alignment.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<JobVacancyModel> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <JobVacancyModel>[
|
||||
JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70),
|
||||
JobVacancyModel(
|
||||
country: 'America', job: 'Technical', group: 'Testers', vacancy: 35),
|
||||
JobVacancyModel(
|
||||
country: 'America',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 105),
|
||||
JobVacancyModel(
|
||||
country: 'America',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Web',
|
||||
vacancy: 40),
|
||||
JobVacancyModel(country: 'America', job: 'Management', vacancy: 40),
|
||||
JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60),
|
||||
JobVacancyModel(
|
||||
country: 'India', job: 'Technical', group: 'Testers', vacancy: 25),
|
||||
JobVacancyModel(
|
||||
country: 'India',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 155),
|
||||
JobVacancyModel(
|
||||
country: 'India',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Web',
|
||||
vacancy: 60),
|
||||
JobVacancyModel(
|
||||
country: 'Germany', job: 'Sales', group: 'Executive', vacancy: 30),
|
||||
JobVacancyModel(
|
||||
country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40),
|
||||
JobVacancyModel(
|
||||
country: 'UK',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 100),
|
||||
JobVacancyModel(
|
||||
country: 'UK',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Web',
|
||||
vacancy: 30),
|
||||
JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60),
|
||||
JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].vacancy;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) => _source[index].country,
|
||||
color: Colors.pink,
|
||||
labelBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Align(
|
||||
alignment: Alignment.center,
|
||||
child: Text(tile.group),
|
||||
);
|
||||
},
|
||||
),
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) => _source[index].job,
|
||||
color: Colors.green,
|
||||
labelBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Align(
|
||||
alignment: Alignment.center,
|
||||
child: Text(tile.group),
|
||||
);
|
||||
},
|
||||
),
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) => _source[index].group,
|
||||
color: Colors.blue,
|
||||
labelBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Align(
|
||||
alignment: Alignment.center,
|
||||
child: Text(tile.group),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class JobVacancyModel {
|
||||
const JobVacancyModel(
|
||||
{required this.country,
|
||||
required this.job,
|
||||
this.group,
|
||||
this.role,
|
||||
required this.vacancy});
|
||||
final String country;
|
||||
final String job;
|
||||
final String? group;
|
||||
final String? role;
|
||||
final double vacancy;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
---
|
||||
layout: post
|
||||
title: Layouts in Flutter Treemap widget | Syncfusion
|
||||
description: Learn here all about adding different layouts of the Syncfusion Flutter Treemap (SfTreemap) widget and more.
|
||||
platform: Flutter
|
||||
control: SfTreemap
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Layouts in Flutter Treemap (SfTreemap)
|
||||
|
||||
This section explains the different layouts in the treemap widget. The available layouts are,
|
||||
|
||||
* Squarified
|
||||
* Slice
|
||||
* Dice
|
||||
|
||||
## Squarified
|
||||
|
||||
The [`squarified`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/SfTreemap.html) layout will arrange the rectangles in a row and wrap them to the next row according to the available size. The size of the particular rectangle is based on the value returned from [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback. By default, squarified layout is used.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<PopulationModel> _dataSource;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_dataSource = <PopulationModel>[
|
||||
PopulationModel(continent: 'Asia', populationInMillions: 25.4),
|
||||
PopulationModel(continent: 'South America', populationInMillions: 19.11),
|
||||
PopulationModel(continent: 'North America', populationInMillions: 13.3),
|
||||
PopulationModel(continent: 'Europe', populationInMillions: 10.65),
|
||||
PopulationModel(continent: 'Africa', populationInMillions: 7.54),
|
||||
PopulationModel(continent: 'Australia', populationInMillions: 4.93),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfTreemap(
|
||||
dataCount: _dataSource.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _dataSource[index].populationInMillions;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) {
|
||||
return _dataSource[index].continent;
|
||||
},
|
||||
color: Colors.teal[200],
|
||||
padding: const EdgeInsets.all(1.5),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class PopulationModel {
|
||||
const PopulationModel({
|
||||
required this.continent,
|
||||
required this.populationInMillions,
|
||||
});
|
||||
|
||||
final String continent;
|
||||
final double populationInMillions;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Slice
|
||||
|
||||
The [`slice`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/SfTreemap.slice.html) layout will start to arrange each rectangle in a horizontal direction and the size of the rectangle will be based on the value returned from [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback and the available height.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<PopulationModel> _dataSource;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_dataSource = <PopulationModel>[
|
||||
PopulationModel(continent: 'Asia', populationInMillions: 25.4),
|
||||
PopulationModel(continent: 'South America', populationInMillions: 19.11),
|
||||
PopulationModel(continent: 'North America', populationInMillions: 13.3),
|
||||
PopulationModel(continent: 'Europe', populationInMillions: 10.65),
|
||||
PopulationModel(continent: 'Africa', populationInMillions: 7.54),
|
||||
PopulationModel(continent: 'Australia', populationInMillions: 4.93),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfTreemap.slice(
|
||||
dataCount: _dataSource.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _dataSource[index].populationInMillions;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) {
|
||||
return _dataSource[index].continent;
|
||||
},
|
||||
color: Colors.teal[200],
|
||||
padding: const EdgeInsets.all(1.5),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class PopulationModel {
|
||||
const PopulationModel({
|
||||
required this.continent,
|
||||
required this.populationInMillions,
|
||||
});
|
||||
|
||||
final String continent;
|
||||
final double populationInMillions;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Dice
|
||||
|
||||
The [`dice`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/SfTreemap.dice.html) structure will start to arrange each rectangle in the vertical direction and the size of the rectangle will be based on the value returned from the [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback and the available width.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<PopulationModel> _dataSource;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_dataSource = <PopulationModel>[
|
||||
PopulationModel(continent: 'Asia', populationInMillions: 25.4),
|
||||
PopulationModel(continent: 'South America', populationInMillions: 19.11),
|
||||
PopulationModel(continent: 'North America', populationInMillions: 13.3),
|
||||
PopulationModel(continent: 'Europe', populationInMillions: 10.65),
|
||||
PopulationModel(continent: 'Africa', populationInMillions: 7.54),
|
||||
PopulationModel(continent: 'Australia', populationInMillions: 4.93),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfTreemap.dice(
|
||||
dataCount: _dataSource.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _dataSource[index].populationInMillions;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) {
|
||||
return _dataSource[index].continent;
|
||||
},
|
||||
color: Colors.teal[200],
|
||||
padding: const EdgeInsets.all(1.5),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class PopulationModel {
|
||||
const PopulationModel({
|
||||
required this.continent,
|
||||
required this.populationInMillions,
|
||||
});
|
||||
|
||||
final String continent;
|
||||
final double populationInMillions;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,344 @@
|
|||
---
|
||||
layout: post
|
||||
title: Flat and Hierarchical Levels in Flutter Treemap | Syncfusion
|
||||
description: Learn here all about the Flat and Hierarchical Levels feature of Syncfusion Flutter Treemap (SfTreemap) widget and more.
|
||||
platform: Flutter
|
||||
control: SfTreemap
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Flat and Hierarchical Levels in Flutter Treemap (SfTreemap)
|
||||
|
||||
The levels of the treemap can be categorized into the following two types,
|
||||
|
||||
* Flat level.
|
||||
* Hierarchical level.
|
||||
|
||||
## Flat level
|
||||
|
||||
There will be a tile for each unique value returned in the [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) callback which is added to the [`levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection property of [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html).
|
||||
|
||||
### Squarified
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<PopulationModel> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <PopulationModel>[
|
||||
PopulationModel('Asia', 25.4),
|
||||
PopulationModel('South America', 19.11),
|
||||
PopulationModel('North America', 13.3),
|
||||
PopulationModel('Europe', 10.65),
|
||||
PopulationModel('Africa', 7.54),
|
||||
PopulationModel('Australia', 4.93),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].populationInMillions;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) {
|
||||
return _source[index].continent;
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class PopulationModel {
|
||||
const PopulationModel(this.continent, this.populationInMillions);
|
||||
|
||||
final String continent;
|
||||
final double populationInMillions;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
N>
|
||||
* Refer the [`TreemapLevel.colorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/colorValueMapper.html), for customizing the tile color.
|
||||
* Refer the [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html), for adding and customizing the tooltip on the treemap.
|
||||
* Refer the [`TreemapLevel.labelBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/labelBuilder.html), for adding and customizing the label on the tile.
|
||||
* Refer the [`TreemapLevel.itemBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/itemBuilder.html), for adding and customizing the custom widget on the treemap.
|
||||
|
||||
## Hierarchical level
|
||||
|
||||
Hierarchical level arrange the tiles in the form of nested rectangles. Each tile of the treemap is a rectangle which is filled with smaller rectangles representing sub-data. You can have more than one [`TreemapLevel`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel-class.html) in the [`levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection to form a hierarchical treemap.
|
||||
|
||||
The first level will work similarly to the flat level. From the next level in the [`levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection, the items returned from the [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) for the indices, will be placed inside the rectangle for the same indices returned from the [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) in the previous level. This will go on until the last level in the [`levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection.
|
||||
|
||||
### Squarified
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<JobVacancyModel> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <JobVacancyModel>[
|
||||
JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70),
|
||||
JobVacancyModel(
|
||||
country: 'America', job: 'Technical', group: 'Testers', vacancy: 35),
|
||||
JobVacancyModel(
|
||||
country: 'America',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 105),
|
||||
JobVacancyModel(
|
||||
country: 'America',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Web',
|
||||
vacancy: 40),
|
||||
JobVacancyModel(country: 'America', job: 'Management', vacancy: 40),
|
||||
JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60),
|
||||
JobVacancyModel(
|
||||
country: 'India', job: 'Technical', group: 'Testers', vacancy: 25),
|
||||
JobVacancyModel(
|
||||
country: 'India',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 155),
|
||||
JobVacancyModel(
|
||||
country: 'India',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Web',
|
||||
vacancy: 60),
|
||||
JobVacancyModel(
|
||||
country: 'Germany', job: 'Sales', group: 'Executive', vacancy: 30),
|
||||
JobVacancyModel(
|
||||
country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40),
|
||||
JobVacancyModel(
|
||||
country: 'UK',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 100),
|
||||
JobVacancyModel(
|
||||
country: 'UK',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Web',
|
||||
vacancy: 30),
|
||||
JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60),
|
||||
JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].vacancy;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(groupMapper: (int index) => _source[index].country),
|
||||
TreemapLevel(groupMapper: (int index) => _source[index].job),
|
||||
TreemapLevel(groupMapper: (int index) => _source[index].group),
|
||||
TreemapLevel(groupMapper: (int index) => _source[index].role),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class JobVacancyModel {
|
||||
const JobVacancyModel(
|
||||
{required this.country,
|
||||
required this.job,
|
||||
this.group,
|
||||
this.role,
|
||||
required this.vacancy});
|
||||
final String country;
|
||||
final String job;
|
||||
final String? group;
|
||||
final String? role;
|
||||
final double vacancy;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
N>
|
||||
* Refer the [`TreemapLevel.colorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/colorValueMapper.html), for customizing the tile color.
|
||||
* Refer the [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html), for adding and customizing the tooltip on the treemap.
|
||||
* Refer the [`TreemapLevel.labelBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/labelBuilder.html), for adding and customizing the label on the tile.
|
||||
* Refer the [`TreemapLevel.itemBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/itemBuilder.html), for adding and customizing the custom widget on the treemap.
|
||||
|
||||
## Appearance customization
|
||||
|
||||
You can customize the levels using the following properties:
|
||||
|
||||
* **Padding** - Specifies the gap between the groups. The default value of the [`TreemapLevel.padding`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/padding.html) property is `EdgeInsets.all(1.0)`.
|
||||
|
||||
* **Color** - Specifies the background color for the group using the [`TreemapLevel.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/color.html) property.
|
||||
|
||||
* **Border** - Specifies the border color, border width and border radius for the group using the [`TreemapLevel.border`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/border.html) property.
|
||||
|
||||
### Squarified
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<JobVacancyModel> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <JobVacancyModel>[
|
||||
JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70),
|
||||
JobVacancyModel(
|
||||
country: 'America', job: 'Technical', group: 'Testers', vacancy: 35),
|
||||
JobVacancyModel(
|
||||
country: 'America',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 105),
|
||||
JobVacancyModel(
|
||||
country: 'America',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Web',
|
||||
vacancy: 40),
|
||||
JobVacancyModel(country: 'America', job: 'Management', vacancy: 40),
|
||||
JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60),
|
||||
JobVacancyModel(
|
||||
country: 'India', job: 'Technical', group: 'Testers', vacancy: 25),
|
||||
JobVacancyModel(
|
||||
country: 'India',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 155),
|
||||
JobVacancyModel(
|
||||
country: 'India',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Web',
|
||||
vacancy: 60),
|
||||
JobVacancyModel(
|
||||
country: 'Germany', job: 'Sales', group: 'Executive', vacancy: 30),
|
||||
JobVacancyModel(
|
||||
country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40),
|
||||
JobVacancyModel(
|
||||
country: 'UK',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Windows',
|
||||
vacancy: 100),
|
||||
JobVacancyModel(
|
||||
country: 'UK',
|
||||
job: 'Technical',
|
||||
group: 'Developers',
|
||||
role: 'Web',
|
||||
vacancy: 30),
|
||||
JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60),
|
||||
JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].vacancy;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) => _source[index].country,
|
||||
color: Colors.blue,
|
||||
border: RoundedRectangleBorder(
|
||||
side: BorderSide(
|
||||
color: Colors.blue,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
padding: EdgeInsets.all(2.5),
|
||||
),
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) => _source[index].job,
|
||||
color: Colors.orangeAccent,
|
||||
border: RoundedRectangleBorder(
|
||||
side: BorderSide(
|
||||
color: Colors.orangeAccent,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
padding: EdgeInsets.all(2.5),
|
||||
),
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) => _source[index].group,
|
||||
color: Colors.green[300],
|
||||
border: RoundedRectangleBorder(
|
||||
side: BorderSide(
|
||||
color: Colors.green,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
padding: EdgeInsets.all(5),
|
||||
),
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) => _source[index].role,
|
||||
color: Colors.pink[300],
|
||||
border: RoundedRectangleBorder(
|
||||
side: BorderSide(
|
||||
color: Colors.pink,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
padding: EdgeInsets.all(5),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class JobVacancyModel {
|
||||
const JobVacancyModel(
|
||||
{required this.country,
|
||||
required this.job,
|
||||
this.group,
|
||||
this.role,
|
||||
required this.vacancy});
|
||||
final String country;
|
||||
final String job;
|
||||
final String? group;
|
||||
final String? role;
|
||||
final double vacancy;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
N>
|
||||
* Refer the [`TreemapLevel.colorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/colorValueMapper.html), for customizing the tile color.
|
||||
* Refer the [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html), for adding and customizing the tooltip on the treemap.
|
||||
* Refer the [`TreemapLevel.labelBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/labelBuilder.html), for adding and customizing the label on the tile.
|
||||
* Refer the [`TreemapLevel.itemBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/itemBuilder.html), for adding and customizing the custom widget on the treemap.
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Overview of Syncfusion Flutter Treemap
|
||||
description: A Flutter Treemap library for creating interactive treemap to visualize flat and hierarchical data that are sized and colored based on quantitative variables.
|
||||
title: About Flutter Treemap widget | Syncfusion
|
||||
description: Learn here all about the introduction of Syncfusion Flutter Treemap (SfTreemap) widget, its features, and more.
|
||||
platform: Flutter
|
||||
control: SfTreemap
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Overview of Flutter Treemap
|
||||
# Flutter Treemap (SfTreemap) Overview
|
||||
|
||||
Syncfusion Flutter Treemap creates a highly interactive and customizable Flutter Treemap that has features set like selection, legends, labels, tooltips, color mapping, and much more.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,140 @@
|
|||
---
|
||||
layout: post
|
||||
title: Tile selection in Flutter Treemap widget | Syncfusion
|
||||
description: Learn here all about the Tile selection feature of Syncfusion Flutter Treemap (SfTreemap) widget and more.
|
||||
platform: Flutter
|
||||
control: SfTreemap
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Tile selection in Flutter Treemap (SfTreemap)
|
||||
|
||||
You can select a tile in order to highlight that area on a treemap. You can use the callback for performing any action during tile selection.
|
||||
|
||||
## Enable tile selection
|
||||
|
||||
You can enable tile selection on a treemap using the [`SfTreemap.onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/onSelectionChanged.html) property. The descendant tiles of the selected tile are also selected along with the selected tile when doing selection for hierarchical level.
|
||||
|
||||
The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/onSelectionChanged.html) callback will be called with the details of the selected tile when the user is selecting a tile by tapping and you will be able to do any specific functionalities like showing pop-up or navigate to a different page.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<SocialMediaUsers> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <SocialMediaUsers>[
|
||||
SocialMediaUsers('India', 'Facebook', 25.4),
|
||||
SocialMediaUsers('USA', 'Instagram', 19.11),
|
||||
SocialMediaUsers('Japan', 'Facebook', 13.3),
|
||||
SocialMediaUsers('Germany', 'Instagram', 10.65),
|
||||
SocialMediaUsers('France', 'Twitter', 7.54),
|
||||
SocialMediaUsers('UK', 'Instagram', 4.93),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].usersInMillions;
|
||||
},
|
||||
onSelectionChanged: (TreemapTile) {},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) {
|
||||
return _source[index].country;
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class SocialMediaUsers {
|
||||
const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions);
|
||||
|
||||
final String country;
|
||||
final String socialMedia;
|
||||
final double usersInMillions;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
N>
|
||||
* Refer the [`TreemapSelectionSettings`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapSelectionSettings-class.html), for customizing the selected tile's appearance.
|
||||
|
||||
## Appearance customization
|
||||
|
||||
You can customize the below appearance of the selected tile.
|
||||
|
||||
* **Background color** - Change the background color of the selected tile using the [`TreemapSelectionSettings.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapSelectionSettings/color.html) property.
|
||||
* **Border** - Change the border color, border stroke width using the [`BorderSide.color`](https://api.flutter.dev/flutter/painting/BorderSide/color.html) and [`BorderSide.width`](https://api.flutter.dev/flutter/painting/BorderSide/width.html) properties in the [`RoundedRectangleBorder`](https://api.flutter.dev/flutter/painting/RoundedRectangleBorder-class.html). Also apply rounded border using the [`RoundedRectangleBorder.borderRadius`](https://api.flutter.dev/flutter/painting/RoundedRectangleBorder/borderRadius.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<SocialMediaUsers> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <SocialMediaUsers>[
|
||||
SocialMediaUsers('India', 'Facebook', 25.4),
|
||||
SocialMediaUsers('USA', 'Instagram', 19.11),
|
||||
SocialMediaUsers('Japan', 'Facebook', 13.3),
|
||||
SocialMediaUsers('Germany', 'Instagram', 10.65),
|
||||
SocialMediaUsers('France', 'Twitter', 7.54),
|
||||
SocialMediaUsers('UK', 'Instagram', 4.93),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].usersInMillions;
|
||||
},
|
||||
onSelectionChanged: (TreemapTile) {},
|
||||
selectionSettings: TreemapSelectionSettings(
|
||||
color: Colors.orange,
|
||||
border: RoundedRectangleBorder(
|
||||
side: BorderSide(
|
||||
color: Colors.deepOrange,
|
||||
width: 1,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
),
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) {
|
||||
return _source[index].country;
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class SocialMediaUsers {
|
||||
const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions);
|
||||
|
||||
final String country;
|
||||
final String socialMedia;
|
||||
final double usersInMillions;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,202 @@
|
|||
---
|
||||
layout: post
|
||||
title: Tooltip in Flutter Treemap widget | Syncfusion
|
||||
description: Learn here all about adding the Tooltip feature of Syncfusion Flutter Treemap (SfTreemap) widget and more.
|
||||
platform: Flutter
|
||||
control: SfTreemap
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Tooltip in Flutter Treemap (SfTreemap)
|
||||
|
||||
Tooltip is used to provide information about the tile during the tap, or click interaction. This section helps to learn about how to show tooltip on a tile and customize them.
|
||||
|
||||
## Tooltip for the tiles
|
||||
|
||||
It is used to clearly indicate the tile information on the tap or click. To show tooltip for the tile, return a widget in [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html). This widget will then be wrapped in the builtin shape which comes with the nose at the bottom.
|
||||
|
||||
The [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html) will be called with the corresponding tile details every time you interact with the tile i.e., while tapping in touch devices and hover enter in the mouse enabled devices.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<SocialMediaUsers> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <SocialMediaUsers>[
|
||||
SocialMediaUsers('India', 'Facebook', 25.4),
|
||||
SocialMediaUsers('USA', 'Instagram', 19.11),
|
||||
SocialMediaUsers('Japan', 'Facebook', 13.3),
|
||||
SocialMediaUsers('Germany', 'Instagram', 10.65),
|
||||
SocialMediaUsers('France', 'Twitter', 7.54),
|
||||
SocialMediaUsers('UK', 'Instagram', 4.93),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].usersInMillions;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) {
|
||||
return _source[index].country;
|
||||
},
|
||||
tooltipBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.all(5),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('Country : ',
|
||||
style: TextStyle(color: Colors.white)),
|
||||
Text(tile.group, style: TextStyle(color: Colors.white)),
|
||||
],
|
||||
),
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('Social media : ',
|
||||
style: TextStyle(color: Colors.white)),
|
||||
Text(tile.weight.toString(),
|
||||
style: TextStyle(color: Colors.white)),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class SocialMediaUsers {
|
||||
const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions);
|
||||
|
||||
final String country;
|
||||
final String socialMedia;
|
||||
final double usersInMillions;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
N>
|
||||
* Refer the [`TreemapTooltipSettings`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapTooltipSettings/TreemapTooltipSettings.html), for customizing the tooltip shape.
|
||||
|
||||
## Appearance customization
|
||||
|
||||
You can customize the appearance of the tooltip.
|
||||
|
||||
* **Background color** - Change the background color of the tooltip in the treemap using the [`TreemapTooltipSettings.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapTooltipSettings/color.html) property.
|
||||
* **Border color** - Change the border color of the tooltip in the treemap using the [`TreemapTooltipSettings.borderColor`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapTooltipSettings/borderColor.html) property.
|
||||
* **Border width** - Change the border width of the tooltip in the treemap using the [`TreemapTooltipSettings.borderWidth`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapTooltipSettings/borderWidth.html) property.
|
||||
* **Border radius** - Change the border radius of the tooltip in the treemap using the [`TreemapTooltipSettings.borderRadius`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapTooltipSettings/borderRadius.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<SocialMediaUsers> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <SocialMediaUsers>[
|
||||
SocialMediaUsers('India', 'Facebook', 25.4),
|
||||
SocialMediaUsers('USA', 'Instagram', 19.11),
|
||||
SocialMediaUsers('Japan', 'Facebook', 13.3),
|
||||
SocialMediaUsers('Germany', 'Instagram', 10.65),
|
||||
SocialMediaUsers('France', 'Twitter', 7.54),
|
||||
SocialMediaUsers('UK', 'Instagram', 4.93),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].usersInMillions;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) {
|
||||
return _source[index].country;
|
||||
},
|
||||
tooltipBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.all(5),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('Country : '),
|
||||
Text(tile.group),
|
||||
],
|
||||
),
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('Social media : '),
|
||||
Text(tile.weight.toString()),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
tooltipSettings: TreemapTooltipSettings(
|
||||
color: Colors.orange[300],
|
||||
borderColor: Colors.deepOrange[900],
|
||||
borderWidth: 2,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class SocialMediaUsers {
|
||||
const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions);
|
||||
|
||||
final String country;
|
||||
final String socialMedia;
|
||||
final double usersInMillions;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
N>
|
||||
* Refer the [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html), for enabling tooltip for the tile.
|
||||
Загрузка…
Ссылка в новой задаче