Latest source merged from Syncfusion
This commit is contained in:
buildautomation
Родитель
e2bb0bcd48
Коммит
0d1ce96fd0
|
|
@ -9,9 +9,10 @@ documentation: ug
|
|||
|
||||
# Accessibility in Flutter DateRangePicker (SfDateRangePicker)
|
||||
|
||||
The `SfDateRangePicker` can easily be accessed by screen readers. Please find the following table for inner elements.
|
||||
## Screen reader support
|
||||
The `SfDateRangePicker` can easily be accessed by screen readers. Please find the following table to get spoken feedback about the inner element contents of the screen.
|
||||
|
||||
## Month view
|
||||
### Month view
|
||||
|
||||
| View | Format | Example |
|
||||
|-------------------------------------------------------------------|----------------------------------|------------------------------------------|
|
||||
|
|
@ -21,7 +22,7 @@ The `SfDateRangePicker` can easily be accessed by screen readers. Please find th
|
|||
| Disabled cells (Enable dates in past, dates exceed min/max dates) | EEE, dd/MMMM/yyyy, Disabled date | Friday, 31st January 2020, Disabled date |
|
||||
| Blackout date | EEE, dd/MMMM/yyyy, blackout date | 6th February 2020, Blackout date |
|
||||
|
||||
## Year view
|
||||
### Year view
|
||||
|
||||
| View | Format | Example |
|
||||
|------------------------------------------------------------------|--------------------------|------------------------------|
|
||||
|
|
@ -29,7 +30,7 @@ The `SfDateRangePicker` can easily be accessed by screen readers. Please find th
|
|||
| Header | yyyy | 2020 |
|
||||
| Disabled cell (Enable dates in past, dates exceeds min/max date) | MMMM yyyy, Disabled cell | December 2019, Disabled cell |
|
||||
|
||||
## Decade view
|
||||
### Decade view
|
||||
|
||||
| View | Format | Example |
|
||||
|------------------------------------------------------------------|---------------------|--------------------|
|
||||
|
|
@ -37,7 +38,7 @@ The `SfDateRangePicker` can easily be accessed by screen readers. Please find th
|
|||
| Decade cell | yyyy | 2020 |
|
||||
| Disabled cell (Enable dates in past, dates exceeds min/max date) | yyyy, Disabled cell | 2019 Disabled cell |
|
||||
|
||||
## Century view
|
||||
### Century view
|
||||
|
||||
| View | Format | Example |
|
||||
|------------------------------------------------------------------|-------------|-----------------------------|
|
||||
|
|
@ -45,9 +46,62 @@ The `SfDateRangePicker` can easily be accessed by screen readers. Please find th
|
|||
| Century cell | yyyy - yyyy | 2020 to 2029 |
|
||||
| Disabled cell (Enable dates in past, dates exceeds min/max date) | yyyy - yyyy | 2010 to 2019, Disabled cell |
|
||||
|
||||
## Navigation arrows
|
||||
### Navigation arrows
|
||||
|
||||
| View | Format | Example |
|
||||
|---------------------------|--------|-----------------|
|
||||
| Forward navigation arrow | > | Forward button |
|
||||
| Backward navigation arrow | < | Backward button |
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
The `SfDateRangePicker` [theming](https://help.syncfusion.com/flutter/themes/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all UI elements.
|
||||
|
||||
The following APIs allows to customize the colors of the following elements.
|
||||
* [viewHeaderStyle](https://help.syncfusion.com/flutter/daterangepicker/headers#view-header)
|
||||
* [headerStyle](https://help.syncfusion.com/flutter/daterangepicker/headers#header-appearance)
|
||||
* [leadingDatesDecoration](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [trailingDatesDecoration](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [cellDecoration](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [blackoutDatesDecoration](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [specialDatesDecoration](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [weekendDatesDecoration](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [selectionColor](https://help.syncfusion.com/flutter/daterangepicker/customizations#selection-cell-customization)
|
||||
* [startRangeSelectionColor](https://help.syncfusion.com/flutter/daterangepicker/customizations#selection-cell-customization)
|
||||
* [endRangeSelectionColor](https://help.syncfusion.com/flutter/daterangepicker/customizations#selection-cell-customization)
|
||||
* [rangeSelectionColor](https://help.syncfusion.com/flutter/daterangepicker/customizations#selection-cell-customization)
|
||||
* [yearCellStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations#year-cell-customization)
|
||||
|
||||
## Large fonts
|
||||
|
||||
The `SfDateRangePicker` font size can be adjusted automatically based on device settings and the font size scaled based on the `MediaQueryData.textScaleFactor`. And also it allows to change the font size of all elements in date range picker.
|
||||
* [todayTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
|
||||
* [leadingDatesTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
|
||||
* [trailingDatesTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
|
||||
* [disabledDatesTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
|
||||
* [textStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations)
|
||||
* [blackoutDateTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [specialDatesTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [weekendTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations#month-cell-customization)
|
||||
* [selectionTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations#selection-cell-customization)
|
||||
* [rangeTextStyle](https://help.syncfusion.com/flutter/daterangepicker/customizations#selection-cell-customization)
|
||||
|
||||
## Keyboard navigation
|
||||
|
||||
The following keyboard interactions are supported by the `SfDateRangePicker`.
|
||||
|
||||
| Key | Description |
|
||||
|-----------------------|--------------------------------------------------------------------------------------------------------|
|
||||
| Up arrow | Selects the same day of the previous week |
|
||||
| Down arrow | Selects the same day of the next week |
|
||||
| Right arrow | Selects the day after |
|
||||
| Left arrow | Selects the day before |
|
||||
| Alt+1 | Displays month view |
|
||||
| Alt+2 | Displays year view |
|
||||
| Alt+3 | Displays decade view |
|
||||
| Alt+4 | Displays century view |
|
||||
| Tap | Focuses the next clickable element |
|
||||
| Shift + upper arrow | Selects the same day in previous week to complete range selection or add the day in multiple selection |
|
||||
| Shift + down arrow | Selects the same day in next week to complete range selection or add the day in multiple selection |
|
||||
| Shift + left arrow | Selects the day before to complete range selection or add the day in multiple selection |
|
||||
| Shift + right arrow | Selects the day after to complete range selection or add the day in multiple selection |
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
layout: post
|
||||
title: About Essential Studio Flutter Licensing | Syncfusion
|
||||
description: Learn here about Syncfusion Essential Studio Flutter license key, how to generate the license key, how to register the license key, and more details.
|
||||
platform: Flutter
|
||||
control: Essential Studio
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
|
||||
# License Key Registration
|
||||
|
||||
The License key registration is no longer required for Flutter from version 18.3.0.x. So, there is no need to generate or register Syncfusion Flutter license keys in your Flutter projects.
|
||||
|
||||
The Flutter controls from Syncfusion can be used without registering the license keys.
|
||||
|
||||
N> If you are using Syncfusion controls prior to version 18.3.0.x, please follow this [link](https://help.syncfusion.com/common/essential-studio/licensing/license-key#flutter) to register your license key.
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: Essential Studio for Flutter Weekly Nuget Release Release Notes
|
||||
description: Essential Studio for Flutter Weekly Nuget Release Release Notes
|
||||
platform: flutter
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Essential Studio for Flutter Release Notes
|
||||
|
||||
{% include release-info.html date="April 20, 2021" version="v19.1.0.57" %}
|
||||
|
||||
|
||||
{% directory path: _includes/release-notes/v19.1.0.57
|
||||
%}
|
||||
|
||||
{% include {{file.url}} %}
|
||||
|
||||
{% enddirectory %}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
title: Essential Studio for Flutter 2021 volume 1 SP1 Release Notes
|
||||
description: Essential Studio for Flutter 2021 volume 1 SP1 Release Notes
|
||||
platform: flutter
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Essential Studio for Flutter Release Notes
|
||||
|
||||
{% include release-info.html date="May 12, 2021" version="v19.1.0.63" %}
|
||||
|
||||
|
||||
{% directory path: _includes/release-notes/v19.1.0.63 %}
|
||||
|
||||
{% include {{file.url}} %}
|
||||
|
||||
{% enddirectory %}
|
||||
|
|
@ -8,9 +8,12 @@ documentation: ug
|
|||
---
|
||||
|
||||
# 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
|
||||
## Screen reader support
|
||||
|
||||
The `SfCalendar` can easily be accessed by screen readers. Please find the following table to get spoken feedback about the inner element contents of the screen.
|
||||
|
||||
### Month view
|
||||
|
||||
| View | Format | Example |
|
||||
|-------------------|------------------------------|-----------------------------------------------|
|
||||
|
|
@ -18,7 +21,7 @@ The `SfCalendar` can easily be accessed by screen readers. Please find the follo
|
|||
| No events | EEE, dd/MMMM/yyyy, No events | Wednesday the 15th of January 2020, No events |
|
||||
| No selected dates | No selected date | No selected date |
|
||||
|
||||
## TimeSlot view
|
||||
### TimeSlot view
|
||||
|
||||
| View | Format | Example |
|
||||
|------------------------|--------------------------------------------|------------------------------------------------|
|
||||
|
|
@ -27,7 +30,7 @@ The `SfCalendar` can easily be accessed by screen readers. Please find the follo
|
|||
| All day expander view | + appointment Count | +3 |
|
||||
|
||||
|
||||
## Appointments
|
||||
### Appointments
|
||||
|
||||
| View | Format | Example |
|
||||
|-------------------------------|-----------------------------------------------------|------------------------------------------------------------------------------|
|
||||
|
|
@ -37,7 +40,7 @@ The `SfCalendar` can easily be accessed by screen readers. Please find the follo
|
|||
| Spanning appointment | Subject hh mm a dd/MMMM/yyyy - hh mm a dd/MMMM/yyyy | General meeting 12AM the 23rd of January 2020 – 1AM the 30th of January 2020 |
|
||||
|
||||
|
||||
## Headers
|
||||
### Headers
|
||||
|
||||
| View | Format | Example |
|
||||
|--------------------------|-------------------------|--------------------------------------|
|
||||
|
|
@ -46,3 +49,43 @@ The `SfCalendar` can easily be accessed by screen readers. Please find the follo
|
|||
| Timeline workweek header | dd/MMMM to dd/MMMM/yyyy | 16th of January to 20th January 2020 |
|
||||
| Month view header | EEE | Monday |
|
||||
| TimeSlot view header | EEE, dd/MMMM/yyyy | Wednesday the 29th of January 2020 |
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
The `SfCalendar` [theming](https://help.syncfusion.com/flutter/themes/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all UI elements.
|
||||
|
||||
The following APIs allow you to customize the colors of the following elements.
|
||||
* [todayHighlightColor](https://help.syncfusion.com/flutter/calendar/getting-started#today-highlight-color)
|
||||
* [cellBorderColor](https://help.syncfusion.com/flutter/calendar/getting-started#cell-border-color)
|
||||
* [backgroundColor](https://help.syncfusion.com/flutter/calendar/getting-started#background-color)
|
||||
* [selectionDecoration](https://help.syncfusion.com/flutter/calendar/getting-started#selection-decoration)
|
||||
* [agendasStyle](https://help.syncfusion.com/flutter/calendar/month-view#agenda-view-appearance)
|
||||
* [monthCellStyle](https://help.syncfusion.com/flutter/calendar/month-view#month-cell-appearance)
|
||||
* [dayHeaderSettings](https://help.syncfusion.com/flutter/calendar/schedule-view#day-header-customization)
|
||||
* [weekHeaderSettings](https://help.syncfusion.com/flutter/calendar/schedule-view#week-header-customization)
|
||||
* [monthHeaderSettings](https://help.syncfusion.com/flutter/calendar/schedule-view#month-header-customization)
|
||||
* [resourceViewSettings](https://help.syncfusion.com/flutter/calendar/resource-view#customization)
|
||||
|
||||
## Large fonts
|
||||
|
||||
The `SfCalendar` font size can be adjusted automatically based on device settings and the font size scaled based on the `MediaQueryData.textScaleFactor`. And also it allows to change the font size of all UI elements in the calendar.
|
||||
* [appointmentTextStyle](https://help.syncfusion.com/flutter/calendar/appointments#appearance-customization)
|
||||
* [timeTextStyle](https://help.syncfusion.com/flutter/calendar/timeslot-views#time-text-appearance)
|
||||
* [dateTextStyle](https://help.syncfusion.com/flutter/calendar/schedule-view#day-header-customization)
|
||||
* [dayTextStyle](https://help.syncfusion.com/flutter/calendar/schedule-view#day-header-customization)
|
||||
* [displayNameText style](https://help.syncfusion.com/flutter/calendar/resource-view#customization)
|
||||
|
||||
## Keyboard navigation
|
||||
|
||||
The following keyboard interactions are supported by the `SfCalendar`.
|
||||
|
||||
| Key | Description |
|
||||
|------------------|-------------------------------------------------------------------------------------------|
|
||||
| Up arrow | Moves selection to the next calendar cell directly above the currently selected time slot |
|
||||
| Down arrow | Moves selection to the next calendar cell directly below the currently selected time slot |
|
||||
| Right arrow | Moves selection to the same time slot on the next day |
|
||||
| Left arrow | Moves selection to the same time slot on the previous day |
|
||||
| Tab | Focuses the next clickable element, except appointments and cells |
|
||||
| Shift + tab | Focuses the previous clickable element, except appointment and cells |
|
||||
|
||||
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 500 KiB |
|
|
@ -45,11 +45,11 @@ The [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/cha
|
|||
|
||||
* [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisTitle/text.html) - used to set the title for axis.
|
||||
* [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisTitle/textStyle.html) - used to change the text color, size, font family, font style, and font weight.
|
||||
* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/color.html) - used to change the color of the label.
|
||||
* [`fontFamily`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontFamily.html) - used to change the font family for the axis title.
|
||||
* [`fontStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontStyle.html) - used to change the font style for the axis title.
|
||||
* [`fontWeight`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontWeight.html) - used to change the font weight for the axis title.
|
||||
* [`fontSize`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontSize.html) - used to change the font size for the axis title.
|
||||
* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTextStyle/color.html) - used to change the color of the label.
|
||||
* [`fontFamily`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTextStyle/fontFamily.html) - used to change the font family for the axis title.
|
||||
* [`fontStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTextStyle/fontStyle.html) - used to change the font style for the axis title.
|
||||
* [`fontWeight`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTextStyle/fontWeight.html) - used to change the font weight for the axis title.
|
||||
* [`fontSize`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTextStyle/fontSize.html) - used to change the font size for the axis title.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
|
|
@ -145,11 +145,11 @@ The [`labelRotation`](https://pub.dev/documentation/syncfusion_flutter_charts/la
|
|||
The [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelStyle.html) property in axis provides options to customize the font of axis label. The axis label can be customized using following properties,
|
||||
|
||||
* [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelStyle.html) - used to change the text color, size, font family, font style, and font weight.
|
||||
* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/color.html) - used to change the color of the axis label.
|
||||
* [`fontFamily`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontFamily.html) - used to change the font family for the axis label.
|
||||
* [`fontStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontStyle.html) - used to change the font style for the axis label.
|
||||
* [`fontWeight`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontWeight.html) - used to change the font weight for the axis label.
|
||||
* [`fontSize`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontSize.html) - used to change the font size for the axis label.
|
||||
* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTextStyle/color.html) - used to change the color of the axis label.
|
||||
* [`fontFamily`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTextStyle/fontFamily.html) - used to change the font family for the axis label.
|
||||
* [`fontStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTextStyle/fontStyle.html) - used to change the font style for the axis label.
|
||||
* [`fontWeight`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTextStyle/fontWeight.html) - used to change the font weight for the axis label.
|
||||
* [`fontSize`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTextStyle/fontSize.html) - used to change the font size for the axis label.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
|
|
|
|||
Двоичные данные
Flutter/cartesian-charts/images/marker-datalabel/cartesian_saturation.png
Normal file
Двоичные данные
Flutter/cartesian-charts/images/marker-datalabel/cartesian_saturation.png
Normal file
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 20 KiB |
Двоичные данные
Flutter/cartesian-charts/images/overview/overview.png
Двоичные данные
Flutter/cartesian-charts/images/overview/overview.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 40 KiB После Ширина: | Высота: | Размер: 48 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 84 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 87 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 22 KiB |
|
|
@ -51,7 +51,7 @@ Markers are used to provide information about the exact point location. You can
|
|||
|
||||
### Customizing marker shapes
|
||||
|
||||
Markers can be assigned with different shapes using the [`shape`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/shape.html) property. By default, markers are rendered with [`circle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataMarkerType-class.html) shape. The available shapes of markers are listed below.
|
||||
Markers can be assigned with different shapes using the [`shape`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/shape.html) property. By default, markers are rendered with [`circle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType-class.html) shape. The available shapes of markers are listed below.
|
||||
|
||||
* circle
|
||||
* rectangle
|
||||
|
|
@ -96,7 +96,7 @@ Markers can be assigned with different shapes using the [`shape`](https://pub.de
|
|||
|
||||
### Image marker
|
||||
|
||||
The markers can be rendered with desired image as shape. For this you have to specify the [`shape`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/shape.html) as [`image`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/image.html) and refer the image path using [`imageUrl`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/imageUrl.html) property.
|
||||
The markers can be rendered with desired image as shape. For this you have to specify the [`shape`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/shape.html) as [`image`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/DataMarkerType-class.html) and provide the image using [`image`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/image.html) property.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
|
|
@ -140,10 +140,10 @@ Data label can be added to a chart series by enabling the [`isVisible`](https://
|
|||
* [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/alignment.html) - aligns the data label text to [`near`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment-class.html), [`center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment-class.html) and [`far`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment-class.html).
|
||||
* [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/textStyle.html) - used to change the data label text color, size, font family, font style, and font weight.
|
||||
* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the color of the data label.
|
||||
* [`fontFamily`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontFamily.html) - used to change the font family for the data label.
|
||||
* [`fontStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontStyle.html) - used to change the font style for the data label.
|
||||
* [`fontWeight`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontWeight.html) - used to change the font weight for the data label.
|
||||
* [`fontSize`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontSize.html) - used to change the font size for the data label.
|
||||
* [`fontFamily`](https://api.flutter.dev/flutter/painting/TextStyle/fontFamily.html) - used to change the font family for the data label.
|
||||
* [`fontStyle`](https://api.flutter.dev/flutter/painting/TextStyle/fontStyle.html) - used to change the font style for the data label.
|
||||
* [`fontWeight`](https://api.flutter.dev/flutter/painting/TextStyle/fontWeight.html) - used to change the font weight for the data label.
|
||||
* [`fontSize`](https://api.flutter.dev/flutter/painting/TextStyle/fontSize.html) - used to change the font size for the data label.
|
||||
* [`margin`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/margin.html) - used to change the margin size for data labels.
|
||||
* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/opacity.html) - used to control the transparency of the data label.
|
||||
* [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) - used to align the Cartesian data label positions. The available options to customize the positions are [`outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html), [`auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html), [`top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html), [`bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html) and [`middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html).
|
||||
|
|
@ -476,3 +476,9 @@ In Vertical padding, providing positive value for y moves the data lab
|
|||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
### Data label saturation color
|
||||
|
||||
If the user didn’t provide text color to the data label, then by default, the saturation color is applied to the data label text. i.e., if the data points background color intensity is dark, then the data label will render in white color (#FFFFFF) and if the data points background color intensity is light, data label will render in black color (#000000).
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
---
|
||||
layout: post
|
||||
title: RTL support in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here about the RTL support in Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Right To Left (RTL) in Flutter Cartesian Chart (SfCartesianChart)
|
||||
|
||||
Cartesian chart supports right to left rendering. But chart axis, series, and other chart elements rendering will be the same for both LTR and RTL. Only, the legend rendering will be changed.
|
||||
|
||||
## RLT rendering ways
|
||||
|
||||
Right to left rendering can be switched in the following ways:
|
||||
|
||||
### Wrapping the SfCartesianChart with Directionality widget
|
||||
|
||||
To change the rendering direction from right to left, you can wrap the [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [TextDirection.rtl](https://api.flutter.dev/flutter/dart-ui/TextDirection-class.html).
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Directionality(
|
||||
textDirection: TextDirection.rtl,
|
||||
child: SfCartesianChart(
|
||||
//...
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
### Changing the locale to RTL languages
|
||||
|
||||
To change the chart rendering direction from right to left, you can change the [`locale`](https://api.flutter.dev/flutter/material/MaterialApp/locale.html) to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
localizationsDelegates: [
|
||||
GlobalMaterialLocalizations.delegate,
|
||||
GlobalWidgetsLocalizations.delegate,
|
||||
],
|
||||
supportedLocales: <Locale>[
|
||||
Locale('en'),
|
||||
Locale('ar'),
|
||||
// ... other locales the app supports
|
||||
],
|
||||
locale: Locale('ar'),
|
||||
home: Scaffold(
|
||||
body: SfCartesianChart(
|
||||
//...
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## RTL supported chart elements
|
||||
|
||||
Right to left rendering is effective only for the legend in the chart. Legend items will be rendered from right to left direction.
|
||||
|
||||
|
||||
|
||||
In addition, if you want the chart series and axis to look like it is rendering from right to left direction, set the [`opposedPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/opposedPosition.html) property in [`primaryXAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/primaryXAxis.html) to true and [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/isInversed.html) property in [`primaryYAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/primaryYAxis.html) to true.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
SfCartesianChart(
|
||||
primaryXAxis: NumericAxis(
|
||||
opposedPosition: true
|
||||
),
|
||||
primaryYAxis: NumericAxis(
|
||||
isInversed: true
|
||||
),
|
||||
//...
|
||||
)
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
Also, if you want to change the tooltip’s content, to look like it is rendering from right to left, then you can set the [`format`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/format.html) property in [`TooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) as `"point.y : point.x"`. By default, the tooltip format will be `"point.x : point.y"`.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
SfCartesianChart(
|
||||
tooltipBehavior: TooltipBehavior(
|
||||
enable: true,
|
||||
format: “point.y : point.x”
|
||||
)
|
||||
//...
|
||||
)
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
|
@ -770,10 +770,10 @@ Data labels can be enabled using the [`isVisible`](https://pub.dev/documentation
|
|||
|
||||
* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - changes the label background color.
|
||||
* [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/textStyle.html) - changes the text color, size, font family, fontStyle, and font weight.
|
||||
* [`textStyle.color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/color.html) - changes the color of the text.
|
||||
* [`textStyle.fontFamily`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontFamily.html) - changes the font family for chart title.
|
||||
* [`textStyle.fontStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontStyle.html) - changes the font style for the chart title.
|
||||
* [`textStyle.fontSize`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontSize.html) - changes the font size for the chart title.
|
||||
* [`textStyle.color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTextStyle/color.html) - changes the color of the text.
|
||||
* [`textStyle.fontFamily`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTextStyle/fontFamily.html) - changes the font family for chart title.
|
||||
* [`textStyle.fontStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTextStyle/fontStyle.html) - changes the font style for the chart title.
|
||||
* [`textStyle.fontSize`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTextStyle/fontSize.html) - changes the font size for the chart title.
|
||||
* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/opacity.html) - controls the transparency of the label background color.
|
||||
* [`borderRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderRadius.html) - customizes the data label border radius.
|
||||
* [`angle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/angle.html) - rotates the labels.
|
||||
|
|
|
|||
|
|
@ -17,10 +17,10 @@ Data label can be added to a chart series by enabling the [`isVisible`](https://
|
|||
* [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/alignment.html) - aligns the data label text to [`near`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment-class.html), [`center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment-class.html) and [`far`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment-class.html).
|
||||
* [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/textStyle.html) - used to change the data label text color, size, font family, font style, and font weight.
|
||||
* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the color of the data label.
|
||||
* [`fontFamily`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontFamily.html) - used to change the font family for the data label.
|
||||
* [`fontStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontStyle.html) - used to change the font style for the data label.
|
||||
* [`fontWeight`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontWeight.html) - used to change the font weight for the data label.
|
||||
* [`fontSize`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontSize.html) - used to change the font size for the data label.
|
||||
* [`fontFamily`](https://api.flutter.dev/flutter/painting/TextStyle/fontFamily.html) - used to change the font family for the data label.
|
||||
* [`fontStyle`](https://api.flutter.dev/flutter/painting/TextStyle/fontStyle.html) - used to change the font style for the data label.
|
||||
* [`fontWeight`](https://api.flutter.dev/flutter/painting/TextStyle/fontWeight.html) - used to change the font weight for the data label.
|
||||
* [`fontSize`](https://api.flutter.dev/flutter/painting/TextStyle/fontSize.html) - used to change the font size for the data label.
|
||||
* [`margin`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/margin.html) - used to change the margin size for data labels.
|
||||
* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/opacity.html) - used to control the transparency of the data label.
|
||||
* [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) - used to align the Circular data label positions. The available options to customize the positions are [`outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html), [`auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html), [`top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html), [`bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html) and [`middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html).
|
||||
|
|
@ -385,3 +385,8 @@ Data label and its connector line in the Circular charts for the point value 0 c
|
|||
|
||||
|
||||
|
||||
### Data label saturation color
|
||||
|
||||
If the user didn’t provide text color to the data label, then by default, the saturation color is applied to the data label text. i.e., if the data points background color intensity is dark, then the data label will render in white color (#FFFFFF) and if the data points background color intensity is light, data label will render in black color (#000000).
|
||||
|
||||
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 20 KiB |
Двоичные данные
Flutter/circular-charts/images/overview/overview.png
Двоичные данные
Flutter/circular-charts/images/overview/overview.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 40 KiB После Ширина: | Высота: | Размер: 49 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 89 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 86 KiB |
|
|
@ -0,0 +1,88 @@
|
|||
---
|
||||
layout: post
|
||||
title: RTL support in Flutter Circular Charts widget | Syncfusion
|
||||
description: Learn here about the RTL support in Syncfusion Flutter Circular Charts (SfCircularChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Right To Left (RTL) in Flutter Circular Chart (SfCircularChart)
|
||||
|
||||
Circular chart supports right to left rendering. But series and other chart elements rendering will be the same for both LTR and RTL. Only, the legend rendering will be changed.
|
||||
|
||||
## RLT rendering ways
|
||||
|
||||
Right to left rendering can be switched in the following ways:
|
||||
|
||||
### Wrapping the SfCircularChart with Directionality widget
|
||||
|
||||
To change the rendering direction from right to left, you can wrap the [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [TextDirection.rtl](https://api.flutter.dev/flutter/dart-ui/TextDirection-class.html).
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Directionality(
|
||||
textDirection: TextDirection.rtl,
|
||||
child: SfCircularChart(
|
||||
//...
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
### Changing the locale to RTL languages
|
||||
|
||||
To change the chart rendering direction from right to left, you can change the [`locale`](https://api.flutter.dev/flutter/material/MaterialApp/locale.html) to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
localizationsDelegates: [
|
||||
GlobalMaterialLocalizations.delegate,
|
||||
GlobalWidgetsLocalizations.delegate,
|
||||
],
|
||||
supportedLocales: <Locale>[
|
||||
Locale('en'),
|
||||
Locale('ar'),
|
||||
// ... other locales the app supports
|
||||
],
|
||||
locale: Locale('ar'),
|
||||
home: Scaffold(
|
||||
body: SfCircularChart(
|
||||
//...
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## RTL supported chart elements
|
||||
|
||||
Right to left rendering is effective only for the legend in the chart. Legend items will be rendered from right to left direction.
|
||||
|
||||
|
||||
|
||||
In addition, if you want to change the tooltip’s content, to look like it is rendering from right to left, then you can set the [`format`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/format.html) property in [`TooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) as `"point.y : point.x"`. By default, the tooltip format will be `"point.x : point.y"`.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
SfCircularChart(
|
||||
tooltipBehavior: TooltipBehavior(
|
||||
enable: true,
|
||||
format: “point.y : point.x”
|
||||
)
|
||||
//...
|
||||
)
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,290 @@
|
|||
---
|
||||
layout: post
|
||||
title: Column in Flutter DataGrid | DataTable | Syncfusion
|
||||
description: Learn here all about how to add columns to Syncfusion Flutter DataGrid (SfDataGrid) control and more.
|
||||
platform: flutter
|
||||
control: SfDataGrid
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Column Types in Flutter DataGrid (SfDataGrid)
|
||||
|
||||
[SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) provides support for load any type of widget in each column.
|
||||
|
||||
The following table describes the types of columns and its usage:
|
||||
|
||||
| Column Type | Renderer | Description |
|
||||
|-----------------------|---------------------------------|----------------------------------------|
|
||||
| GridTextColumn | GridCellTextFieldRenderer | Use to display the String data |
|
||||
|
||||
## GridColumn
|
||||
|
||||
GridColumn is a class that provides base functionalities for all the column types in `SfDataGrid`.
|
||||
|
||||
### Mapping column to a property
|
||||
|
||||
Column can be bound to a property in data object using [GridColumn.columnName](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/mappingName.html) property. [label](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/headerText.html) is used to display the required widget in a column header.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Hiding a column
|
||||
|
||||
[GridColumn.visible](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/visible.html) property can be used to set a column as hidden. The default value of the `visible` property is true.
|
||||
|
||||
>**NOTE**
|
||||
Set the `visible` property to `false` instead of setting column width as `0` to hide a column.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
visible: false,
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Set manual width for column
|
||||
|
||||
`SfDataGrid` allows you to customize the width of each [GridColumn](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn-class.html) in the [SfDataGrid.Columns](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/columns.html) collection. To customize column width, use the [GridColumn.width](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/width.html) property. By default, this property will not be assigned any value. The GridColumn renders in view based on the value of the [defaultColumnWidth](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/defaultColumnWidth.html) property.
|
||||
|
||||
>**NOTE**
|
||||
Set the `visible` property to `false` instead of setting column width as `0` to hide a column.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
width: 100.0,
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## GridTextColumn
|
||||
|
||||
[GridTextColumn](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridTextColumn-class.html) inherits all the properties of GridColumn.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -0,0 +1,289 @@
|
|||
---
|
||||
layout: post
|
||||
title: Columns sizing in Flutter DataGrid | Syncfusion | DataTable
|
||||
description: Learn here all about how to set the width for columns in Syncfusion Flutter DataGrid (SfDataGrid) widget and more.
|
||||
platform: flutter
|
||||
control: SfDataGrid
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Column sizing in Flutter DataGrid (SfDataGrid)
|
||||
|
||||
[SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) allows to set the column widths based on certain logic using [SfDataGrid.columnWidthMode](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/columnWidthMode.html) or [GridColumn.columnWidthMode](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/columnWidthMode.html) property. Below are the list of predefined column sizing options available.
|
||||
|
||||
| Mode | Description |
|
||||
|---------------------------|-----------------------------------------------------|
|
||||
| ColumnWidthMode.lastColumnFill | Applies default Column width to all the columns except last column which is visible and the remaining width from total width of SfDataGrid is set to last column. |
|
||||
| ColumnWidthMode.fill | Divides the total width equally for columns. |
|
||||
| ColumnWidthMode.none | No sizing. Default column width or defined width set to column. |
|
||||
|
||||
> **NOTE**
|
||||
[ColumnWidthMode](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/ColumnWidthMode-class.html) will not work when the column width defined explicitly. `columnWidthMode` calculates column width based on miniumWidth and maximumWidth properties.
|
||||
|
||||
The following example shows how to set the width equally for column based on the view port size.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columnWidthMode: ColumnWidthMode.fill,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'city',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'city',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
> **NOTE**
|
||||
The `GridColumn.columnWidthMode` takes higher priority than the `SfDataGrid.columnWidthMode`.
|
||||
|
||||
|
||||
|
||||
## Fill remaining width for any column
|
||||
|
||||
While setting `SfDataGrid.columnWidthMode` as `lastColumnFill` remaining width is applied to last column. The remaining width to specific column can be applied by setting `GridColumn.columnWidthMode` property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columnWidthMode: ColumnWidthMode.lastColumnFill,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
The below example shows Name column is set as `lastColumnFill` mode.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
columnWidthMode: ColumnWidthMode.lastColumnFill,
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Recalculating column widths when datasource is changed
|
||||
|
||||
By default, column widths are calculated based on the `columnWidthMode` property on initial loading of datagrid. When the datasource is changed for same datagrid at run time, datagrid does not recalculate the column widths. To recalculate the column widths at run time when datasource is changed or data is updated, you can override the [shouldRecalculateColumnWidths](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/shouldRecalculateColumnWidths.html) method and return `true`.
|
||||
|
||||
Returning true may impact performance as the column widths are recalculated again (whenever the notifyListeners is called). If you are aware that column widths are going to be same whenever underlying data changes, return `false` from this method.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
EmployeeDataSource(List<Employee> employees) {
|
||||
dataGridRows = employees
|
||||
.map<DataGridRow>((dataGridRow) => DataGridRow(cells: [
|
||||
DataGridCell<int>(columnName: 'id', value: dataGridRow.id),
|
||||
DataGridCell<String>(columnName: 'name', value: dataGridRow.name),
|
||||
DataGridCell<int>(
|
||||
columnName: 'salary', value: dataGridRow.salary),
|
||||
DataGridCell<String>(
|
||||
columnName: 'designation', value: dataGridRow.designation),
|
||||
]))
|
||||
.toList();
|
||||
}
|
||||
|
||||
List<DataGridRow> dataGridRows = [];
|
||||
|
||||
@override
|
||||
List<DataGridRow> get rows => dataGridRows;
|
||||
|
||||
@override
|
||||
DataGridRowAdapter? buildRow(DataGridRow row) {
|
||||
return DataGridRowAdapter(
|
||||
cells: row.getCells().map<Widget>((dataGridCell) {
|
||||
return Container(
|
||||
alignment: (dataGridCell.columnName == 'id' ||
|
||||
dataGridCell.columnName == 'salary')
|
||||
? Alignment.centerRight
|
||||
: Alignment.centerLeft,
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Text(
|
||||
dataGridCell.value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
));
|
||||
}).toList());
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRecalculateColumnWidths() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -0,0 +1,347 @@
|
|||
---
|
||||
layout: post
|
||||
title: Conditional Styling in Flutter DataGrid | DataTable | Syncfusion
|
||||
description: Learn here all about how to style the rows and columns in Syncfusion Flutter DataGrid (SfDataGrid) widget and more.
|
||||
platform: flutter
|
||||
control: SfDataGrid
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Conditional Styling in Flutter DataGrid (SfDataGrid)
|
||||
|
||||
The [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) allows to customize the style of the individual cells and rows based on the requirements. You can customize your widget in the `DataGridSource.buildRow` method with the help of `DataGridRowAdapter`.
|
||||
|
||||
## Cells
|
||||
|
||||
### Styling based on content
|
||||
|
||||
The appearance of the cells in `SfDataGrid` can be customized conditionally based on the content and set your widget to the `DataGridRowAdapter.cells`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columnWidthMode: ColumnWidthMode.lastColumnFill,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
EmployeeDataSource(List<Employee> employees) {
|
||||
dataGridRows = employees
|
||||
.map<DataGridRow>((dataGridRow) => DataGridRow(cells: [
|
||||
DataGridCell<int>(columnName: 'id', value: dataGridRow.id),
|
||||
DataGridCell<String>(columnName: 'name', value: dataGridRow.name),
|
||||
DataGridCell<String>(
|
||||
columnName: 'designation', value: dataGridRow.designation),
|
||||
DataGridCell<int>(
|
||||
columnName: 'salary', value: dataGridRow.salary),
|
||||
]))
|
||||
.toList();
|
||||
}
|
||||
|
||||
List<DataGridRow> dataGridRows = [];
|
||||
|
||||
@override
|
||||
List<DataGridRow> get rows => dataGridRows;
|
||||
|
||||
@override
|
||||
DataGridRowAdapter? buildRow(DataGridRow row) {
|
||||
return DataGridRowAdapter(
|
||||
cells: row.getCells().map<Widget>((dataGridCell) {
|
||||
Color getColor() {
|
||||
if (dataGridCell.columnName == 'designation') {
|
||||
if (dataGridCell.value == 'Developer') {
|
||||
return Colors.tealAccent;
|
||||
} else if (dataGridCell.value == 'Manager') {
|
||||
return Colors.blue[200]!;
|
||||
}
|
||||
}
|
||||
|
||||
return Colors.transparent;
|
||||
}
|
||||
|
||||
TextStyle? getTextStyle() {
|
||||
if (dataGridCell.columnName == 'designation') {
|
||||
if (dataGridCell.value == 'Developer') {
|
||||
return TextStyle(fontStyle: FontStyle.italic);
|
||||
} else if (dataGridCell.value == 'Manager') {
|
||||
return TextStyle(fontStyle: FontStyle.italic);
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
return Container(
|
||||
color: getColor(),
|
||||
alignment: (dataGridCell.columnName == 'id' ||
|
||||
dataGridCell.columnName == 'salary')
|
||||
? Alignment.centerRight
|
||||
: Alignment.centerLeft,
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Text(
|
||||
dataGridCell.value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: getTextStyle(),
|
||||
));
|
||||
}).toList());
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
### Styling alternate cells
|
||||
|
||||
The appearance of the alternating cells in a column can be customized conditionally by using the `DataGridSource.buildRow` method.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
EmployeeDataSource(List<Employee> employees) {
|
||||
dataGridRows = employees
|
||||
.map<DataGridRow>((dataGridRow) => DataGridRow(cells: [
|
||||
DataGridCell<int>(columnName: 'id', value: dataGridRow.id),
|
||||
DataGridCell<String>(columnName: 'name', value: dataGridRow.name),
|
||||
DataGridCell<String>(
|
||||
columnName: 'designation', value: dataGridRow.designation),
|
||||
DataGridCell<int>(
|
||||
columnName: 'salary', value: dataGridRow.salary),
|
||||
]))
|
||||
.toList();
|
||||
}
|
||||
|
||||
List<DataGridRow> dataGridRows = [];
|
||||
|
||||
@override
|
||||
List<DataGridRow> get rows => dataGridRows;
|
||||
|
||||
@override
|
||||
DataGridRowAdapter? buildRow(DataGridRow row) {
|
||||
return DataGridRowAdapter(
|
||||
cells: row.getCells().map<Widget>((dataGridCell) {
|
||||
if (dataGridCell.columnName == 'id') {
|
||||
final int index = dataGridRows.indexOf(row);
|
||||
return Container(
|
||||
color: (index % 2 != 0) ? Colors.blueAccent : Colors.transparent,
|
||||
alignment: Alignment.centerRight,
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Text(
|
||||
dataGridCell.value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: (index % 2 != 0)
|
||||
? TextStyle(fontStyle: FontStyle.italic)
|
||||
: null,
|
||||
));
|
||||
}
|
||||
return Container(
|
||||
alignment: (dataGridCell.columnName == 'salary')
|
||||
? Alignment.centerRight
|
||||
: Alignment.centerLeft,
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Text(
|
||||
dataGridCell.value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
));
|
||||
}).toList());
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Rows
|
||||
|
||||
### Styling based on content
|
||||
|
||||
The appearance of the rows in `SfDataGrid` can be customized conditionally based on the content in `DataGridRowAdapter.color`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
EmployeeDataSource(List<Employee> employees) {
|
||||
dataGridRows = employees
|
||||
.map<DataGridRow>((dataGridRow) => DataGridRow(cells: [
|
||||
DataGridCell<int>(columnName: 'id', value: dataGridRow.id),
|
||||
DataGridCell<String>(columnName: 'name', value: dataGridRow.name),
|
||||
DataGridCell<String>(
|
||||
columnName: 'designation', value: dataGridRow.designation),
|
||||
DataGridCell<int>(
|
||||
columnName: 'salary', value: dataGridRow.salary),
|
||||
]))
|
||||
.toList();
|
||||
}
|
||||
|
||||
List<DataGridRow> dataGridRows = [];
|
||||
|
||||
@override
|
||||
List<DataGridRow> get rows => dataGridRows;
|
||||
|
||||
@override
|
||||
DataGridRowAdapter buildRow(DataGridRow row) {
|
||||
Color getRowBackgroundColor() {
|
||||
final int salary = row.getCells()[3].value;
|
||||
if (salary >= 10000 && salary < 15000) {
|
||||
return Colors.blue[300]!;
|
||||
} else if (salary <= 15000) {
|
||||
return Colors.orange[300]!;
|
||||
}
|
||||
|
||||
return Colors.transparent;
|
||||
}
|
||||
|
||||
TextStyle? getTextStyle() {
|
||||
final int salary = row.getCells()[3].value;
|
||||
if (salary >= 10000 && salary < 15000) {
|
||||
return TextStyle(color: Colors.white);
|
||||
} else if (salary <= 15000) {
|
||||
return TextStyle(color: Colors.white);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
return DataGridRowAdapter(
|
||||
color: getRowBackgroundColor(),
|
||||
cells: row.getCells().map<Widget>((dataGridCell) {
|
||||
return Container(
|
||||
alignment: (dataGridCell.columnName == 'id' ||
|
||||
dataGridCell.columnName == 'salary')
|
||||
? Alignment.centerRight
|
||||
: Alignment.centerLeft,
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Text(
|
||||
dataGridCell.value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: getTextStyle(),
|
||||
));
|
||||
}).toList());
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
### Styling alternate rows
|
||||
|
||||
The appearance of the alternating rows in `SfDataGrid` can be customized by using the `DataGridRowAdapter.color`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
EmployeeDataSource(List<Employee> employees) {
|
||||
dataGridRows = employees
|
||||
.map<DataGridRow>((dataGridRow) => DataGridRow(cells: [
|
||||
DataGridCell<int>(columnName: 'id', value: dataGridRow.id),
|
||||
DataGridCell<String>(columnName: 'name', value: dataGridRow.name),
|
||||
DataGridCell<String>(
|
||||
columnName: 'designation', value: dataGridRow.designation),
|
||||
DataGridCell<int>(
|
||||
columnName: 'salary', value: dataGridRow.salary),
|
||||
]))
|
||||
.toList();
|
||||
}
|
||||
|
||||
List<DataGridRow> dataGridRows = [];
|
||||
|
||||
@override
|
||||
List<DataGridRow> get rows => dataGridRows;
|
||||
|
||||
@override
|
||||
DataGridRowAdapter? buildRow(DataGridRow row) {
|
||||
Color getRowBackgroundColor() {
|
||||
final int index = dataGridRows.indexOf(row);
|
||||
if (index % 2 != 0) {
|
||||
return Colors.lightGreen[300]!;
|
||||
}
|
||||
|
||||
return Colors.transparent;
|
||||
}
|
||||
|
||||
return DataGridRowAdapter(
|
||||
color: getRowBackgroundColor(),
|
||||
cells: row.getCells().map<Widget>((dataGridCell) {
|
||||
return Container(
|
||||
alignment: (dataGridCell.columnName == 'id' ||
|
||||
dataGridCell.columnName == 'salary')
|
||||
? Alignment.centerRight
|
||||
: Alignment.centerLeft,
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Text(
|
||||
dataGridCell.value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
));
|
||||
}).toList());
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,411 @@
|
|||
---
|
||||
layout: post
|
||||
title: Data Binding in Flutter DataGrid | DataTable | Syncfusion
|
||||
description: Learn here all about how to set datasource for Syncfusion Flutter DataGrid (SfDataGrid) widget and more.
|
||||
platform: flutter
|
||||
control: SfDataGrid
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Data Binding in Flutter DataGrid (SfDataGrid)
|
||||
|
||||
[SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) requires the [DataGridSource](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource-class.html) to obtain the row data. In order to bind data source of the SfDataGrid, set an instance of the `DataGridSource` to the [source](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/source.html) property.`source` property must not be null.
|
||||
|
||||
The following APIs in the `DataGridSource` are mandatory to process the data,
|
||||
|
||||
* [rows](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/rows.html) - The number of rows in a datagrid and row selection depends on the `rows`. So, set the `DataGridRow` collection required for datagrid in
|
||||
`rows`.
|
||||
* [buildRow](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/buildRow.html) - The widget needed for the cells is obtained from `DataGridRowAdapter`.
|
||||
|
||||
`DataGridSource` objects are expected to be long-lived, not recreated with each build.
|
||||
|
||||
The following example shows how to create the `DataGridSource`,
|
||||
|
||||
{% tabs %}
|
||||
{% highlight dart %}
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
EmployeeDataSource(List<Employee> employees) {
|
||||
dataGridRows = employees
|
||||
.map<DataGridRow>((dataGridRow) => DataGridRow(cells: [
|
||||
DataGridCell<int>(columnName: 'id', value: dataGridRow.id),
|
||||
DataGridCell<String>(columnName: 'name', value: dataGridRow.name),
|
||||
DataGridCell<String>(
|
||||
columnName: 'designation', value: dataGridRow.designation),
|
||||
DataGridCell<int>(
|
||||
columnName: 'salary', value: dataGridRow.salary),
|
||||
]))
|
||||
.toList();
|
||||
}
|
||||
|
||||
List<DataGridRow> dataGridRows = [];
|
||||
|
||||
@override
|
||||
List<DataGridRow> get rows => dataGridRows;
|
||||
|
||||
@override
|
||||
DataGridRowAdapter? buildRow(DataGridRow row) {
|
||||
return DataGridRowAdapter(
|
||||
cells: row.getCells().map<Widget>((dataGridCell) {
|
||||
return Container(
|
||||
alignment: (dataGridCell.columnName == 'id' ||
|
||||
dataGridCell.columnName == 'salary')
|
||||
? Alignment.centerRight
|
||||
: Alignment.centerLeft,
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Text(
|
||||
dataGridCell.value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
));
|
||||
}).toList());
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
The following example shows how to set the `source` property in `SfDataGrid`
|
||||
|
||||
{% tabs %}
|
||||
{% highlight dart %}
|
||||
|
||||
late EmployeeDataSource _employeeDataSource;
|
||||
|
||||
List<Employee> _employees = <Employee>[];
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_employees = getEmployeeData();
|
||||
employeeDataSource = EmployeeDataSource(employees: _employees);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columnWidthMode: ColumnWidthMode.lastColumnFill,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Data manipulation in Flutter DataGrid (SfDataGrid)
|
||||
|
||||
`SfDataGrid` provides support to update or refresh the DataGrid when an underlying data is updated i.e. CRUD operation is performed in an underlying data.
|
||||
|
||||
If row is added, removed or replaced in an underlying datasource, you can call the [notifyListeners](https://api.flutter.dev/flutter/foundation/ChangeNotifier/notifyListeners.html).
|
||||
|
||||
In the following example, row is added and `notifyListeners` is called in `onPressed` callback of the `TextButton`.
|
||||
|
||||
N> `notifyListeners` should be called from inside the `DataGridSource`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
final List<Employee> _employees = <Employee>[];
|
||||
|
||||
final EmployeeDataSource _employeeDataSource = EmployeeDataSource();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
children: [
|
||||
FlatButton(
|
||||
child: const Text('Add row'),
|
||||
onPressed: () {
|
||||
_employees
|
||||
.add(Employee(10011, 'Steve', 'Designer', 15000));
|
||||
_employeeDataSource.buildDataGridRows();
|
||||
_employeeDataSource.updateDataGridSource();
|
||||
}),
|
||||
SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
EmployeeDataSource() {
|
||||
buildDataGridRows();
|
||||
}
|
||||
|
||||
void buildDataGridRows() {
|
||||
dataGridRows = _employees
|
||||
.map<DataGridRow>((dataGridRow) => DataGridRow(cells: [
|
||||
DataGridCell<int>(columnName: 'id', value: dataGridRow.id),
|
||||
DataGridCell<String>(columnName: 'name', value: dataGridRow.name),
|
||||
DataGridCell<String>(
|
||||
columnName: 'designation', value: dataGridRow.designation),
|
||||
DataGridCell<int>(
|
||||
columnName: 'salary', value: dataGridRow.salary),
|
||||
]))
|
||||
.toList();
|
||||
}
|
||||
|
||||
List<DataGridRow> dataGridRows = [];
|
||||
|
||||
@override
|
||||
List<DataGridRow> get rows => dataGridRows;
|
||||
|
||||
@override
|
||||
DataGridRowAdapter? buildRow(DataGridRow row) {
|
||||
return DataGridRowAdapter(
|
||||
cells: row.getCells().map<Widget>((dataGridCell) {
|
||||
return Container(
|
||||
alignment: (dataGridCell.columnName == 'id' ||
|
||||
dataGridCell.columnName == 'salary')
|
||||
? Alignment.centerRight
|
||||
: Alignment.centerLeft,
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Text(
|
||||
dataGridCell.value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
));
|
||||
}).toList());
|
||||
}
|
||||
|
||||
void updateDataGridSource() {
|
||||
notifyListeners();
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
If the value of the specific cell is updated, you can `notifyDataSourceListeners` method with [RowColumnIndex](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/RowColumnIndex-class.html) argument where it refers the corresponding row and column index of the cell.
|
||||
So, DataGrid refreshes the corresponding cell alone.
|
||||
|
||||
In the following example, cell value is updated and `notifyDataSourceListeners` is called in `onPressed` callback of the `TextButton`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
final List<Employee> _employees = <Employee>[];
|
||||
|
||||
final EmployeeDataSource _employeeDataSource = EmployeeDataSource();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Syncfusion Flutter DataGrid'),
|
||||
),
|
||||
body: Column(
|
||||
children: [
|
||||
FlatButton(
|
||||
child: const Text('Update cell value'),
|
||||
onPressed: () {
|
||||
_employees[0].salary = 25000;
|
||||
_employeeDataSource.dataGridRows[0] = DataGridRow(cells: [
|
||||
DataGridCell(value: employees[0].id, columnName: 'id'),
|
||||
DataGridCell(value: employees[0].name, columnName: 'name'),
|
||||
DataGridCell(
|
||||
value: employees[0].designation,
|
||||
columnName: 'designation'),
|
||||
DataGridCell(
|
||||
value: employees[0].salary, columnName: 'salary'),
|
||||
]);
|
||||
|
||||
_employeeDataSource.updateDataGridSource(
|
||||
rowColumnIndex: RowColumnIndex(0, 3));
|
||||
}),
|
||||
SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
EmployeeDataSource() {
|
||||
buildDataGridRows();
|
||||
}
|
||||
|
||||
void buildDataGridRows() {
|
||||
dataGridRows = _employees
|
||||
.map<DataGridRow>((dataGridRow) => DataGridRow(cells: [
|
||||
DataGridCell<int>(columnName: 'id', value: dataGridRow.id),
|
||||
DataGridCell<String>(columnName: 'name', value: dataGridRow.name),
|
||||
DataGridCell<String>(
|
||||
columnName: 'designation', value: dataGridRow.designation),
|
||||
DataGridCell<int>(
|
||||
columnName: 'salary', value: dataGridRow.salary),
|
||||
]))
|
||||
.toList();
|
||||
}
|
||||
|
||||
List<DataGridRow> dataGridRows = [];
|
||||
|
||||
@override
|
||||
List<DataGridRow> get rows => dataGridRows;
|
||||
|
||||
@override
|
||||
DataGridRowAdapter? buildRow(DataGridRow row) {
|
||||
return DataGridRowAdapter(
|
||||
cells: row.getCells().map<Widget>((dataGridCell) {
|
||||
return Container(
|
||||
alignment: (dataGridCell.columnName == 'id' ||
|
||||
dataGridCell.columnName == 'salary')
|
||||
? Alignment.centerRight
|
||||
: Alignment.centerLeft,
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Text(
|
||||
dataGridCell.value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
));
|
||||
}).toList());
|
||||
}
|
||||
|
||||
void updateDataGridSource({RowColumnIndex rowColumnIndex}) {
|
||||
notifyDataSourceListeners(rowColumnIndex: rowColumnIndex);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 487 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 486 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 18 KiB |
|
|
@ -0,0 +1,437 @@
|
|||
---
|
||||
layout: post
|
||||
title: Load More in Flutter DataGrid | DataTable | Syncfusion
|
||||
description: Learn here all about how to perform lazy loading of rows in Syncfusion Flutter DataGrid (SfDataGrid) widget and more.
|
||||
platform: flutter
|
||||
control: SfDataGrid
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Load more in Flutter Datagrid (SfDataGrid)
|
||||
|
||||
The datagrid provides support to display an interactive view when the grid reaches its maximum offset while scrolling down. You can use [loadMoreViewBuilder](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/loadMoreViewBuilder.html) builder to display the view at bottom of datagrid.
|
||||
|
||||
You should override the [DataGridSource.handleLoadMoreRows](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/handleLoadMoreRows.html) method to load more rows and then notify the datagrid about the changes. The `DataGridSource.handleLoadMoreRows` can be called to load more rows from this builder by using the [loadMoreRows](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/LoadMoreRows.html) function which is passed as a parameter to `loadMoreViewBuilder`.
|
||||
|
||||
## Infinite scrolling
|
||||
|
||||
Infinite Scrolling is an approach that can be used to load more rows to the datagrid whenever the datagrid reaches the bottom.
|
||||
|
||||
The following example demonstrates infinite scrolling by showing the circular progress indicator until the rows are loaded when the datagrid reaches the bottom,
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SfDataGrid(
|
||||
source: employeeDataSource,
|
||||
loadMoreViewBuilder: (BuildContext context, LoadMoreRows loadMoreRows) {
|
||||
Future<String> loadRows() async {
|
||||
// Call the loadMoreRows function to call the
|
||||
// DataGridSource.handleLoadMoreRows method. So, additional
|
||||
// rows can be added from handleLoadMoreRows method.
|
||||
await loadMoreRows();
|
||||
return Future<String>.value('Completed');
|
||||
}
|
||||
|
||||
return FutureBuilder<String>(
|
||||
initialData: 'loading',
|
||||
future: loadRows(),
|
||||
builder: (context, snapShot) {
|
||||
if (snapShot.data == 'loading') {
|
||||
return Container(
|
||||
height: 60.0,
|
||||
width: double.infinity,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
border: BorderDirectional(
|
||||
top: BorderSide(
|
||||
width: 1.0,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.26)))),
|
||||
alignment: Alignment.center,
|
||||
child: CircularProgressIndicator(
|
||||
valueColor: AlwaysStoppedAnimation(Colors.deepPurple)));
|
||||
} else {
|
||||
return SizedBox.fromSize(size: Size.zero);
|
||||
}
|
||||
},
|
||||
);
|
||||
},
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
EmployeeDataSource() {
|
||||
buildDataGridRows();
|
||||
}
|
||||
|
||||
List<DataGridRow> dataGridRows = [];
|
||||
|
||||
@override
|
||||
List<DataGridRow> get rows => dataGridRows;
|
||||
|
||||
@override
|
||||
DataGridRowAdapter? buildRow(DataGridRow row) {
|
||||
return DataGridRowAdapter(
|
||||
cells: row.getCells().map<Widget>((dataGridCell) {
|
||||
return Container(
|
||||
alignment: (dataGridCell.columnName == 'id' ||
|
||||
dataGridCell.columnName == 'salary')
|
||||
? Alignment.centerRight
|
||||
: Alignment.centerLeft,
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Text(
|
||||
dataGridCell.value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
));
|
||||
}).toList());
|
||||
}
|
||||
|
||||
@override
|
||||
Future<void> handleLoadMoreRows() async {
|
||||
await Future.delayed(Duration(seconds: 5));
|
||||
_addMoreRows(_employees, 15);
|
||||
buildDataGridRows();
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
void buildDataGridRows() {
|
||||
dataGridRows = _employees
|
||||
.map<DataGridRow>((dataGridRow) => DataGridRow(cells: [
|
||||
DataGridCell<int>(columnName: 'id', value: dataGridRow.id),
|
||||
DataGridCell<String>(columnName: 'name', value: dataGridRow.name),
|
||||
DataGridCell<String>(
|
||||
columnName: 'designation', value: dataGridRow.designation),
|
||||
DataGridCell<int>(
|
||||
columnName: 'salary', value: dataGridRow.salary),
|
||||
]))
|
||||
.toList();
|
||||
}
|
||||
|
||||
void _addMoreRows(List<Employee> employees, int count) {
|
||||
final Random _random = Random();
|
||||
final startIndex = employees.isNotEmpty ? employees.length : 0,
|
||||
endIndex = startIndex + count;
|
||||
for (int i = startIndex; i < endIndex; i++) {
|
||||
employees.add(Employee(
|
||||
1000 + i,
|
||||
_names[_random.nextInt(_names.length - 1)],
|
||||
_designation[_random.nextInt(_designation.length - 1)],
|
||||
10000 + _random.nextInt(10000),
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
final List<String> _names = <String>[
|
||||
'Welli',
|
||||
'Blonp',
|
||||
'Folko',
|
||||
'Furip',
|
||||
'Folig',
|
||||
'Picco',
|
||||
'Frans',
|
||||
'Warth',
|
||||
'Linod',
|
||||
'Simop',
|
||||
'Merep',
|
||||
'Riscu',
|
||||
'Seves',
|
||||
'Vaffe',
|
||||
'Alfki'
|
||||
];
|
||||
|
||||
final List<String> _designation = <String>[
|
||||
'Project Lead',
|
||||
'Developer',
|
||||
'Manager',
|
||||
'Designer',
|
||||
'System Analyst',
|
||||
'CEO'
|
||||
];
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
**NOTE**
|
||||
Download demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-do-the-infinite-scrolling-in-syncfusion-flutter-datatable).
|
||||
|
||||
|
||||
|
||||
## Load more button
|
||||
|
||||
Showing load more button is an approach that can be used to load more rows to the datagrid by tapping a button that you load from the `SfDataGrid.loadMoreViewBuilder` builder. The button will be loaded when vertical scrolling is reached at the end of the datagrid.
|
||||
|
||||
The following example demonstrates how to show the button when vertical scrolling is reached at the end of the datagrid and display the circular indicator until the rows are loaded when you tap that button. In the onPressed flat button callback, you can call the `loadMoreRows` function to add more rows,
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SfDataGrid(
|
||||
source: employeeDataSource,
|
||||
loadMoreViewBuilder: (BuildContext context, LoadMoreRows loadMoreRows) {
|
||||
bool showIndicator = false;
|
||||
return StatefulBuilder(
|
||||
builder: (BuildContext context, StateSetter setState) {
|
||||
if (showIndicator) {
|
||||
return Container(
|
||||
height: 60.0,
|
||||
width: double.infinity,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
border: BorderDirectional(
|
||||
top: BorderSide(
|
||||
width: 1.0, color: Color.fromRGBO(0, 0, 0, 0.26)))),
|
||||
child: CircularProgressIndicator(
|
||||
valueColor: AlwaysStoppedAnimation(Colors.deepPurple)));
|
||||
} else {
|
||||
return Container(
|
||||
height: 60.0,
|
||||
width: double.infinity,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
border: BorderDirectional(
|
||||
top: BorderSide(
|
||||
width: 1.0, color: Color.fromRGBO(0, 0, 0, 0.26)))),
|
||||
child: Container(
|
||||
height: 36.0,
|
||||
width: 142.0,
|
||||
child: FlatButton(
|
||||
color: Colors.deepPurple,
|
||||
child:
|
||||
Text('LOAD MORE', style: TextStyle(color: Colors.white)),
|
||||
onPressed: () async {
|
||||
// To avoid the "Error: setState() called after dispose():"
|
||||
// while scrolling the datagrid vertically and displaying the
|
||||
// load more view, current load more view is checked whether
|
||||
// loaded widget is mounted or not.
|
||||
if (context is StatefulElement &&
|
||||
context.state != null &&
|
||||
context.state.mounted) {
|
||||
setState(() {
|
||||
showIndicator = true;
|
||||
});
|
||||
}
|
||||
// Call the loadMoreRows function to call the
|
||||
// DataGridSource.handleLoadMoreRows method. So, additional
|
||||
// rows can be added from handleLoadMoreRows method.
|
||||
await loadMoreRows();
|
||||
// To avoid the "Error: setState() called after dispose():"
|
||||
// while scrolling the datagrid vertically and displaying the
|
||||
// load more view, current load more view is checked whether
|
||||
// loaded widget is mounted or not.
|
||||
if (context is StatefulElement &&
|
||||
context.state != null &&
|
||||
context.state.mounted) {
|
||||
setState(() {
|
||||
showIndicator = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
EmployeeDataSource() {
|
||||
buildDataGridRows();
|
||||
}
|
||||
|
||||
List<DataGridRow> dataGridRows = [];
|
||||
|
||||
@override
|
||||
List<DataGridRow> get rows => dataGridRows;
|
||||
|
||||
@override
|
||||
DataGridRowAdapter? buildRow(DataGridRow row) {
|
||||
return DataGridRowAdapter(
|
||||
cells: row.getCells().map<Widget>((dataGridCell) {
|
||||
return Container(
|
||||
alignment: (dataGridCell.columnName == 'id' ||
|
||||
dataGridCell.columnName == 'salary')
|
||||
? Alignment.centerRight
|
||||
: Alignment.centerLeft,
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Text(
|
||||
dataGridCell.value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
));
|
||||
}).toList());
|
||||
}
|
||||
|
||||
@override
|
||||
Future<void> handleLoadMoreRows() async {
|
||||
await Future.delayed(Duration(seconds: 5));
|
||||
_addMoreRows(_employees, 15);
|
||||
buildDataGridRows();
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
void buildDataGridRows() {
|
||||
dataGridRows = employees
|
||||
.map<DataGridRow>((dataGridRow) => DataGridRow(cells: [
|
||||
DataGridCell<int>(columnName: 'id', value: dataGridRow.id),
|
||||
DataGridCell<String>(columnName: 'name', value: dataGridRow.name),
|
||||
DataGridCell<String>(
|
||||
columnName: 'designation', value: dataGridRow.designation),
|
||||
DataGridCell<int>(
|
||||
columnName: 'salary', value: dataGridRow.salary),
|
||||
]))
|
||||
.toList();
|
||||
}
|
||||
|
||||
void _addMoreRows(List<Employee> employees, int count) {
|
||||
final Random _random = Random();
|
||||
final startIndex = employees.isNotEmpty ? employees.length : 0,
|
||||
endIndex = startIndex + count;
|
||||
for (int i = startIndex; i < endIndex; i++) {
|
||||
employees.add(Employee(
|
||||
1000 + i,
|
||||
_names[_random.nextInt(_names.length - 1)],
|
||||
_designation[_random.nextInt(_designation.length - 1)],
|
||||
10000 + _random.nextInt(10000),
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
final List<String> _names = <String>[
|
||||
'Welli',
|
||||
'Blonp',
|
||||
'Folko',
|
||||
'Furip',
|
||||
'Folig',
|
||||
'Picco',
|
||||
'Frans',
|
||||
'Warth',
|
||||
'Linod',
|
||||
'Simop',
|
||||
'Merep',
|
||||
'Riscu',
|
||||
'Seves',
|
||||
'Vaffe',
|
||||
'Alfki'
|
||||
];
|
||||
|
||||
final List<String> _designation = <String>[
|
||||
'Project Lead',
|
||||
'Developer',
|
||||
'Manager',
|
||||
'Designer',
|
||||
'System Analyst',
|
||||
'CEO'
|
||||
];
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
**NOTE**
|
||||
Download demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-load-rows-on-demand-in-Syncfusion-Flutter-datatable).
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,254 @@
|
|||
---
|
||||
layout: post
|
||||
title: Localization in Flutter DataGrid | DataTable | Syncfusion
|
||||
description: Learn here all about localization of static strings in Syncfusion Flutter DataGrid (SfDataGrid) widget and more.
|
||||
platform: flutter
|
||||
control: SfDataGrid
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Localization in Flutter DataPager (SfDataPager)
|
||||
|
||||
By default, the [SfDataPager](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager-class.html) 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.
|
||||
|
||||
As of February 2020, [flutter package](https://flutter.dev/docs/development/accessibility-and-localization/internationalization) supports 77 languages.
|
||||
|
||||
To use `flutter_localizations`, add the package as dependency to `pubspec.yaml` file.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
dependencies:
|
||||
flutter_localizations:
|
||||
sdk: flutter
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
Next, import the `flutter_localizations` library and specify [localizationsDelegates](https://api.flutter.dev/flutter/widgets/LocalizationsDelegate-class.html) and `supportedLocales` for `MaterialApp`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
import 'package:flutter_localizations/flutter_localizations.dart';
|
||||
|
||||
final int rowsPerPage = 15;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
localizationsDelegates: [
|
||||
GlobalMaterialLocalizations.delegate,
|
||||
GlobalWidgetsLocalizations.delegate,
|
||||
],
|
||||
supportedLocales: [
|
||||
const Locale('zh'),
|
||||
const Locale('ar'),
|
||||
const Locale('ja'),
|
||||
],
|
||||
locale: const Locale('zh'),
|
||||
home: Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('DataPager'),
|
||||
),
|
||||
body: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
return Column(
|
||||
children: [
|
||||
SizedBox(
|
||||
height: constraints.maxHeight - 60,
|
||||
width: constraints.maxWidth,
|
||||
child: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Container(
|
||||
height: 60,
|
||||
width: constraints.maxWidth,
|
||||
child: SfDataPager(
|
||||
delegate: _employeeDataSource,
|
||||
pageCount: employees.length / rowsPerPage,
|
||||
visibleItemsCount: 5,
|
||||
direction: Axis.horizontal,
|
||||
),
|
||||
)
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Localize the static string in DataPager
|
||||
|
||||
Static strings in the data pager can be localized using the [syncfusion_localizations](https://pub.dev/packages/syncfusion_localizations) package and specifying `localizationsDelegates` in `MaterialApp`.
|
||||
|
||||
To use `syncfusion_localizations`, add the package as dependency to `pubspec.yaml` file.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
dependencies:
|
||||
syncfusion_localizations: ^18.3.35
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
Next, import the `syncfusion_localizations` library.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
import 'package:syncfusion_localizations/syncfusion_localizations.dart';
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
Then, declare the [SfGlobalLocalizations.delegate](https://pub.dev/documentation/syncfusion_localizations/latest/syncfusion_localizations/SfGlobalLocalizations/delegate-constant.html) in the `localizationsDelegates`, which is used to localize the static string available in data pager and specify the `supportedLocales` as well.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
final int rowsPerPage = 15;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
localizationsDelegates: [
|
||||
GlobalMaterialLocalizations.delegate,
|
||||
GlobalWidgetsLocalizations.delegate,
|
||||
SfGlobalLocalizations.delegate
|
||||
],
|
||||
supportedLocales: [
|
||||
const Locale('zh'),
|
||||
const Locale('ar'),
|
||||
const Locale('ja'),
|
||||
],
|
||||
locale: const Locale('zh'),
|
||||
home: Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('DataPager'),
|
||||
),
|
||||
body: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
return Column(
|
||||
children: [
|
||||
SizedBox(
|
||||
height: constraints.maxHeight - 60,
|
||||
width: constraints.maxWidth,
|
||||
child: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Container(
|
||||
height: 60,
|
||||
width: constraints.maxWidth,
|
||||
child: SfDataPager(
|
||||
delegate: _employeeDataSource,
|
||||
pageCount: employees.length / rowsPerPage,
|
||||
visibleItemsCount: 5,
|
||||
direction: Axis.horizontal,
|
||||
),
|
||||
)
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,726 @@
|
|||
---
|
||||
layout: post
|
||||
title: Paging in Flutter DataGrid | DataPager | Syncfusion
|
||||
description: Learn here all about paging feature and how to customize its apperance in Syncfusion Flutter DataGrid (SfDataGrid) widget and more.
|
||||
platform: flutter
|
||||
control: SfDataGrid
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Paging in Flutter DataGrid (SfDataGrid)
|
||||
|
||||
The datagrid interactively supports the manipulation of data using [SfDataPager](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager-class.html) control. This provides support to load data in segments when dealing with large volumes of data. `SfDataPager` can be placed above or below based on the requirement to easily manage data paging.
|
||||
|
||||
The datagrid performs paging of data using the `SfDataPager`. To enable paging, follow below procedure
|
||||
|
||||
* Create a new `SfDataPager` widget, and set the [SfDataGrid.DataGridSource](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource-class.html) to the [SfDataPager.delegate](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/delegate.html) property.
|
||||
* Set the number of pages required to be displayed in data pager by setting the `SfDataPager.pageCount` property.
|
||||
* Set the number of buttons that should be displayed in view by setting the [SfDataPager.visibleItemsCount](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/visibleItemsCount.html) property.
|
||||
* You can load the data for the specific page in `handlePageChanges` method. This method is called for every page navigation from data pager.
|
||||
|
||||
N> The `SfDataPager.visibleItemsCount` property default value is 5.
|
||||
|
||||
The following code example illustrates using `SfDataPager` with the datagrid control:
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
final int rowsPerPage = 15;
|
||||
|
||||
final double dataPagerHeight = 60.0;
|
||||
|
||||
List<OrderInfo> orders = [];
|
||||
|
||||
List<OrderInfo> paginatedOrders = [];
|
||||
|
||||
final OrderInfoDataSource _orderInfoDataSource = OrderInfoDataSource();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return LayoutBuilder(builder: (context, constraint) {
|
||||
return Column(
|
||||
children: [
|
||||
SizedBox(
|
||||
height: constraint.maxHeight - dataPagerHeight,
|
||||
width: constraint.maxWidth,
|
||||
child: SfDataGrid(
|
||||
source: _orderInfoDataSource,
|
||||
columnWidthMode: ColumnWidthMode.fill,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'orderID',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Order ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'customerID',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Customer Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
)),
|
||||
GridTextColumn(
|
||||
columnName: 'orderDate',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Order Date',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'freight',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
'Freight',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Container(
|
||||
height: dataPagerHeight,
|
||||
child: SfDataPager(
|
||||
delegate: _orderInfoDataSource,
|
||||
pageCount: orders.length / rowsPerPage,
|
||||
direction: Axis.horizontal,
|
||||
),
|
||||
)
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
class OrderInfoDataSource extends DataGridSource{
|
||||
OrderInfoDataSource() {
|
||||
paginatedOrders = orders.getRange(0, 19).toList(growable: false);
|
||||
buildPaginateDataGridRows();
|
||||
}
|
||||
|
||||
List<DataGridRow> dataGridRows = [];
|
||||
|
||||
@override
|
||||
List<DataGridRow> get rows => dataGridRows;
|
||||
|
||||
@override
|
||||
DataGridRowAdapter? buildRow(DataGridRow row) {
|
||||
return DataGridRowAdapter(
|
||||
cells: row.getCells().map<Widget>((dataGridCell) {
|
||||
if (dataGridCell.columnName == 'orderID') {
|
||||
return Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
dataGridCell.value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
);
|
||||
} else if (dataGridCell.columnName == 'customerID') {
|
||||
return Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
dataGridCell.value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
));
|
||||
} else if (dataGridCell.columnName == 'orderDate') {
|
||||
return Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
DateFormat.yMd().format(dataGridCell.value).toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
));
|
||||
} else {
|
||||
return Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
NumberFormat.currency(locale: 'en_US', symbol: '\$')
|
||||
.format(dataGridCell.value)
|
||||
.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
));
|
||||
}
|
||||
}).toList());
|
||||
}
|
||||
|
||||
@override
|
||||
Future<bool> handlePageChange(int oldPageIndex, int newPageIndex) async {
|
||||
int startIndex = newPageIndex * rowsPerPage;
|
||||
int endIndex = startIndex + rowsPerPage;
|
||||
if(startIndex < orders.length && endIndex <= orders.length){
|
||||
paginatedOrders = orders.getRange(startIndex, endIndex).toList(growable: false);
|
||||
buildPaginatedDataGridRows();
|
||||
notifyListeners();
|
||||
}else{
|
||||
paginatedOrders = [];
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
void buildPaginatedDataGridRows() {
|
||||
dataGridRows = paginatedOrders.map<DataGridRow>((dataGridRow) {
|
||||
return DataGridRow(cells: [
|
||||
DataGridCell(columnName: 'orderID', value: dataGridRow.orderID),
|
||||
DataGridCell(columnName: 'customerID', value: dataGridRow.customerID),
|
||||
DataGridCell(columnName: 'orderDate', value: dataGridRow.orderData),
|
||||
DataGridCell(columnName: 'freight', value: dataGridRow.freight),
|
||||
]);
|
||||
}).toList(growable: false);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Callbacks
|
||||
|
||||
The SfDataPager provides [onPageNavigationStart](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/onPageNavigationStart.html) and [onPageNavigationEnd](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/onPageNavigationEnd.html) callbacks to listen the page navigation in widget level.
|
||||
|
||||
Typically, these callbacks are used to show and hide loading indicator.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
final OrderInfoDataSource _orderInfoDataSource = OrderInfoDataSource();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
return Row(children: [
|
||||
Column(
|
||||
children: [
|
||||
SizedBox(
|
||||
height: constraints.maxHeight - 60,
|
||||
width: constraints.maxWidth,
|
||||
child: buildDataGrid(constraints)),
|
||||
Container(
|
||||
height: 60,
|
||||
width: constraints.maxWidth,
|
||||
child: SfDataPager(
|
||||
pageCount: orders.length / rowsPerPage,
|
||||
direction: Axis.horizontal,
|
||||
onPageNavigationStart: (int pageIndex) {
|
||||
//You can do your customization
|
||||
},
|
||||
delegate: _orderInfoDataSource,
|
||||
onPageNavigationEnd: (int pageIndex) {
|
||||
//You can do your customization
|
||||
},
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
]);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildDataGrid(BoxConstraints constraint) {
|
||||
return SfDataGrid(
|
||||
source: _orderInfoDataSource,
|
||||
columnWidthMode: ColumnWidthMode.fill,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'orderID',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Order ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'customerID',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Customer Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
)),
|
||||
GridTextColumn(
|
||||
columnName: 'orderDate',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Order Date',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'freight',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
'Freight',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
class OrderInfoDataSource extends DataGridSource{
|
||||
OrderInfoDataSource() {
|
||||
paginatedOrders = orders.getRange(0, 19).toList(growable: false);
|
||||
buildPaginatedDataGridRows();
|
||||
}
|
||||
|
||||
List<DataGridRow> dataGridRows = [];
|
||||
|
||||
@override
|
||||
List<DataGridRow> get rows => dataGridRows;
|
||||
|
||||
@override
|
||||
DataGridRowAdapter? buildRow(DataGridRow row) {
|
||||
return DataGridRowAdapter(
|
||||
cells: row.getCells().map<Widget>((dataGridCell) {
|
||||
if (dataGridCell.columnName == 'orderID') {
|
||||
return Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
dataGridCell.value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
);
|
||||
} else if (dataGridCell.columnName == 'customerID') {
|
||||
return Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
dataGridCell.value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
));
|
||||
} else if (dataGridCell.columnName == 'orderDate') {
|
||||
return Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
DateFormat.yMd().format(dataGridCell.value).toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
));
|
||||
} else {
|
||||
return Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
NumberFormat.currency(locale: 'en_US', symbol: '\$')
|
||||
.format(dataGridCell.value)
|
||||
.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
));
|
||||
}
|
||||
}).toList());
|
||||
}
|
||||
|
||||
@override
|
||||
Future<bool> handlePageChange(int oldPageIndex, int newPageIndex) async {
|
||||
int startIndex = newPageIndex * rowsPerPage;
|
||||
int endIndex = startIndex + rowsPerPage;
|
||||
if(startIndex < orders.length && endIndex <= orders.length){
|
||||
paginatedOrders = orders.getRange(startIndex, endIndex).toList(growable: false);
|
||||
buildPaginatedDataGridRows();
|
||||
notifyListeners();
|
||||
}else{
|
||||
paginatedOrders = [];
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
void buildPaginatedDataGridRows() {
|
||||
dataGridRows = paginatedOrders.map<DataGridRow>((dataGridRow) {
|
||||
return DataGridRow(cells: [
|
||||
DataGridCell(columnName: 'orderID', value: dataGridRow.orderID),
|
||||
DataGridCell(columnName: 'customerID', value: dataGridRow.customerID),
|
||||
DataGridCell(columnName: 'orderDate', value: dataGridRow.orderData),
|
||||
DataGridCell(columnName: 'freight', value: dataGridRow.freight),
|
||||
]);
|
||||
}).toList(growable: false);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Asynchronous data loading
|
||||
|
||||
You can load the data asynchronously to the `SfDataPager` by overriding the `handlePageChange` method and await the method while loading the data.
|
||||
|
||||
You can use `onPageNavigationStart` and `onPageNavigationEnd` callbacks to show and hide the loading indicator when navigating between pages.
|
||||
|
||||
In the below example, we have set await for 2000ms and displayed the loading indicator until 2000ms.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
final OrderInfoDataSource _orderInfoDataSource = OrderInfoDataSource();
|
||||
|
||||
bool showLoadingIndicator = true;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
return Row(children: [
|
||||
Column(
|
||||
children: [
|
||||
SizedBox(
|
||||
height: constraints.maxHeight - 60,
|
||||
width: constraints.maxWidth,
|
||||
child: buildStack(constraints)),
|
||||
Container(
|
||||
height: 60,
|
||||
width: constraints.maxWidth,
|
||||
child: SfDataPager(
|
||||
pageCount:
|
||||
orders.length / rowsPerPage,
|
||||
direction: Axis.horizontal,
|
||||
onPageNavigationStart: (int pageIndex) {
|
||||
setState(() {
|
||||
showLoadingIndicator = true;
|
||||
});
|
||||
},
|
||||
delegate: _orderInfoDataSource,
|
||||
onPageNavigationEnd: (int pageIndex) {
|
||||
setState(() {
|
||||
showLoadingIndicator = false;
|
||||
});
|
||||
},
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
]);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildDataGrid(BoxConstraints constraint) {
|
||||
return SfDataGrid(
|
||||
source: _orderInfoDataSource,
|
||||
columnWidthMode: ColumnWidthMode.fill,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'orderID',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Order ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'customerID',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Customer Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
)),
|
||||
GridTextColumn(
|
||||
columnName: 'orderDate',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Order Date',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
GridTextColumn(
|
||||
columnName: 'freight',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
'Freight',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildStack(BoxConstraints constraints) {
|
||||
List<Widget> _getChildren() {
|
||||
final List<Widget> stackChildren = [];
|
||||
stackChildren.add(buildDataGrid(constraints));
|
||||
|
||||
if (showLoadingIndicator) {
|
||||
stackChildren.add(Container(
|
||||
color: Colors.black12,
|
||||
width: constraints.maxWidth,
|
||||
height: constraints.maxHeight,
|
||||
child: Align(
|
||||
alignment: Alignment.center,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 3,
|
||||
),
|
||||
),
|
||||
));
|
||||
}
|
||||
|
||||
return stackChildren;
|
||||
}
|
||||
|
||||
return Stack(
|
||||
children: _getChildren(),
|
||||
);
|
||||
}
|
||||
|
||||
class OrderInfoDataSource extends DataGridSource{
|
||||
OrderInfoDataSource() {
|
||||
paginatedOrders = orders.getRange(0, 19).toList(growable: false);
|
||||
buildPaginateDataGridRows();
|
||||
}
|
||||
|
||||
List<DataGridRow> dataGridRows = [];
|
||||
|
||||
@override
|
||||
List<DataGridRow> get rows => dataGridRows;
|
||||
|
||||
@override
|
||||
DataGridRowAdapter? buildRow(DataGridRow row) {
|
||||
return DataGridRowAdapter(
|
||||
cells: row.getCells().map<Widget>((dataGridCell) {
|
||||
if (dataGridCell.columnName == 'orderID') {
|
||||
return Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
dataGridCell.value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
);
|
||||
} else if (dataGridCell.columnName == 'customerID') {
|
||||
return Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
dataGridCell.value.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
));
|
||||
} else if (dataGridCell.columnName == 'orderDate') {
|
||||
return Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
DateFormat.yMd().format(dataGridCell.value).toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
));
|
||||
} else {
|
||||
return Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
NumberFormat.currency(locale: 'en_US', symbol: '\$')
|
||||
.format(dataGridCell.value)
|
||||
.toString(),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
));
|
||||
}
|
||||
}).toList());
|
||||
}
|
||||
|
||||
@override
|
||||
Future<bool> handlePageChange(int oldPageIndex, int newPageIndex) async {
|
||||
int startIndex = newPageIndex * rowsPerPage;
|
||||
int endIndex = startIndex + rowsPerPage;
|
||||
if(startIndex < orders.length && endIndex <= orders.length){
|
||||
await Future.delayed(Duration(milliseconds: 2000));
|
||||
paginatedOrders = orders.getRange(startIndex, endIndex).toList(growable: false);
|
||||
buildPaginatedDataGridRows();
|
||||
notifyListeners();
|
||||
}else{
|
||||
paginatedOrders = [];
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
void buildPaginatedDataGridRows() {
|
||||
dataGridRows = paginatedOrders.map<DataGridRow>((dataGridRow) {
|
||||
return DataGridRow(cells: [
|
||||
DataGridCell(columnName: 'orderID', value: dataGridRow.orderID),
|
||||
DataGridCell(columnName: 'customerID', value: dataGridRow.customerID),
|
||||
DataGridCell(columnName: 'orderDate', value: dataGridRow.orderData),
|
||||
DataGridCell(columnName: 'freight', value: dataGridRow.freight),
|
||||
]);
|
||||
}).toList(growable: false);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
>**NOTE**
|
||||
Download demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-show-loading-indicator-on-loading-page-in-flutter-datatable).
|
||||
|
||||
|
||||
## Programmatic page navigation
|
||||
|
||||
The `SfDataPager` provides the support to navigate between the pages programmatically using [controller](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridController-class.html) with following options,
|
||||
|
||||
* [nextPage](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataPagerController/nextPage.html)
|
||||
* [previousPage](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataPagerController/previousPage.html)
|
||||
* [LastPage](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataPagerController/lastPage.html)
|
||||
* [firstPage](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataPagerController/firstPage.html)
|
||||
|
||||
The following code example shows how to navigate the previous page programmatically,
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: LayoutBuilder(builder: (context, constraint) {
|
||||
return Column(
|
||||
children: [
|
||||
MaterialButton(
|
||||
onPressed: () {
|
||||
controller.previousPage();
|
||||
},
|
||||
child: Text('Move Previous page'),
|
||||
),
|
||||
SizedBox(
|
||||
height: constraint.maxHeight - 120,
|
||||
width: constraint.maxWidth,
|
||||
child: _buildDataGrid()),
|
||||
Container(
|
||||
height: 60,
|
||||
child: Align(
|
||||
alignment: Alignment.center,
|
||||
child: SfDataPager(
|
||||
delegate: orderInfoDataSource,
|
||||
initialPageIndex: index,
|
||||
controller: controller,
|
||||
pageCount: orderInfoDataSource.orders.length /
|
||||
orderInfoDataSource.rowsPerPage,
|
||||
direction: Axis.horizontal,
|
||||
)),
|
||||
)
|
||||
],
|
||||
);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
## Orientation
|
||||
|
||||
`SfDataPager` allows you to arrange the child elements either horizontally or vertically. This can be achieved by using the [direction](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/direction.html) Property. `direction` is an Enum type.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>
|
||||
Enum
|
||||
</th>
|
||||
<th>
|
||||
Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
horizontal
|
||||
</td>
|
||||
<td>
|
||||
This is the default enum value for direction. Arranges all the navigation buttons and numeric buttons horizontally.{{''|markdownify}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
vertical
|
||||
</td>
|
||||
<td>
|
||||
Arranges all the navigation buttons and numeric buttons vertically by setting Axis.vertical to direction property.{{''|markdownify}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
## Appearance
|
||||
|
||||
SfDataPager allows to customize the appearance of the data pager using the [SfDataPagerThemeData](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataPagerThemeData-class.html) in [SfDataPagerTheme](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataPagerTheme-class.html). The `SfDataPager` should be wrapped inside the `SfDataPagerTheme`.
|
||||
|
||||
Import the following class from the [syncfusion_flutter_core](https://pub.dev/packages/syncfusion_flutter_core) package.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
import 'package:syncfusion_flutter_core/theme.dart';
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
The following code example illustrates using `SfDataPagerThemeData` with the data pager control
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataPagerTheme(
|
||||
data: SfDataPagerThemeData(
|
||||
itemColor: Colors.white,
|
||||
selectedItemColor: Colors.lightGreen,
|
||||
itemBorderRadius: BorderRadius.circular(5),
|
||||
backgroundColor: Colors.teal,
|
||||
),
|
||||
child: SfDataPager(
|
||||
delegate: _orderInfoDataSource,
|
||||
pageCount: orders.length / rowsPerPage,
|
||||
direction: Axis.horizontal,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,318 @@
|
|||
---
|
||||
layout: post
|
||||
title: Row Height Customization in Flutter DataGrid | DataTable | Syncfusion
|
||||
description: Learn here all about how to customize the row heights in Syncfusion Flutter DataGrid (SfDataGrid) widget and more.
|
||||
platform: flutter
|
||||
control: SfDataGrid
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Row Height Customization in Flutter DataGrid (SfDataGrid)
|
||||
|
||||
This section explains about options to customize the header row height and the row height of all the grid rows or particular row based on your requirements.
|
||||
|
||||
## Set height for header row
|
||||
|
||||
[SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) allows you to customize the height of the header row by using the [headerRowHeight](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/headerRowHeight.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDatasource,
|
||||
headerRowHeight: 70,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Set height for rows except header row
|
||||
|
||||
You can customize the height of the grid rows in `SfDataGrid` by using the [rowHeight](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/rowHeight.html) property.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDatasource,
|
||||
rowHeight: 60,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Refresh row height for specific row
|
||||
|
||||
The `SfDataGrid` allows you to update or refresh specific row and it's height when
|
||||
an underlying data is updated.
|
||||
|
||||
You can refresh a specific row and its height by using the [DataGridController.refreshRow](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridController/refreshRow.html) method. This method has following two arguments,
|
||||
|
||||
* **rowIndex**- Specify the required row index which is required to refresh. If you specify this, the data alone will be refreshed for a row.
|
||||
|
||||
* **recalculateRowHeight** - Decides whether a height of a row should be refreshed along with the data.
|
||||
|
||||
If you call `refreshRow` method, `onQueryRowHeight` callback will called for that specific row. So, auto-calculation of height can be recalculated for that row.
|
||||
|
||||
In the below example, row data is updated when the `refreshRow` is called in `onPressed` callback of the `FlatButton`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
List<Employee> _employees = [];
|
||||
|
||||
final EmployeeDataSource _employeeDataSource = EmployeeDataSource();
|
||||
|
||||
final DataGridController _controller = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Syncfusion Flutter DataGrid'),
|
||||
),
|
||||
body: Column(
|
||||
children: [
|
||||
FlatButton(
|
||||
child: const Text('Update cell value),
|
||||
onPressed: () {
|
||||
_employees[0].id=1010;
|
||||
_employeeData[0].name = 'Maria Anders';
|
||||
_employeeData[0].designation = 'Sales Representative';
|
||||
_employees[0].salary = 25000;
|
||||
_controller.refreshRow(0);
|
||||
_employeeDataSource.getData(_employees);
|
||||
_employeeDataSource.updateDataSource();
|
||||
}),
|
||||
SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
controller: _controller,
|
||||
columnSizer: _columnSizer,
|
||||
onQueryRowHeight: (RowHeightDetails details) {
|
||||
if (details.rowIndex == 0) {
|
||||
return 100.0;
|
||||
}
|
||||
|
||||
return 50.0;
|
||||
},
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
In the below example, row data is refreshed along with its row height when the `refreshRow` is called in `onPressed` callback of the `FlatButton`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
List<Employee> _employees = [];
|
||||
|
||||
final EmployeeDataSource _employeeDataSource = EmployeeDataSource();;
|
||||
|
||||
final DataGridController _controller = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Syncfusion Flutter DataGrid'),
|
||||
),
|
||||
body: Column(
|
||||
children: [
|
||||
FlatButton(
|
||||
child: const Text('Update cell value),
|
||||
onPressed: () {
|
||||
_employees[0].id=1010;
|
||||
_employeeData[0].name = 'Maria Anders';
|
||||
_employeeData[0].designation = 'Sales Representative';
|
||||
_employees[0].salary = 25000;
|
||||
_controller.refreshRow(0, recalculateRowHeight: true);
|
||||
_employeeDataSource.getData(_employees);
|
||||
_employeeDataSource.updateDataSource();
|
||||
}),
|
||||
SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
controller: _controller,
|
||||
columnSizer: _columnSizer,
|
||||
onQueryRowHeight: (RowHeightDetails details) {
|
||||
if (details.rowIndex == 0) {
|
||||
return 100;
|
||||
}
|
||||
return 50.0;
|
||||
},
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'ID',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Name',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -146,7 +146,7 @@ Triggers when tapping the legend item. The [`onLegendTapped`](https://pub.dev/do
|
|||
|
||||
Triggers while selection changes. Here you can customize the selectedColor, unselectedColor, selectedBorderColor, selectedBorderWidth, unselectedBorderColor, and unselectedBorderWidth properties. The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onSelectionChanged.html) Callback contains the following arguments.
|
||||
|
||||
* [`seriesRenderer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/series.html) - specifies current series.
|
||||
* [`seriesRenderer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/seriesRenderer.html) - specifies current series.
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/pointIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/pointIndex.html) - specifies the current point index.
|
||||
* [`selectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/selectedColor.html) - specifies color of the selected data points or series.
|
||||
|
|
@ -221,3 +221,30 @@ N> This callback will not be called, when the builder is specified for data labe
|
|||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onPointTapped
|
||||
|
||||
Triggers when tapping the series point. The [`onPointTapped`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onPointTapped.html) Callback contains the following arguments.
|
||||
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/pointIndex.html) - specifies the current point index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/dataPoints.html) - holds the data point collection.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/viewportPointIndex.html) - to get the viewport index value of the tapped data label.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfFunnelChart(
|
||||
onPointTapped: (PointTapArgs args){
|
||||
print(args.seriesIndex);
|
||||
print(args.pointIndex);
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -17,10 +17,10 @@ Data label can be added to a chart series by enabling the [`isVisible`](https://
|
|||
* [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/alignment.html) - aligns the data label text to [`near`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment-class.html), [`center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment-class.html) and [`far`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment-class.html).
|
||||
* [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/textStyle.html) - used to change the data label text color, size, font family, font style, and font weight.
|
||||
* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the color of the data label.
|
||||
* [`fontFamily`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontFamily.html) - used to change the font family for the data label.
|
||||
* [`fontStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontStyle.html) - used to change the font style for the data label.
|
||||
* [`fontWeight`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontWeight.html) - used to change the font weight for the data label.
|
||||
* [`fontSize`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontSize.html) - used to change the font size for the data label.
|
||||
* [`fontFamily`](https://api.flutter.dev/flutter/painting/TextStyle/fontFamily.html) - used to change the font family for the data label.
|
||||
* [`fontStyle`](https://api.flutter.dev/flutter/painting/TextStyle/fontStyle.html) - used to change the font style for the data label.
|
||||
* [`fontWeight`](https://api.flutter.dev/flutter/painting/TextStyle/fontWeight.html) - used to change the font weight for the data label.
|
||||
* [`fontSize`](https://api.flutter.dev/flutter/painting/TextStyle/fontSize.html) - used to change the font size for the data label.
|
||||
* [`margin`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/margin.html) - used to change the margin size for data labels.
|
||||
* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/opacity.html) - used to control the transparency of the data label.
|
||||
* [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) - used to align the Funnel data label positions. The available options to customize the positions are [`outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html), [`auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html), [`top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html), [`bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html) and [`middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html).
|
||||
|
|
@ -159,3 +159,10 @@ Data label and its connector line in the Funnel charts for the point value 0 can
|
|||
|
||||
|
||||
|
||||
### Data label saturation color
|
||||
|
||||
If the user didn’t provide text color to the data label, then by default, the saturation color is applied to the data label text. i.e., if the data points background color intensity is dark, then the data label will render in white color (#FFFFFF) and if the data points background color intensity is light, data label will render in black color (#000000).
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 13 KiB |
Двоичные данные
Flutter/funnel-chart/images/overview/overview.png
Двоичные данные
Flutter/funnel-chart/images/overview/overview.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 40 KiB После Ширина: | Высота: | Размер: 29 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 59 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 59 KiB |
|
|
@ -11,7 +11,7 @@ documentation: ug
|
|||
|
||||
Syncfusion Flutter Funnel Chart (SfFunnelChart) widget is written natively in Dart for creating beautiful and high-performance Funnel chart, which are used to craft high-quality applications using Flutter.
|
||||
|
||||
|
||||
|
||||
|
||||
## Key Features
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,88 @@
|
|||
---
|
||||
layout: post
|
||||
title: RTL support in Flutter Funnel Chart widget | Syncfusion
|
||||
description: Learn here about the RTL support in Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Right To Left (RTL) in Flutter Funnel Chart (SfFunnelChart)
|
||||
|
||||
Funnel chart supports right to left rendering. But series and other chart elements rendering will be the same for both LTR and RTL. Only, the legend rendering will be changed.
|
||||
|
||||
## RLT rendering ways
|
||||
|
||||
Right to left rendering can be switched in the following ways:
|
||||
|
||||
### Wrapping the SfFunnelChart with Directionality widget
|
||||
|
||||
To change the rendering direction from right to left, you can wrap the [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [TextDirection.rtl](https://api.flutter.dev/flutter/dart-ui/TextDirection-class.html).
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Directionality(
|
||||
textDirection: TextDirection.rtl,
|
||||
child: SfFunnelChart(
|
||||
//...
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
### Changing the locale to RTL languages
|
||||
|
||||
To change the chart rendering direction from right to left, you can change the [`locale`](https://api.flutter.dev/flutter/material/MaterialApp/locale.html) to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
localizationsDelegates: [
|
||||
GlobalMaterialLocalizations.delegate,
|
||||
GlobalWidgetsLocalizations.delegate,
|
||||
],
|
||||
supportedLocales: <Locale>[
|
||||
Locale('en'),
|
||||
Locale('ar'),
|
||||
// ... other locales the app supports
|
||||
],
|
||||
locale: Locale('ar'),
|
||||
home: Scaffold(
|
||||
body: SfFunnelChart(
|
||||
//...
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## RTL supported chart elements
|
||||
|
||||
Right to left rendering is effective only for the legend in the chart. Legend items will be rendered from right to left direction.
|
||||
|
||||
|
||||
|
||||
In addition, if you want to change the tooltip’s content, to look like it is rendering from right to left, then you can set the [`format`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/format.html) property in [`TooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) as `"point.y : point.x"`. By default, the tooltip format will be `"point.x : point.y"`.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
SfFunnelChart(
|
||||
tooltipBehavior: TooltipBehavior(
|
||||
enable: true,
|
||||
format: “point.y : point.x”
|
||||
)
|
||||
//...
|
||||
)
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 19 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 30 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 17 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 37 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 41 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 28 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 24 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 28 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 60 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 62 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 13 KiB |
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Installation and Deployment process for Syncfusion Flutter products
|
||||
description: Learn how to install and deploy the Syncfusion Flutter component
|
||||
title: Installation | Frequently Asked Questions | Syncfusion
|
||||
description: Learn here all about the Frequently Asked Questions (FAQ's) about the doubts that might occur during the Installation.
|
||||
platform: flutter
|
||||
control: Installation and Deployment
|
||||
documentation: ug
|
||||
|
||||
---
|
||||
|
||||
# Installation FAQ
|
||||
# Installation - Frequently Asked Questions (FAQ's)
|
||||
|
||||
Refer [this](https://help.syncfusion.com/common/essential-studio/installation/installation-errors) topic for more information regarding the issues related to installation.
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Upgrade from major version to service pack version|Syncfusion
|
||||
description: upgrade from major version to service pack version
|
||||
title: Upgrade from major version to service pack version | Syncfusion
|
||||
description: Learn here all about Upgrading the packages from major version to service pack version using the link provided.
|
||||
platform: flutter
|
||||
control: Essential Studio
|
||||
documentation: ug
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Upgrade from one version to another version| common | Syncfusion
|
||||
description: upgrade from one version to another version
|
||||
title: Upgrade from one version to another version | common | Syncfusion
|
||||
description: Learn here all about Upgrading the packages from one version to another version using the link provided.
|
||||
platform: flutter
|
||||
control: Essential Studio
|
||||
documentation: ug
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Installation and Deployment process for Syncfusion Flutter products
|
||||
description: Learn how to install and deploy the Syncfusion Flutter component
|
||||
title: Upgrade from trial version to license version | Syncfusion
|
||||
description: Learn here all about Upgrading the packages from trial version to license version using the link provided.
|
||||
platform: flutter
|
||||
control: Installation and Deployment
|
||||
documentation: ug
|
||||
|
|
|
|||
Двоичные данные
Flutter/installation-and-upgrade/Upgrade-images/upgrade-control-panel.png
Normal file
Двоичные данные
Flutter/installation-and-upgrade/Upgrade-images/upgrade-control-panel.png
Normal file
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 54 KiB |
|
|
@ -1,29 +1,55 @@
|
|||
---
|
||||
layout: post
|
||||
title: Overview | Flutter | Syncfusion
|
||||
description: Basic overview about the list of available features on Syncfusion Flutter widgets and steps to use the guide.
|
||||
title: Introduction to Flutter Widgets Documentation | Tutorials | Syncfusion
|
||||
description: Overview about the available features in Syncfusion Flutter widgets and steps to use the guide. | Flutter Widgets |
|
||||
platform: flutter
|
||||
control: Overview
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Syncfusion Flutter Widgets
|
||||
# Introduction to Syncfusion Flutter Widgets Documentation
|
||||
|
||||
The Syncfusion Flutter UI widgets is the suite you ever need to create rich and high-quality mobile applications in iOS and Android with single code base. It also includes charts widgets.
|
||||
The Syncfusion [Flutter Widgets](https://www.syncfusion.com/flutter-widgets) are a set of [advanced custom widgets and file formats packages](https://pub.dev/publishers/syncfusion.com/packages) needed to create rich and high-quality cross-platform applications in iOS, Android, and Web using a single code base. This article gives you a quick overview of how to read the Flutter widgets documentation and other help resources such as video tutorials, code examples, demos, and the knowledge base.
|
||||
|
||||
## How to best read this user guide
|
||||
|
||||
* The best way to read the user guide is to start with the Getting Started section of the documentation for the component that you need. The Getting Started guide gives information needed to know before writing the code. This is the only section recommended for end-to-end reading before writing the code. All the other information can be referred when needed.
|
||||
* Now, that you are familiar with the basics of using the component, and the next step would be to start integrating the component into your application. It is very likely that you would find a code example that resembles your intended usage scenario.
|
||||
* The best way to read the user guide is to start with the Getting Started section of the documentation for the [widget or library](https://help.syncfusion.com/flutter/introduction/widgets-catalog) that you need. The Getting Started guide gives the needed information to write the code. This is the only section recommended for end-to-end reading before writing the code. All other information can be referred when needed. The [widgets catalog](https://help.syncfusion.com/flutter/introduction/widgets-catalog) section helps you find the user guide link and its package in [pub.dev](https://pub.dev/publishers/syncfusion.com/packages).
|
||||
* Now, that you are familiar with the basics of using the widget, the next step would be to start integrating the library into your application. It is very likely that you would find a code example that resembles your intended usage scenario.
|
||||
* After you have integrated the component into your application, it is likely that you would need additional information on specific features and API. Search the specific topic using the search box available at the top of the user guide.
|
||||
* Another valuable resource is the API reference that provides detailed information on the classes and its members.
|
||||
|
||||
## Additional help resources
|
||||
|
||||
The Knowledge Base section contains responses for some of the most common questions other customers asked in the past. You can search for topics that are not covered in the user guide.
|
||||
The user guide itself has enough information to get you up and running. However, there are other valuable resources you must be aware of.
|
||||
|
||||
Similar to the Knowledge Base, the Forum section also contains responses for questions of other customers asked in the past.
|
||||
### API References
|
||||
|
||||
The [API reference](https://help.syncfusion.com/flutter/introduction/api-reference) is a valuable resource that provides detailed information on the classes and its members.
|
||||
|
||||
### Widget Examples
|
||||
|
||||
The [widgets examples section](https://help.syncfusion.com/flutter/introduction/widget-examples) contains the GitHub link for each widget’s codes examples. This is very useful when you want to learn by practice.
|
||||
|
||||
### Knowledge Base
|
||||
|
||||
The Knowledge Base section contains responses for some of the most common questions other customers had asked in the past. You can search for topics that are not covered in the user guide.
|
||||
Similar to the Knowledge Base, the [Forum section](https://www.syncfusion.com/forums/flutter) also contains responses for questions asked in the past.
|
||||
|
||||
### Video Tutorials
|
||||
|
||||
Video tutorials of our widgets can be found [here](https://www.syncfusion.com/tutorial-videos).
|
||||
|
||||
## Demos
|
||||
|
||||
Explore the full capabilities of our Flutter widgets on your device by installing our sample browser applications from the below app stores, and view code samples in GitHub.
|
||||
|
||||
<p align="center">
|
||||
<a href="https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples"><img src="https://cdn.syncfusion.com/content/images/FTControl/google-play.png"/></a>
|
||||
<a href="https://apps.apple.com/us/app/syncfusion-flutter-ui-widgets/id1475231341"><img src="https://cdn.syncfusion.com/content/images/FTControl/apple-button.png"/></a>
|
||||
<br>
|
||||
<a href="https://github.com/syncfusion/flutter-examples"><img src="https://cdn.syncfusion.com/content/images/FTControl/GitHub.png"/></a>
|
||||
<a href="https://flutter.syncfusion.com"><img src="https://cdn.syncfusion.com/content/images/FTControl/web_sample_browser.png"/></a>
|
||||
</p>
|
||||
|
||||
## Create a support incident
|
||||
In case, you are not able to find the information that you are looking for in the self-help resources mentioned above, please [contact](https://www.syncfusion.com/support/directtrac/incidents) us by creating a support ticket.
|
||||
|
||||
In case, you are not able to find the information that you are looking for in the self-help resources mentioned above, then please [`contact us`](https://www.syncfusion.com/support/directtrac/incidents) by creating a support ticket.
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Animation in a linear gauge | Linear Gauge widget| Syncfusion
|
||||
description: Tutorial about deatils of the annimation on Linear Gauge Flutter widget | Flutter Linear Gauge widget documentation|
|
||||
title: Animation in Flutter Linear Gauge widget | Syncfusion
|
||||
description: Learn here all about adding and customizing animation of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more.
|
||||
platform: flutter
|
||||
control: SfLinearGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Flutter Linear Gauge animation
|
||||
# Animation in Fluter Linear Gauge (SfLinearGauge)
|
||||
|
||||
All Linear Gauge elements such as axis along with ticks and labels, range, bar pointer, shape marker pointer and widget marker pointer can be animated separately.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Customize axis in a linear gauge | Linear Gauge widget| Syncfusion
|
||||
description: Tutorial about deatils of the axis on Linear Gauge Flutter widget | Flutter Linear Gauge widget documentation|
|
||||
title: Axis in Flutter Linear Gauge widget | Syncfusion
|
||||
description: Learn here all about adding and customizing Axis of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more.
|
||||
platform: flutter
|
||||
control: SfLinearGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Flutter Linear Gauge Axis
|
||||
# Axis in Fluter Linear Gauge (SfLinearGauge)
|
||||
|
||||
The Linear Gauge axis is a scale where a set of values can be plotted. An axis can be customized by changing the thickness, color and edge styles. Axis elements such as labels and ticks can also be easily customized and you can also inverse the axis.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,229 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting started with Flutter Linear Gauge widget | Syncfusion
|
||||
description: Learn here about getting started with Syncfusion Flutter Linear Gauge (SfLinearGauge) widget, its elements, and more.
|
||||
platform: flutter
|
||||
control: SfLinearGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Getting started with Flutter Linear Gauge (SfLinearGauge)
|
||||
|
||||
This section explains the steps required to add the Linear Gauge and its elements such as axis, range, and pointer and also covers basic features needed to know to get started with the Linear Gauge widget.
|
||||
|
||||
## Add Linear Gauge 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 Gauge dependency to your pubspec.yaml file.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
dependencies:
|
||||
|
||||
syncfusion_flutter_gauges: ^xx.x.xx
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
N> Here **xx.x.xx** denotes the current version of the [`Syncfusion Flutter Gauge`](https://pub.dev/packages/syncfusion_flutter_gauges/versions) package.
|
||||
|
||||
**Get packages**
|
||||
|
||||
Run the following command to get the required packages.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
$ flutter pub get
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
**Import package**
|
||||
|
||||
Import the following package in your Dart code.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
import 'package:syncfusion_flutter_gauges/gauges.dart';
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Initialize the Linear Gauge
|
||||
|
||||
After the package has been imported, initialize the SfLinearGauge as a child of any widget such as container widget.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: Center(
|
||||
child:SfLinearGauge()
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Add axis
|
||||
|
||||
The Linear Gauge axis is a scale where a set of values can be plotted. You can specify the minimum and maximum values of the axis using the minimum and maximum properties as demonstrated in the following code sample.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: Center(
|
||||
child: SfLinearGauge(minimum: 100, maximum: 200)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Update orientation
|
||||
|
||||
As you can see in the above image, the default orientation of the Linear Gauge is horizontal. But you can change it with the orientation property of the Linear Gauge widget.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
SfLinearGauge(
|
||||
orientation: LinearGaugeOrientation.vertical
|
||||
),
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Add range
|
||||
|
||||
A range is a visual element that helps you to quickly visualize where a range falls on the axis track. Multiple ranges with different styles can be added to a Linear gauge. You can also specify the start value, end value, and color for a range as demonstrated in the following code sample.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
SfLinearGauge(
|
||||
ranges: <LinearGaugeRange>[
|
||||
//First range
|
||||
LinearGaugeRange(startValue: 0, endValue: 50, color: Colors.green),
|
||||
//Second range
|
||||
LinearGaugeRange(startValue: 50, endValue: 100, color: Colors.blue)
|
||||
]
|
||||
)
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Add marker pointer
|
||||
|
||||
The Linear Gauge supports two marker pointers - shape pointer and widget pointer. The shape pointer will have a default set of pre-build icons to point a value in an axis track, while the widget pointer facilitates using any Flutter widget to point a value in an axis track.
|
||||
|
||||
The following code sample demonstrates how to add a shape pointer.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
SfLinearGauge(
|
||||
markerPointers: [LinearShapePointer(value: 50)]
|
||||
),
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
The following code sample demonstrates how to add a widget pointer.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
SfLinearGauge(
|
||||
markerPointers: [
|
||||
LinearWidgetPointer(
|
||||
value: 40,
|
||||
child: Container(
|
||||
height: 20,
|
||||
width: 20,
|
||||
decoration: BoxDecoration(color: Colors.blueAccent)
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Add bar pointer
|
||||
|
||||
In a Linear Gauge, the bar pointer is used to specify a value in an axis track by drawing a track from the axis’s minimum value to its specified value
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
SfLinearGauge(
|
||||
barPointers: [LinearBarPointer(value: 40)]
|
||||
),
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
The following code example gives you the complete view of the above configurations.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:syncfusion_flutter_gauges/gauges.dart';
|
||||
|
||||
void main() => runApp(ChartApp());
|
||||
class LinearGaugeDemo extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: Center(
|
||||
child: SfLinearGauge(
|
||||
ranges: <LinearGaugeRange>[
|
||||
//First range
|
||||
LinearGaugeRange(
|
||||
startValue: 0,
|
||||
endValue: 50,
|
||||
color: Colors.green
|
||||
),
|
||||
//Second range
|
||||
LinearGaugeRange(
|
||||
startValue: 50,
|
||||
endValue: 100,
|
||||
color: Colors.blue
|
||||
),
|
||||
],
|
||||
markerPointers: [
|
||||
LinearShapePointer(value: 50),
|
||||
LinearWidgetPointer(
|
||||
value: 40,
|
||||
child: Container(
|
||||
height: 20,
|
||||
width: 20,
|
||||
decoration: BoxDecoration(color: Colors.blueAccent)
|
||||
),
|
||||
),
|
||||
],
|
||||
barPointers: [LinearBarPointer(value: 40)]
|
||||
),
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 4.2 KiB |
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Customize labels in a linear gauge | Linear Gauge widget| Syncfusion
|
||||
description: Tutorial about the available styles of labels on Linear Gauge Flutter widget.| Flutter Linear Gauge widget|
|
||||
title: Labels in Flutter Linear Gauge widget | Syncfusion
|
||||
description: Learn here all about adding and customizing Labels of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more.
|
||||
platform: flutter
|
||||
control: SfLinearGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Default Linear Gauge Labels
|
||||
# Labels in Fluter Linear Gauge (SfLinearGauge)
|
||||
|
||||
The default style of axis labels is as follows.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
---
|
||||
layout: post
|
||||
title: Mirror in Flutter Linear Gauge widget | Syncfusion
|
||||
description: Learn here about mirroring the Syncfusion Flutter Linear Gauge (SfLinearGauge) widget with isMirrored property
|
||||
platform: flutter
|
||||
control: SfLinearGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Mirrored in Fluter Linear Gauge (SfLinearGauge)
|
||||
|
||||
The [`isMirrored`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isMirrored.html) property in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) mirrors all the Gauge elements in the `SfLinearGauge`. The following code sample demonstrates how to setting the [`isMirrored`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isMirrored.html) property.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Center(
|
||||
child: SfLinearGauge(isMirrored: true)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
## Comparison for the mirrored and normal gauge
|
||||
|
||||
The following screenshot provides a comparison for the mirrored and normal Linear Gauge.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
layout: post
|
||||
title: About Flutter Linear Gauge widget | Syncfusion
|
||||
description: Learn here all about introduction of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget, its features, and more.
|
||||
platform: flutter
|
||||
control: SfLinearGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Flutter Linear Gauge (SfLinearGauge) Overview
|
||||
|
||||
Syncfusion Flutter Linear Gauge is a data visualization widget to display data on a linear scale. Use this widget to craft high-quality mobile app user interfaces.
|
||||
|
||||
|
||||
|
||||
## Key Features
|
||||
|
||||
* **Orientation** - The Linear Gauge can be set to vertical or horizontal orientation.
|
||||
* **Axis** - The axis is a scale where a set of values can be plotted. An axis can be customized by changing the thickness and edge styles and you can also inverse the axis.
|
||||
* **Labels and Ticks** - The axis elements, such as labels, major ticks, and minor ticks, can be customized to different styles.
|
||||
* **Ranges** - A range is a visual element that helps you to quickly visualize where a range falls on the axis track. Multiple ranges with different styles can be added to the Linear Gauge.
|
||||
* **Pointers** - A pointer is used to indicate a specific value on an axis. The widget has three types of pointers: shape marker pointer, widget marker pointer, and bar pointer. All the pointers can be customized as needed and you can also add multiple pointers in the Linear Gauge.
|
||||
* **Mirror Gauge** - The Linear Gauge can be mirrored. When the [`isMirrored`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isMirrored.html) property is true, all the gauge elements will be rendered in mirror effect.
|
||||
* **Animation** - Animate the gauge elements in a visually appealing way, when they are load, or when their values are changed.
|
||||
* **Interaction** - The shape and widget marker pointers in the Linear Gauge can be moved from one value to another by swiping or drag gestures.
|
||||
|
||||
You can get the sample in the following link: [`Flutter Linear Gauge`](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/linear_gauge).
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Customize range in a linear gauge | Linear Gauge widget| Syncfusion
|
||||
description: Tutorial about the available styles of range on Linear Gauge Flutter widget.| Flutter Linear Gauge widget|
|
||||
title: Range in Flutter Linear Gauge widget | Syncfusion
|
||||
description: Learn here all about adding and customizing Range of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more.
|
||||
platform: flutter
|
||||
control: SfLinearGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Default Linear Gauge range
|
||||
# Range in Fluter Linear Gauge (SfLinearGauge)
|
||||
|
||||
A range is a visual element that helps you quickly visualize where a range falls on the axis track. Multiple ranges with different styles can be added to a linear gauge. The default style of range will be as below.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Customize ticks in a linear gauge | Linear Gauge widget| Syncfusion
|
||||
description: Tutorial about the available styles of ticks on Linear Gauge Flutter widget.| Flutter Linear Gauge widget|
|
||||
title: Ticks in Flutter Linear Gauge widget | Syncfusion
|
||||
description: Learn here all about adding and customizing Ticks of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more.
|
||||
platform: flutter
|
||||
control: SfLinearGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Default Linear Gauge ticks
|
||||
# Ticks in Fluter Linear Gauge (SfLinearGauge)
|
||||
|
||||
The default style of axis ticks is as follows.
|
||||
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 69 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 71 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 61 KiB |
|
|
@ -0,0 +1,100 @@
|
|||
---
|
||||
layout: post
|
||||
title: Bookmark navigation in Flutter PDF Viewer widget | Syncfusion
|
||||
description: Learn here all about bookmark navigation feature of Syncfusion Flutter PDF Viewer (SfPdfViewer) widget and more.
|
||||
platform: Flutter
|
||||
control: SfPdfViewer
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Bookmark navigation in Flutter PDF Viewer (SfPdfViewer)
|
||||
|
||||
Navigate to the desired bookmark topics using the default bookmark view or the controller method programmatically.
|
||||
|
||||
## Open and close the built-in bookmark view programmatically
|
||||
|
||||
The built-in bookmark view in the `SfPdfViewer` can be opened using the [openBookmarkView](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewerState/openBookmarkView.html) method and it can be closed either by tapping the close icon or device's back button. Also, we can close the bookmark programmatically by using the Navigator’s pop method.
|
||||
|
||||
|
||||
|
||||
The following code example explains the opening of built-in bookmark view programmatically.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
final GlobalKey<SfPdfViewerState> _pdfViewerKey = GlobalKey();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Syncfusion Flutter PdfViewer'),
|
||||
actions: <Widget>[
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons. bookmark,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () {
|
||||
_pdfViewerKey.currentState?.openBookmarkView();
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SfPdfViewer.network(
|
||||
'http://ebooks.syncfusion.com/downloads/flutter-succinctly/flutter-succinctly.pdf',
|
||||
key: _pdfViewerKey,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Navigate to the desired bookmark topic programmatically
|
||||
|
||||
You can navigate to the desired bookmark topic programmatically using the [jumpToBookmark](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/jumpToBookmark.html) controller method. The following code example explains the same.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late PdfViewerController _pdfViewerController;
|
||||
late PdfBookmark _pdfBookmark;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_pdfViewerController = PdfViewerController();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Syncfusion Flutter PdfViewer'),
|
||||
actions: <Widget>[
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.arrow_drop_down_circle,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () {
|
||||
_pdfViewerController.jumpToBookmark(_pdfBookmark);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SfPdfViewer.network(
|
||||
'http://ebooks.syncfusion.com/downloads/flutter-succinctly/flutter-succinctly.pdf',
|
||||
controller: _pdfViewerController,
|
||||
onDocumentLoaded: (PdfDocumentLoadedDetails details) {
|
||||
_pdfBookmark = details.document.bookmarks[0];
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
---
|
||||
layout: post
|
||||
title: Magnification in Flutter PDF Viewer widget | Syncfusion
|
||||
description: Learn here all about magnification feature of Syncfusion Flutter PDF Viewer (SfPdfViewer) widget and more.
|
||||
platform: Flutter
|
||||
control: SfPdfViewer
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Magnification in Flutter PDF Viewer (SfPdfViewer)
|
||||
|
||||
The content of a document can be zoomed in and out either by pinch to zoom or changing the zoom level factor programmatically.
|
||||
|
||||
## Change the zoom level factor programmatically
|
||||
|
||||
You can change or control the zoom level factor programmatically using the [zoomLevel](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/zoomLevel.html) property. The zoom level factor value can be set between 1.0 and 3.0. The default value is 1.0. The following code example explains the same.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late PdfViewerController _pdfViewerController;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_pdfViewerController = PdfViewerController();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Syncfusion Flutter PdfViewer'),
|
||||
actions: <Widget>[
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.zoom_in,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () {
|
||||
_pdfViewerController.zoomLevel = 2;
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SfPdfViewer.network(
|
||||
'http://ebooks.syncfusion.com/downloads/flutter-succinctly/flutter-succinctly.pdf',
|
||||
controller: _pdfViewerController,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
N> The maximum allowed zoom level is 3.0 and if any value is set beyond that, then it will be restricted to 3.0.
|
||||
|
||||
## Enable or disable the double-tap zoom.
|
||||
|
||||
By default, the `SfPdfViewer` will be zoomed in and out when double-tapped. You can enable or disable the double-tap zoom using the [enableDoubleTapZooming](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/enableDoubleTapZooming.html) property. The following code example explains the same.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Container(
|
||||
child: SfPdfViewer.network(
|
||||
'http://ebooks.syncfusion.com/downloads/flutter-succinctly/flutter-succinctly.pdf',
|
||||
enableDoubleTapZooming: false)));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
N> On a desktop web browser, this `enableDoubleTapZooming` property will have no effect on mouse interaction.
|
||||
|
||||
## Callbacks
|
||||
|
||||
The `SfPdfViewer` magnification supports the [PdfZoomLevelChangedCallback](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfZoomLevelChangedCallback.html) to notify the zoom level changes.
|
||||
|
||||
### Zoom level changed callback
|
||||
|
||||
The [onZoomLevelChanged](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onZoomLevelChanged.html) callback triggers when the zoom level is changed in the `SfPdfViewer`. That is,
|
||||
|
||||
• When the pinch zoom is performed.
|
||||
• When the double-tap zoom is performed.
|
||||
• When the `zoomLevel` property is changed.
|
||||
|
||||
The [PdfZoomDetails](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfZoomDetails-class.html) will return the `oldZoomLevel` title and `newZoomLevel` values. The following code example explains the same.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Container(
|
||||
child: SfPdfViewer.network(
|
||||
'http://ebooks.syncfusion.com/downloads/flutter-succinctly/flutter-succinctly.pdf',
|
||||
onZoomLevelChanged: (PdfZoomDetails details) {
|
||||
print(details.newZoomLevel);
|
||||
},
|
||||
)));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -0,0 +1,236 @@
|
|||
---
|
||||
layout: post
|
||||
title: Page navigation in Flutter PDF Viewer widget | Syncfusion
|
||||
description: Learn here all about page navigation feature of Syncfusion Flutter PDF Viewer (SfPdfViewer) widget and more.
|
||||
platform: Flutter
|
||||
control: SfPdfViewer
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Page navigation in Flutter PDF Viewer (SfPdfViewer)
|
||||
|
||||
Navigate to the desired pages instantly either by using the page navigation dialog or the controller methods programmatically. If the desired page doesn’t exist, then the navigation will not happen, and the older page will be retained.
|
||||
|
||||
|
||||
|
||||
## Navigate to the desired page programmatically
|
||||
|
||||
The [jumpToPage](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/jumpToPage.html) controller method helps you to navigate to the specified page number in a PDF document. The following code example explains the same
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late PdfViewerController _pdfViewerController;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_pdfViewerController = PdfViewerController();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Syncfusion Flutter PdfViewer'),
|
||||
actions: <Widget>[
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.arrow_drop_down_circle,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () {
|
||||
_pdfViewerController.jumpToPage(5);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SfPdfViewer.network(
|
||||
'http://ebooks.syncfusion.com/downloads/flutter-succinctly/flutter-succinctly.pdf',
|
||||
controller: _pdfViewerController,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Navigate to the next and previous page programmatically
|
||||
|
||||
The [nextPage](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/nextPage.html) and [previousPage](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/previousPage.html) controller methods help you to navigate to the next and previous page of a PDF document. The following code example explains the same.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late PdfViewerController _pdfViewerController;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_pdfViewerController = PdfViewerController();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Syncfusion Flutter PdfViewer'),
|
||||
actions: <Widget>[
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.keyboard_arrow_up,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () {
|
||||
_pdfViewerController.previousPage();
|
||||
},
|
||||
),
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.keyboard_arrow_down,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () {
|
||||
_pdfViewerController.nextPage();
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SfPdfViewer.network(
|
||||
'http://ebooks.syncfusion.com/downloads/flutter-succinctly/flutter-succinctly.pdf',
|
||||
controller: _pdfViewerController,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Navigate to the first and last page programmatically
|
||||
|
||||
The [firstPage](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/firstPage.html) and [lastPage](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/lastPage.html) controller methods help you to navigate to the first and last page of a PDF document. The following code example explains the same.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late PdfViewerController _pdfViewerController;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_pdfViewerController = PdfViewerController();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Syncfusion Flutter PdfViewer'),
|
||||
actions: <Widget>[
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.first_page,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () {
|
||||
_pdfViewerController.firstPage();
|
||||
},
|
||||
),
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.last_page,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () {
|
||||
_pdfViewerController.lastPage();
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SfPdfViewer.network(
|
||||
'http://ebooks.syncfusion.com/downloads/flutter-succinctly/flutter-succinctly.pdf',
|
||||
controller: _pdfViewerController,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Navigate to the desired offset programmatically
|
||||
|
||||
The [jumpTo](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/jumpTo.html) controller method moves the scroll position of the `SfPdfViewer` to the specified horizontal and vertical offset. If the specified offset value is wrong, then the scroll will not happen, and the older position will be retained.
|
||||
|
||||
N> Both the `xOffset` and `yOffset` are optional parameters and if the offset values are not provided, then the `SfPdfViewer` will be scrolled or moved to the default position (0, 0).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late PdfViewerController _pdfViewerController;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_pdfViewerController = PdfViewerController();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Syncfusion Flutter PdfViewer'),
|
||||
actions: <Widget>[
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.arrow_drop_down_circle,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () {
|
||||
_pdfViewerController.jumpTo(yOffset:1500);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SfPdfViewer.network(
|
||||
'http://ebooks.syncfusion.com/downloads/flutter-succinctly/flutter-succinctly.pdf',
|
||||
controller: _pdfViewerController,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Callbacks
|
||||
|
||||
The `SfPdfViewer` page navigation supports the [PdfPageChangedCallback](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfPageChangedCallback.html) to notify the page changes.
|
||||
|
||||
### Page changed callback
|
||||
|
||||
The [onPageChanged](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onPageChanged.html) callback triggers when the page is changed in the `SfPdfViewer`. That is,
|
||||
|
||||
* When moved using the touch scroll or scroll head.
|
||||
* When the page navigation is performed programmatically using the [jumpToPage](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/jumpToPage.html) controller method.
|
||||
* When scrolling is performed programmatically using the [jumpTo](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/jumpTo.html) controller method.
|
||||
* When bookmark navigation is performed programmatically using the [jumpToBookmark](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/jumpToBookmark.html) controller method.
|
||||
|
||||
The [PdfPageChangedDetails](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfPageChangedDetails-class.html) will return the `oldPageNumber`, `newPageNumber`, `isFirstPage` and `isLastPage` values. The following code example explains the same.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Container(
|
||||
child: SfPdfViewer.network(
|
||||
'http://ebooks.syncfusion.com/downloads/flutter-succinctly/flutter-succinctly.pdf',
|
||||
onPageChanged: (PdfPageChangedDetails details) {
|
||||
print(details.newPageNumber);
|
||||
print(details.isFirstPage);
|
||||
},
|
||||
)));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -0,0 +1,810 @@
|
|||
---
|
||||
layout: post
|
||||
title: Text search in Flutter PDF Viewer widget | Syncfusion
|
||||
description: Learn here all about text search feature of Syncfusion Flutter PDF Viewer (SfPdfViewer) widget and more.
|
||||
platform: Flutter
|
||||
control: SfPdfViewer
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Text search in Flutter PDF Viewer (SfPdfViewer)
|
||||
|
||||
The [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) allows you to find texts in the PDF document and navigate to all its occurrences.
|
||||
|
||||
## Initiate text search and retrieve results
|
||||
|
||||
The [searchText](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/searchText.html) controller method is used to initiate the text search and it takes the text to be searched and [TextSearchOption](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/TextSearchOption-class.html) as parameters. This method searches for the text and highlights all the instances of the texts in the document and returns the [PdfTextSearchResult](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSearchResult-class.html) object holding the result values such as total instance count, current highlighted instance index, and more. The [PdfTextSearchResult](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSearchResult-class.html) object will also help you to navigate to the different searched text instances available and cancel the search operation as well.
|
||||
|
||||
To differentiate the highlighted texts, the current text instance highlight color will be dark, while the rest of the instances will be light. The following code example explains how to perform the text search and retrieve the results for the same.
|
||||
|
||||
N> Import **'package:syncfusion_flutter_pdf/pdf.dart'** in the Dart code if you use the [TextSearchOption](https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/TextSearchOption-class.html) parameter.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late PdfViewerController _pdfViewerController;
|
||||
late PdfTextSearchResult _searchResult;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_pdfViewerController = PdfViewerController();
|
||||
_searchResult = PdfTextSearchResult();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Syncfusion Flutter PDF Viewer'),
|
||||
actions: <Widget>[
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.search,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () async {
|
||||
_searchResult = await _pdfViewerController.searchText('the',
|
||||
searchOption: TextSearchOption.caseSensitive);
|
||||
print(
|
||||
'Total instance count: ${_searchResult.totalInstanceCount}');
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SfPdfViewer.network(
|
||||
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
|
||||
controller: _pdfViewerController));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Navigate to the next and previous instance
|
||||
|
||||
The [nextInstance](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSearchResult/nextInstance.html) and [previousInstance](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSearchResult/previousInstance.html) methods in the [PdfSearchTextResult](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSearchResult-class.html) class help you to navigate to the next and previous search text instance in the PDF document. The following code example explains the same.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
|
||||
late PdfViewerController _pdfViewerController;
|
||||
late PdfTextSearchResult _searchResult;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_pdfViewerController = PdfViewerController();
|
||||
_searchResult = PdfTextSearchResult();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Syncfusion Flutter PDF Viewer'),
|
||||
actions: <Widget>[
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.search,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () async {
|
||||
_searchResult = await _pdfViewerController.searchText('the',
|
||||
searchOption: TextSearchOption.caseSensitive);
|
||||
setState(() {});
|
||||
},
|
||||
),
|
||||
Visibility(
|
||||
visible: _searchResult.hasResult,
|
||||
child: IconButton(
|
||||
icon: Icon(
|
||||
Icons.keyboard_arrow_up,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () {
|
||||
_searchResult.previousInstance();
|
||||
},
|
||||
),
|
||||
),
|
||||
Visibility(
|
||||
visible: _searchResult.hasResult,
|
||||
child: IconButton(
|
||||
icon: Icon(
|
||||
Icons.keyboard_arrow_down,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () {
|
||||
_searchResult.nextInstance();
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SfPdfViewer.network(
|
||||
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
|
||||
controller:_pdfViewerController));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Cancel text search
|
||||
|
||||
The [clear](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSearchResult/clear.html) method in the [PdfSearchTextResult](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSearchResult-class.html) class is used to cancel the text search operation. When the text search is in progress, this method can be used to cancel the same and clear all the highlighted texts in the `SfPdfViewer`. The following code example explains the same
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late PdfViewerController _pdfViewerController;
|
||||
late PdfTextSearchResult _searchResult;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_pdfViewerController = PdfViewerController();
|
||||
_searchResult = PdfTextSearchResult();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Syncfusion Flutter PDF Viewer'),
|
||||
actions: <Widget>[
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.search,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () async {
|
||||
_searchResult = await _pdfViewerController.searchText('the',
|
||||
searchOption: TextSearchOption.caseSensitive);
|
||||
setState(() {});
|
||||
},
|
||||
),
|
||||
Visibility(
|
||||
visible: _searchResult.hasResult,
|
||||
child: IconButton(
|
||||
icon: Icon(
|
||||
Icons.clear,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_searchResult.clear();
|
||||
});
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SfPdfViewer.network(
|
||||
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
|
||||
controller:_pdfViewerController));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Customize the search text highlight color
|
||||
|
||||
The colors in which the current instance and other instances are highlighted can be customized with the help of [searchTextHighlightColor](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/searchTextHighlightColor.html) property. The default highlight color is **Orange** [Color(0xFFE56E00)] and the current instance highlight color opacity (w.r.t this property) will be higher than the other instances. By default, the current instance highlight color opacity will be 60% and the other instances color opacity will be 20%.
|
||||
|
||||
The following code example explains how to customize the search text highlight color.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late PdfViewerController _pdfViewerController;
|
||||
late PdfTextSearchResult _searchResult;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_pdfViewerController = PdfViewerController();
|
||||
_searchResult = PdfTextSearchResult();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Syncfusion Flutter PDF Viewer'),
|
||||
actions: <Widget>[
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.search,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () async {
|
||||
_searchResult = await _pdfViewerController.searchText('the',
|
||||
searchOption: TextSearchOption.caseSensitive);
|
||||
},
|
||||
), ],
|
||||
),
|
||||
body: SfPdfViewer.network(
|
||||
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
|
||||
controller:_pdfViewerController,
|
||||
searchTextHighlightColor: Colors.blue));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## How to identify if there is no instance found for the text being searched?
|
||||
|
||||
The [totalInstanceCount](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSearchResult/totalInstanceCount.html) property in the [PdfSearchTextResult](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSearchResult-class.html) object can be used to identify if no instance of the searched text is found in the PDF document. That is, if the [totalInstanceCount](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSearchResult/totalInstanceCount.html) returns value 0, then there is no matching instance found for the searched text. The following code explains the same.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late PdfViewerController _pdfViewerController;
|
||||
late PdfTextSearchResult _searchResult;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_pdfViewerController = PdfViewerController();
|
||||
_searchResult = PdfTextSearchResult();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Syncfusion Flutter PDF Viewer'),
|
||||
actions: <Widget>[
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.search,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () async {
|
||||
_searchResult = await _pdfViewerController.searchText('pdf',
|
||||
searchOption: TextSearchOption.caseSensitive);
|
||||
if (_searchResult.totalInstanceCount == 0) {
|
||||
print('No matches found.');
|
||||
}
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SfPdfViewer.network(
|
||||
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
|
||||
controller: _pdfViewerController));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## How to identify if a complete cycle of text search is completed?
|
||||
|
||||
The [totalInstanceCount](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSearchResult/totalInstanceCount.html) and [currentInstanceIndex](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSearchResult/currentInstanceIndex.html) properties in the [PdfSearchTextResult](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSearchResult-class.html) object can be used to identify if a complete cycle of text search is completed in the PDF document. That is, when the [nextInstance](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSearchResult/nextInstance.html) method is called, you can check if the `currentInstanceIndex` equals the `totalInstanceCount`, then it can be considered that a complete cycle of text search is completed. The following code example explains the same.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late PdfViewerController _pdfViewerController;
|
||||
late PdfTextSearchResult _searchResult;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_pdfViewerController = PdfViewerController();
|
||||
_searchResult = PdfTextSearchResult();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Syncfusion Flutter PDF Viewer'),
|
||||
actions: <Widget>[
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.search,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () async {
|
||||
_searchResult = await _pdfViewerController.searchText('the',
|
||||
searchOption: TextSearchOption.caseSensitive);
|
||||
setState(() {});
|
||||
},
|
||||
),
|
||||
Visibility(
|
||||
visible: _searchResult.hasResult,
|
||||
child: IconButton(
|
||||
icon: Icon(
|
||||
Icons.clear,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_searchResult.clear();
|
||||
});
|
||||
},
|
||||
),
|
||||
),
|
||||
Visibility(
|
||||
visible: _searchResult.hasResult,
|
||||
child: IconButton(
|
||||
icon: Icon(
|
||||
Icons.keyboard_arrow_up,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () {
|
||||
_searchResult.previousInstance();
|
||||
},
|
||||
),
|
||||
),
|
||||
Visibility(
|
||||
visible: _searchResult.hasResult,
|
||||
child: IconButton(
|
||||
icon: Icon(
|
||||
Icons.keyboard_arrow_down,
|
||||
color: Colors.white,
|
||||
),
|
||||
onPressed: () {
|
||||
_searchResult.nextInstance();
|
||||
if(_searchResult.currentInstanceIndex == _searchResult.totalInstanceCount){
|
||||
print('No more occurrences found.');
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SfPdfViewer.network(
|
||||
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
|
||||
controller:_pdfViewerController));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## How to create and display a custom search toolbar with the search features?
|
||||
|
||||
With the options available in the `SfPdfViewer` text search, you can easily create and display a custom search toolbar with the search features. The following code example explains the same.
|
||||
|
||||
In this example, initially the main toolbar or AppBar will be displayed with a search button and on pressing that, a custom search toolbar will be displayed with the following options,
|
||||
|
||||
* **Back button** - To close the search toolbar.
|
||||
* **Text field entry** - To enter the text to be searched in the document.
|
||||
* **Close button** - To cancel the search progress.
|
||||
* **Instances information text** - Displays the current instance index and total instances count of the searched text.
|
||||
* **Previous instance search navigation button** - To navigate to the previous match instance.
|
||||
* **Next instance search navigation button** - To navigate to the next match instance.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';
|
||||
|
||||
void main() {
|
||||
runApp(MaterialApp(
|
||||
debugShowCheckedModeBanner: false,
|
||||
home: HomePage(),
|
||||
));
|
||||
}
|
||||
|
||||
/// Represents the Homepage for Navigation
|
||||
class HomePage extends StatefulWidget {
|
||||
@override
|
||||
_HomePage createState() => _HomePage();
|
||||
}
|
||||
|
||||
class _HomePage extends State<HomePage> {
|
||||
final PdfViewerController _pdfViewerController = PdfViewerController();
|
||||
final GlobalKey<SearchToolbarState> _textSearchKey = GlobalKey();
|
||||
late bool _showToolbar;
|
||||
late bool _showScrollHead;
|
||||
|
||||
/// Ensure the entry history of Text search.
|
||||
LocalHistoryEntry? _historyEntry;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_showToolbar = false;
|
||||
_showScrollHead = true;
|
||||
super.initState();
|
||||
}
|
||||
|
||||
/// Ensure the entry history of text search.
|
||||
void _ensureHistoryEntry() {
|
||||
if (_historyEntry == null) {
|
||||
final ModalRoute<dynamic>? route = ModalRoute.of(context);
|
||||
if (route != null) {
|
||||
_historyEntry = LocalHistoryEntry(onRemove: _handleHistoryEntryRemoved);
|
||||
route.addLocalHistoryEntry(_historyEntry!);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Remove history entry for text search.
|
||||
void _handleHistoryEntryRemoved() {
|
||||
_textSearchKey.currentState?.clearSearch();
|
||||
setState(() {
|
||||
_showToolbar = false;
|
||||
});
|
||||
_historyEntry = null;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: _showToolbar
|
||||
? AppBar(
|
||||
flexibleSpace: SafeArea(
|
||||
child: SearchToolbar(
|
||||
key: _textSearchKey,
|
||||
showTooltip: true,
|
||||
controller: _pdfViewerController,
|
||||
onTap: (Object toolbarItem) async {
|
||||
if (toolbarItem.toString() == 'Cancel Search') {
|
||||
setState(() {
|
||||
_showToolbar = false;
|
||||
_showScrollHead = true;
|
||||
if (Navigator.canPop(context)) {
|
||||
Navigator.maybePop(context);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (toolbarItem.toString() == 'noResultFound') {
|
||||
setState(() {
|
||||
_textSearchKey.currentState?._showToast = true;
|
||||
});
|
||||
await Future.delayed(Duration(seconds: 1));
|
||||
setState(() {
|
||||
_textSearchKey.currentState?._showToast = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
automaticallyImplyLeading: false,
|
||||
backgroundColor: Color(0xFFFAFAFA),
|
||||
)
|
||||
: AppBar(
|
||||
title: Text(
|
||||
'Syncfusion Flutter PDF Viewer',
|
||||
style: TextStyle(color: Colors.black87),
|
||||
),
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.search,
|
||||
color: Colors.black87,
|
||||
),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_showScrollHead = false;
|
||||
_showToolbar = true;
|
||||
_ensureHistoryEntry();
|
||||
});
|
||||
},
|
||||
),
|
||||
],
|
||||
automaticallyImplyLeading: false,
|
||||
backgroundColor: Color(0xFFFAFAFA),
|
||||
),
|
||||
body: Stack(
|
||||
children: [
|
||||
SfPdfViewer.network(
|
||||
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
|
||||
controller: _pdfViewerController,
|
||||
canShowScrollHead: _showScrollHead,
|
||||
),
|
||||
Visibility(
|
||||
visible: _textSearchKey.currentState?._showToast ?? false,
|
||||
child: Align(
|
||||
alignment: Alignment.center,
|
||||
child: Flex(
|
||||
direction: Axis.horizontal,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
Container(
|
||||
padding:
|
||||
EdgeInsets.only(left: 15, top: 7, right: 15, bottom: 7),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.grey[600],
|
||||
borderRadius: BorderRadius.all(
|
||||
Radius.circular(16.0),
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
'No result',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontFamily: 'Roboto',
|
||||
fontSize: 16,
|
||||
color: Colors.white),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Signature for the [SearchToolbar.onTap] callback.
|
||||
typedef SearchTapCallback = void Function(Object item);
|
||||
|
||||
/// SearchToolbar widget
|
||||
class SearchToolbar extends StatefulWidget {
|
||||
///it describe the search toolbar constructor
|
||||
SearchToolbar({
|
||||
this.controller,
|
||||
this.onTap,
|
||||
this.showTooltip = true,
|
||||
Key? key,
|
||||
}) : super(key: key);
|
||||
|
||||
/// Indicates whether the tooltip for the search toolbar items need to be shown or not.
|
||||
final bool showTooltip;
|
||||
|
||||
/// An object that is used to control the [SfPdfViewer].
|
||||
final PdfViewerController? controller;
|
||||
|
||||
/// Called when the search toolbar item is selected.
|
||||
final SearchTapCallback? onTap;
|
||||
|
||||
@override
|
||||
SearchToolbarState createState() => SearchToolbarState();
|
||||
}
|
||||
|
||||
/// State for the SearchToolbar widget
|
||||
class SearchToolbarState extends State<SearchToolbar> {
|
||||
int _searchTextLength = 0;
|
||||
|
||||
/// Indicates whether search toolbar items need to be shown or not.
|
||||
bool _showItem = false;
|
||||
|
||||
/// Indicates whether search toast need to be shown or not.
|
||||
bool _showToast = false;
|
||||
|
||||
///An object that is used to retrieve the current value of the TextField.
|
||||
final TextEditingController _editingController = TextEditingController();
|
||||
|
||||
/// An object that is used to retrieve the text search result.
|
||||
PdfTextSearchResult _pdfTextSearchResult = PdfTextSearchResult();
|
||||
|
||||
///An object that is used to obtain keyboard focus and to handle keyboard events.
|
||||
FocusNode? focusNode;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
focusNode = FocusNode();
|
||||
focusNode?.requestFocus();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
// Clean up the focus node when the Form is disposed.
|
||||
focusNode?.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
///Clear the text search result
|
||||
void clearSearch() {
|
||||
_pdfTextSearchResult.clear();
|
||||
}
|
||||
|
||||
///Display the Alert dialog to search from the beginning
|
||||
void _showSearchAlertDialog(BuildContext context) {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (BuildContext context) {
|
||||
return AlertDialog(
|
||||
insetPadding: EdgeInsets.all(0),
|
||||
title: Text('Search Result'),
|
||||
content: Container(
|
||||
width: 328.0,
|
||||
child: Text(
|
||||
'No more occurrences found. Would you like to continue to search from the beginning?')),
|
||||
actions: <Widget>[
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_pdfTextSearchResult.nextInstance();
|
||||
});
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
child: Text(
|
||||
'YES',
|
||||
style: TextStyle(
|
||||
color: Color(0x00000000).withOpacity(0.87),
|
||||
fontFamily: 'Roboto',
|
||||
fontStyle: FontStyle.normal,
|
||||
fontWeight: FontWeight.w500,
|
||||
decoration: TextDecoration.none),
|
||||
),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_pdfTextSearchResult.clear();
|
||||
_editingController.clear();
|
||||
_showItem = false;
|
||||
focusNode?.requestFocus();
|
||||
});
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
child: Text(
|
||||
'NO',
|
||||
style: TextStyle(
|
||||
color: Color(0x00000000).withOpacity(0.87),
|
||||
fontFamily: 'Roboto',
|
||||
fontStyle: FontStyle.normal,
|
||||
fontWeight: FontWeight.w500,
|
||||
decoration: TextDecoration.none),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
children: <Widget>[
|
||||
Material(
|
||||
color: Colors.transparent,
|
||||
child: IconButton(
|
||||
icon: Icon(
|
||||
Icons.arrow_back,
|
||||
color: Color(0x00000000).withOpacity(0.54),
|
||||
size: 24,
|
||||
),
|
||||
onPressed: () {
|
||||
widget.onTap?.call('Cancel Search');
|
||||
_editingController.clear();
|
||||
_pdfTextSearchResult.clear();
|
||||
},
|
||||
),
|
||||
),
|
||||
Flexible(
|
||||
child: TextFormField(
|
||||
style: TextStyle(
|
||||
color: Color(0x00000000).withOpacity(0.87), fontSize: 16),
|
||||
enableInteractiveSelection: false,
|
||||
focusNode: focusNode,
|
||||
keyboardType: TextInputType.text,
|
||||
textInputAction: TextInputAction.search,
|
||||
controller: _editingController,
|
||||
decoration: InputDecoration(
|
||||
border: InputBorder.none,
|
||||
hintText: 'Find...',
|
||||
hintStyle: TextStyle(color: Color(0x00000000).withOpacity(0.34)),
|
||||
),
|
||||
onChanged: (text) {
|
||||
if (_searchTextLength < _editingController.value.text.length) {
|
||||
setState(() {});
|
||||
_searchTextLength = _editingController.value.text.length;
|
||||
}
|
||||
if (_editingController.value.text.length < _searchTextLength) {
|
||||
setState(() {
|
||||
_showItem = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
onFieldSubmitted: (String value) async {
|
||||
_pdfTextSearchResult =
|
||||
await widget.controller!.searchText(_editingController.text);
|
||||
if (_pdfTextSearchResult.totalInstanceCount == 0) {
|
||||
widget.onTap?.call('noResultFound');
|
||||
} else {
|
||||
setState(() {
|
||||
_showItem = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
Visibility(
|
||||
visible: _editingController.text.isNotEmpty,
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: IconButton(
|
||||
icon: Icon(
|
||||
Icons.clear,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.54),
|
||||
size: 24,
|
||||
),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_editingController.clear();
|
||||
_pdfTextSearchResult.clear();
|
||||
widget.controller!.clearSelection();
|
||||
_showItem = false;
|
||||
focusNode!.requestFocus();
|
||||
});
|
||||
widget.onTap!.call('Clear Text');
|
||||
},
|
||||
tooltip: widget.showTooltip ? 'Clear Text' : null,
|
||||
),
|
||||
),
|
||||
),
|
||||
Visibility(
|
||||
visible: _showItem,
|
||||
child: Row(
|
||||
children: [
|
||||
Text(
|
||||
'${_pdfTextSearchResult.currentInstanceIndex}',
|
||||
style: TextStyle(
|
||||
color: Color.fromRGBO(0, 0, 0, 0.54).withOpacity(0.87),
|
||||
fontSize: 16),
|
||||
),
|
||||
Text(
|
||||
' of ',
|
||||
style: TextStyle(
|
||||
color: Color.fromRGBO(0, 0, 0, 0.54).withOpacity(0.87),
|
||||
fontSize: 16),
|
||||
),
|
||||
Text(
|
||||
'${_pdfTextSearchResult.totalInstanceCount}',
|
||||
style: TextStyle(
|
||||
color: Color.fromRGBO(0, 0, 0, 0.54).withOpacity(0.87),
|
||||
fontSize: 16),
|
||||
),
|
||||
Material(
|
||||
color: Colors.transparent,
|
||||
child: IconButton(
|
||||
icon: Icon(
|
||||
Icons.navigate_before,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.54),
|
||||
size: 24,
|
||||
),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_pdfTextSearchResult.previousInstance();
|
||||
});
|
||||
widget.onTap!.call('Previous Instance');
|
||||
},
|
||||
tooltip: widget.showTooltip ? 'Previous' : null,
|
||||
),
|
||||
),
|
||||
Material(
|
||||
color: Colors.transparent,
|
||||
child: IconButton(
|
||||
icon: Icon(
|
||||
Icons.navigate_next,
|
||||
color: Color.fromRGBO(0, 0, 0, 0.54),
|
||||
size: 24,
|
||||
),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
if (_pdfTextSearchResult.currentInstanceIndex ==
|
||||
_pdfTextSearchResult.totalInstanceCount &&
|
||||
_pdfTextSearchResult.currentInstanceIndex != 0 &&
|
||||
_pdfTextSearchResult.totalInstanceCount != 0) {
|
||||
_showSearchAlertDialog(context);
|
||||
} else {
|
||||
widget.controller!.clearSelection();
|
||||
_pdfTextSearchResult.nextInstance();
|
||||
}
|
||||
});
|
||||
widget.onTap!.call('Next Instance');
|
||||
},
|
||||
tooltip: widget.showTooltip ? 'Next' : null,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -146,7 +146,7 @@ Triggers when tapping the legend item. The [`onLegendTapped`](https://pub.dev/do
|
|||
|
||||
Triggers while selection changes. Here you can customize the selectedColor, unselectedColor, selectedBorderColor, selectedBorderWidth, unselectedBorderColor, and unselectedBorderWidth properties. The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/onSelectionChanged.html) Callback contains the following arguments.
|
||||
|
||||
* [`seriesRenderer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/series.html) - specifies current series.
|
||||
* [`seriesRenderer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/seriesRenderer.html) - specifies current series.
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/pointIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/pointIndex.html) - specifies the current point index.
|
||||
* [`selectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/selectedColor.html) - specifies color of the selected data points or series.
|
||||
|
|
@ -223,3 +223,31 @@ N> This callback will not be called, when the builder is specified for data labe
|
|||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## onPointTapped
|
||||
|
||||
Triggers when tapping the series point. The [`onPointTapped`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/onPointTapped.html) Callback contains the following arguments.
|
||||
|
||||
* [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/seriesIndex.html) - specifies the current series index.
|
||||
* [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/pointIndex.html) - specifies the current point index.
|
||||
* [`dataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/dataPoints.html) - holds the data point collection.
|
||||
* [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PointTapArgs/viewportPointIndex.html) - to get the viewport index value of the tapped data label.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfPyramidChart(
|
||||
onPointTapped: (PointTapArgs args){
|
||||
print(args.seriesIndex);
|
||||
print(args.pointIndex);
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,10 +17,10 @@ Data label can be added to a chart series by enabling the [`isVisible`](https://
|
|||
* [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/alignment.html) - aligns the data label text to [`near`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment-class.html), [`center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment-class.html) and [`far`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment-class.html).
|
||||
* [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/textStyle.html) - used to change the data label text color, size, font family, font style, and font weight.
|
||||
* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the color of the data label.
|
||||
* [`fontFamily`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontFamily.html) - used to change the font family for the data label.
|
||||
* [`fontStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontStyle.html) - used to change the font style for the data label.
|
||||
* [`fontWeight`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontWeight.html) - used to change the font weight for the data label.
|
||||
* [`fontSize`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TextStyle/fontSize.html) - used to change the font size for the data label.
|
||||
* [`fontFamily`](https://api.flutter.dev/flutter/painting/TextStyle/fontFamily.html) - used to change the font family for the data label.
|
||||
* [`fontStyle`](https://api.flutter.dev/flutter/painting/TextStyle/fontStyle.html) - used to change the font style for the data label.
|
||||
* [`fontWeight`](https://api.flutter.dev/flutter/painting/TextStyle/fontWeight.html) - used to change the font weight for the data label.
|
||||
* [`fontSize`](https://api.flutter.dev/flutter/painting/TextStyle/fontSize.html) - used to change the font size for the data label.
|
||||
* [`margin`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/margin.html) - used to change the margin size for data labels.
|
||||
* [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/opacity.html) - used to control the transparency of the data label.
|
||||
* [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) - used to align the Pyramid data label positions. The available options to customize the positions are [`outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html), [`auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html), [`top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html), [`bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html) and [`middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment-class.html).
|
||||
|
|
@ -240,4 +240,10 @@ Data label and its connector line in the Pyramid charts for the point value 0 ca
|
|||
}
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
|
||||
### Data label saturation color
|
||||
|
||||
If the user didn’t provide text color to the data label, then by default, the saturation color is applied to the data label text. i.e., if the data points background color intensity is dark, then the data label will render in white color (#FFFFFF) and if the data points background color intensity is light, data label will render in black color (#000000).
|
||||
|
||||
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 14 KiB |
Двоичные данные
Flutter/pyramid-chart/images/overview/overview.png
Двоичные данные
Flutter/pyramid-chart/images/overview/overview.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 40 KiB После Ширина: | Высота: | Размер: 38 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 62 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 67 KiB |
|
|
@ -11,7 +11,7 @@ documentation: ug
|
|||
|
||||
Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget is written natively in Dart for creating beautiful and high-performance Pyramid chart, which are used to craft high-quality applications using Flutter.
|
||||
|
||||
|
||||
|
||||
|
||||
## Key Features
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,88 @@
|
|||
---
|
||||
layout: post
|
||||
title: RTL support in Flutter Pyramid Chart widget | Syncfusion
|
||||
description: Learn here about the RTL support in Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Right To Left (RTL) in Flutter Pyramid Chart (SfPyramidChart)
|
||||
|
||||
Pyramid chart supports right to left rendering. But series and other chart elements rendering will be the same for both LTR and RTL. Only, the legend rendering will be changed.
|
||||
|
||||
## RLT rendering ways
|
||||
|
||||
Right to left rendering can be switched in the following ways:
|
||||
|
||||
### Wrapping the SfPyramidChart with Directionality widget
|
||||
|
||||
To change the rendering direction from right to left, you can wrap the [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [TextDirection.rtl](https://api.flutter.dev/flutter/dart-ui/TextDirection-class.html).
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Directionality(
|
||||
textDirection: TextDirection.rtl,
|
||||
child: SfPyramidChart(
|
||||
//...
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
### Changing the locale to RTL languages
|
||||
|
||||
To change the chart rendering direction from right to left, you can change the [`locale`](https://api.flutter.dev/flutter/material/MaterialApp/locale.html) to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
localizationsDelegates: [
|
||||
GlobalMaterialLocalizations.delegate,
|
||||
GlobalWidgetsLocalizations.delegate,
|
||||
],
|
||||
supportedLocales: <Locale>[
|
||||
Locale('en'),
|
||||
Locale('ar'),
|
||||
// ... other locales the app supports
|
||||
],
|
||||
locale: Locale('ar'),
|
||||
home: Scaffold(
|
||||
body: SfPyramidChart(
|
||||
//...
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## RTL supported chart elements
|
||||
|
||||
Right to left rendering is effective only for the legend in the chart. Legend items will be rendered from right to left direction.
|
||||
|
||||
|
||||
|
||||
In addition, if you want to change the tooltip’s content, to look like it is rendering from right to left, then you can set the [`format`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/format.html) property in [`TooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) as `"point.y : point.x"`. By default, the tooltip format will be `"point.x : point.y"`.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
SfPyramidChart(
|
||||
tooltipBehavior: TooltipBehavior(
|
||||
enable: true,
|
||||
format: “point.y : point.x”
|
||||
)
|
||||
//...
|
||||
)
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Gauge Animation
|
||||
description: This article describes how to add and customizes the appearence gauge annotation of radial gauge control in flutter platform
|
||||
title: Animation in Flutter Radial Gauge widget | Syncfusion
|
||||
description: Learn here all about adding and customizing animation of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more.
|
||||
platform: flutter
|
||||
control: SfRadialGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Animation in radial gauge
|
||||
# Animation in Fluter Radial Gauge (SfRadialGauge)
|
||||
|
||||
## Initial animation
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Gauge Annotation
|
||||
description: This article describes how to add and customizes the appearence gauge annotation of radial gauge control in flutter platform
|
||||
title: Annotation in Flutter Radial Gauge widget | Syncfusion
|
||||
description: Learn here all about adding and customizing Annotation in Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more.
|
||||
platform: flutter
|
||||
control: SfRadialGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Annotation
|
||||
# Annotation in Fluter Radial Gauge (SfRadialGauge)
|
||||
|
||||
[`Radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) allows you to add multiple widgets such as text and image as an annotation to a specific point of interest in radial gauge.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Axis of Syncfusion Flutter Gauge
|
||||
description: This article describes how to add and customizes the appearence of radial axis and its element of radial gauge in flutter platform
|
||||
title: Axis in Flutter Radial Gauge widget | Syncfusion
|
||||
description: Learn here all about adding and customizing Axis of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more.
|
||||
platform: flutter
|
||||
control: SfRadialGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Radial axis customization
|
||||
# Axis in Fluter Radial Gauge (SfRadialGauge)
|
||||
|
||||
The [`radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) is a circular arc in which a set of values are displayed along a linear or custom scale based on the design requirements. Axis elements such as labels, ticks, and axis line can be easily customized with built-in properties.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
---
|
||||
layout: post
|
||||
title: Export in Flutter Radial Gauge widget | Syncfusion
|
||||
description: Learn here all about Export feature of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more.
|
||||
platform: flutter
|
||||
control: SfRadialGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Export in Fluter Radial Gauge (SfRadialGauge)
|
||||
|
||||
[`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) provides support to export the Radial Gauge as a PNG image or as PDF document.
|
||||
|
||||
## Export image
|
||||
|
||||
To export the Radial Gauge as a PNG image, we can get the image by calling [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method in repaint boundary.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
Future<void> _renderRadialGaugeImage() async {
|
||||
dart_ui.Image data = await _RadialGaugeKey.currentState!.toImage(pixelRatio: 3.0);
|
||||
final bytes = await data.toByteData(format: dart_ui.ImageByteFormat.png);
|
||||
if (data != null) {
|
||||
await Navigator.of(context).push(
|
||||
MaterialPageRoute(
|
||||
builder: (BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(),
|
||||
body: Center(
|
||||
child: Container(
|
||||
color: Colors.white,
|
||||
child: Image.memory(bytes!.buffer.asUint8List()),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
## Export PDF
|
||||
|
||||
Similar to the above way, we can also export the rendered chart as a PDF document. We create the pdf document using pdf component. This can be done in the application level itself and please find the code snippet below.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
Future<void> _renderRadialGaugePDF() async {
|
||||
var document = PdfDocument();
|
||||
PdfPage page = document.pages.add();
|
||||
dart_ui.Image data = await _RadialGaugeKey.currentState!.toImage(pixelRatio: 3.0);
|
||||
final bytes = await data.toByteData(format: dart_ui.ImageByteFormat.png);
|
||||
final Uint8List imageBytes =
|
||||
bytes!.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes);
|
||||
page.graphics
|
||||
.drawImage(PdfBitmap(imageBytes), Rect.fromLTWH(25, 50, 300, 300));
|
||||
var byteData = document.save();
|
||||
document.dispose();
|
||||
Directory directory = await getExternalStorageDirectory();
|
||||
String path = directory.path;
|
||||
File file = File('$path/Output.pdf');
|
||||
await file.writeAsBytes(byteData, flush: true);
|
||||
OpenFile.open('$path/Output.pdf');
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Started for Syncfusion Flutter Radial Gauge
|
||||
description: A quick tour to initial users about Syncfusion Radial Gauge widget for the Flutter platform. It provide overview on SfRadialGauge.
|
||||
title: Getting started with Flutter Radial Gauge widget | Syncfusion
|
||||
description: Learn here about getting started with Syncfusion Flutter Radial Gauge (SfRadialGauge) control, its elements, and more.
|
||||
platform: flutter
|
||||
control: SfRadialGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Getting Started with Flutter Radial Gauge (SfRadialGauge)
|
||||
# Getting started with Flutter Radial Gauge (SfRadialGauge)
|
||||
|
||||
This section explains the steps required to add the radial gauge and its elements such as title, axis, range, pointer and annotation. This section covers only basic features needed to know to get started with Syncfusion radial gauge.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Gauge Pointers
|
||||
description: This article describes how to add and customizes the appearence of pointers of radial gauge control in flutter platform
|
||||
title: Marker Pointer in Flutter Radial Gauge widget | Syncfusion
|
||||
description: Learn here all about adding and customizing Marker Pointer of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more.
|
||||
platform: flutter
|
||||
control: SfRadialGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Marker pointer customization
|
||||
# Marker pointer in Fluter Radial Gauge (SfRadialGauge)
|
||||
|
||||
Different types of markers are used to mark the pointer values in a scale. You can change the marker type using the [`markerType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerType.html) property.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Gauge Pointers
|
||||
description: This article describes how to add and customizes the appearence of pointers of radial gauge control in flutter platform
|
||||
title: Needle Pointer in Flutter Radial Gauge widget | Syncfusion
|
||||
description: Learn here all about adding and customizing Needle Pointer of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more.
|
||||
platform: flutter
|
||||
control: SfRadialGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Needle Pointer customization
|
||||
# Needle Pointer in Fluter Radial Gauge (SfRadialGauge)
|
||||
|
||||
[`Needle Pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer-class.html) contains three parts, namely needle, [`knob`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/knobStyle.html), and [`tail`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/tailStyle.html) and that can be placed on a gauge to mark the values.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Overview of Syncfusion Flutter Radial Gauge
|
||||
description: Learn the key features available in the Flutter Radial Gauge.
|
||||
title: About Flutter Radial Gauge widget | Syncfusion
|
||||
description: Learn here all about introduction of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget, its features, and more.
|
||||
platform: flutter
|
||||
control: SfRadialGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Overview
|
||||
# Flutter Radial Gauge (SfLinearGauge) Overview
|
||||
|
||||
Syncfusion flutter radial gauge is a data visualization widget, which is written in dart, to create modern, interactive, and animated gauge that is used to craft high-quality mobile app user interfaces using Flutter.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Gauge Pointers
|
||||
description: This article describes how to add and customizes the appearence of pointers of radial gauge control in flutter platform
|
||||
title: Pointers in Flutter Radial Gauge widget | Syncfusion
|
||||
description: Learn here all about adding and customizing Pointers of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more.
|
||||
platform: flutter
|
||||
control: SfRadialGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Pointers in radial gauge
|
||||
# Pointers in Fluter Radial Gauge (SfRadialGauge)
|
||||
|
||||
Pointer is used to indicate values on an axis. The radial gauge control has three types of pointers:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Gauge Title
|
||||
description: This article describes how to add and customize the appearance of radial gauge title in the flutter platform.
|
||||
title: Title in Flutter Radial Gauge widget | Syncfusion
|
||||
description: Learn here all about adding and customizing Title of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more.
|
||||
platform: flutter
|
||||
control: SfRadialGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Title
|
||||
# Title in Fluter Radial Gauge (SfRadialGauge)
|
||||
|
||||
You can define and customize the gauge title using the [`title`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/title.html) property of [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/text.html) property of [`GaugeTitle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle-class.html) is used to set text to the title.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Gauge Pointers
|
||||
description: This article describes how to add and customizes the appearence of pointers of radial gauge control in flutter platform
|
||||
title: Range Pointer in Flutter Radial Gauge widget | Syncfusion
|
||||
description: Learn here all about adding and customizing Range Pointer of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more.
|
||||
platform: flutter
|
||||
control: SfRadialGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Range Pointer customization
|
||||
# Range Pointer in Fluter Radial Gauge (SfRadialGauge)
|
||||
|
||||
A range pointer is an accenting line or shaded background range that can be placed on a gauge to mark the current value.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Gauge Range
|
||||
description: This article describes how to add and customizes the appearence of ranges of radial gauge control in flutter platform
|
||||
title: Ranges in Flutter Radial Gauge widget | Syncfusion
|
||||
description: Learn here all about adding and customizing Ranges of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more.
|
||||
platform: flutter
|
||||
control: SfRadialGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Gauge range customization
|
||||
# Ranges in Fluter Radial Gauge (SfRadialGauge)
|
||||
|
||||
Gauge range is a visual element that helps to quickly visualize where a value falls on the axis. The text can be easily annotated in range to improve the readability.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Syncfusion Flutter Gauge Pointers
|
||||
description: This article describes how to add and customizes the appearence of pointers of radial gauge control in flutter platform
|
||||
title: Widget Pointer in Flutter Radial Gauge widget | Syncfusion
|
||||
description: Learn here all about adding and customizing Widget Pointer of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more.
|
||||
platform: flutter
|
||||
control: SfRadialGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Widget pointer customization
|
||||
# Widget Pointer in Fluter Radial Gauge (SfRadialGauge)
|
||||
|
||||
[`Widgetpointer`] allows pointing the desired value with any widget in a scale. You can set the desired widget to its [`child`] property to annotate the pointer value.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,317 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting started with Flutter Signature Pad widget | Syncfusion
|
||||
description: Learn here about getting started with Syncfusion Flutter Signature Pad (SfSignaturePad) widget, its elements, and more.
|
||||
platform: Flutter
|
||||
control: SfSignaturePad
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Getting Started with Flutter SignaturePad (SfSignaturePad)
|
||||
This section explains the steps required to add the SignaturePad widget and its elements such as minimum and maximum stroke widths, stroke color and background color. This section also covers how to save the signature as image, clear the existing signature in SignaturePad and handle the [`onSignStart`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad/onSignStart.html) and [`onSignEnd`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad/onSignEnd.html) callbacks in the SignaturePad widget.
|
||||
|
||||
## Add Flutter SignaturePad 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 SignaturePad dependency to your pubspec.yaml file.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
dependencies:
|
||||
|
||||
syncfusion_flutter_signaturepad: ^xx.x.xx
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter SignaturePad`](https://pub.dev/packages/syncfusion_flutter_signaturepad) 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_signaturepad/signaturepad.dart';
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Initialize SignaturePad
|
||||
|
||||
After importing the package, initialize the SignaturePad widget as a child of any widget. Here, the SignaturePad widget is added as a child of the Container widget to get a position and size. Also, applied a background color to show the SignaturePad widget in white background.The default [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad/backgroundColor.html) is `Colors.transparent`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfSignaturePad(
|
||||
backgroundColor: Colors.grey[200],
|
||||
),
|
||||
height: 200,
|
||||
width: 300,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Customize signature stroke color
|
||||
|
||||
You can customize the stroke color of the SignaturePad widget by using the [`strokeColor`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad/strokeColor.html) property. The default stroke color for the dark theme is `Colors.white` and the default color for the light theme is `Colors.black`.
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfSignaturePad(
|
||||
strokeColor: Colors.green,
|
||||
backgroundColor: Colors.grey[200],
|
||||
),
|
||||
height: 200,
|
||||
width: 300,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Customize signature stroke width
|
||||
|
||||
The width of the signature stroke can be customized by setting the [`minimumStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad/minimumStrokeWidth.html) and [`maximumStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad/maximumStrokeWidth.html) properties. The [`minimumStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad/minimumStrokeWidth.html) defines the minimum thickness of the stroke and the [`maximumStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad/maximumStrokeWidth.html) defines the maximum thickness of the signature stroke. The stroke will be drawn in [`SfSignaturePad`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad/SfSignaturePad.html) based on the speed of the stroke gesture within its minimum and maximum stroke width ranges. So that the signature will be more realistic.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Container(
|
||||
child: SfSignaturePad(
|
||||
minimumStrokeWidth: 3.0,
|
||||
maximumStrokeWidth: 6.0,
|
||||
backgroundColor: Colors.grey[200],
|
||||
),
|
||||
height: 200,
|
||||
width: 300,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
## Save signatures as images in Mobile and Desktop platforms
|
||||
|
||||
You can save the signature drawn in the SignaturePad as an image using the [`toImage()`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePadState/toImage.html) method as shown in the below code example in Android, iOS and Desktop platforms. Since this [`toImage()`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePadState/toImage.html) method is defined in the state object of SignaturePad, you have to use a global key assigned to the SignaturePad instance to call this method. Optionally, the `pixelRatio` parameter may be used to set the pixel ratio of the image. The higher the pixel ratio value, the high-quality picture you get. The default value of the pixel ratio parameter is 1.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey();
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
children: [
|
||||
Container(
|
||||
child: SfSignaturePad(
|
||||
key: _signaturePadKey,
|
||||
backgroundColor: Colors.grey[200],
|
||||
),
|
||||
height: 200,
|
||||
width: 300,
|
||||
),
|
||||
RaisedButton(
|
||||
child: Text("Save As Image"),
|
||||
onPressed: () async {
|
||||
ui.Image image =
|
||||
await _signaturePadKey.currentState!.toImage();
|
||||
}),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Save signatures as images in web (Desktop browser)
|
||||
|
||||
This is similar to the mobile and desktop platforms. You can save the signature drawn in the SignaturePad as an image using the [`toImage()`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePadState/toImage.html) method as shown in the below code example in web platform (Desktop browser). Since this [`toImage()`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePadState/toImage.html) method is defined in the state object of SignaturePad, you have to use a global key assigned to the SignaturePad instance to call this method. Optionally, the `pixelRatio` parameter may be used to set the pixel ratio of the image. The higher the pixel ratio value, the high-quality picture you get. The default value of the pixel ratio parameter is 1.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey();
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
children: [
|
||||
Container(
|
||||
child: SfSignaturePad(
|
||||
key: _signaturePadKey,
|
||||
backgroundColor: Colors.grey[200],
|
||||
),
|
||||
height: 200,
|
||||
width: 300,
|
||||
),
|
||||
RaisedButton(
|
||||
child: Text("Save As Image"),
|
||||
onPressed: () async {
|
||||
ui.Image image =
|
||||
await _signaturePadKey.currentState!.toImage();
|
||||
}),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Save signatures as images in web (mobile browser)
|
||||
|
||||
You can save the signature drawn in the SignaturePad as an image using the [`renderToContext2D`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePadState/renderToContext2D.html) method as show in the below code snippet. Since this [`renderToContext2D()`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePadState/renderToContext2D.html) method is defined in the state object of SignaturePad, you have to use a global key assigned to the SignaturePad instance to call this method.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey();
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
children: [
|
||||
Container(
|
||||
child: SfSignaturePad(
|
||||
key: _signaturePadKey,
|
||||
backgroundColor: Colors.grey[200],
|
||||
),
|
||||
height: 200,
|
||||
width: 300,
|
||||
),
|
||||
RaisedButton(
|
||||
child: Text("Save As Image"),
|
||||
onPressed: () async {
|
||||
|
||||
//Get a html canvas context.
|
||||
final canvas = html.CanvasElement(width: 500, height: 500);
|
||||
final context = canvas.context2D;
|
||||
|
||||
//Get the signature in the canvas context.
|
||||
_signaturePadKey.currentState!.renderToContext2D(context);
|
||||
|
||||
//Get the image from the canvas context
|
||||
final blob = await canvas.toBlob('image/jpeg', 1.0);
|
||||
|
||||
//Save the image as Uint8List to use it in local device.
|
||||
final completer = Completer<Uint8List>();
|
||||
final reader = html.FileReader();
|
||||
reader.readAsArrayBuffer(blob);
|
||||
reader.onLoad.listen((_) => completer.complete(reader.result));
|
||||
Uint8List imageData = await completer.future;
|
||||
|
||||
}),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
N> Since Flutter uses two separate default web renderers, here we have two different code snippets to convert signatures to images in desktop and mobile browsers. Please refer to this Flutter [`web-renderers`](https://flutter.dev/docs/development/tools/web-renderers) page for more details.
|
||||
|
||||
## Clear the existing signature in SignaturePad
|
||||
You can clear the signature drawn in the SignaturePad using the [`clear()`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePadState/clear.html) method as show in the below code snippet. Since this [`clear()`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePadState/clear.html) method is defined in the state object of SignaturePad, you have to use a global key assigned to the SignaturePad instance to call this method.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey();
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
children: [
|
||||
Container(
|
||||
child: SfSignaturePad(
|
||||
key: _signaturePadKey,
|
||||
backgroundColor: Colors.grey[200],
|
||||
),
|
||||
height: 200,
|
||||
width: 300,
|
||||
),
|
||||
RaisedButton(
|
||||
child: Text("Save As Image"),
|
||||
onPressed: () async {
|
||||
ui.Image image =
|
||||
_signaturePadKey.currentState!.clear();
|
||||
}),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Handle onSignStart and onSignEnd callbacks
|
||||
|
||||
The widget allows to handle the onSignStart and onSignEnd callbacks for every strokes updated to the SignaturePad.The [`onSignStart`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad/onSignStart.html) callback will be called when the user starts signing on `SfSignaturePad`and the [`onSignEnd`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad/onSignEnd.html) callback will be called when the user completes signing on [`SfSignaturePad`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad/SfSignaturePad.html).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Container(
|
||||
child: SfSignaturePad(
|
||||
backgroundColor: Colors.grey[200],
|
||||
onSignStart: ()=> {
|
||||
print("Signature has been initiated in SignaturePad");
|
||||
},
|
||||
onSignEnd: ()=> {
|
||||
print("Signature has been completed in SignaturePad");
|
||||
},
|
||||
),
|
||||
height: 200,
|
||||
width: 300,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Started for Syncfusion Flutter SignaturePad | Syncfusion
|
||||
description: This section explains how to use the SignaturePad widget in flutter applciations and how to save a signature as image in flutter applciations.
|
||||
title: About Flutter Signature Pad widget | Syncfusion
|
||||
description: Learn here all about introduction of Syncfusion Flutter Signature Pad (SfSignaturePad) widget, its features, and more.
|
||||
platform: Flutter
|
||||
control: SfSignaturePad
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Overview of SignaturePad
|
||||
# Fluter Signature Pad (SfSignaturePad) Overview
|
||||
|
||||
The SignaturePad is a widget for capturing smooth and realistic signatures. This widget allows you to save signatures as images and sync them across devices and documents that need signatures. You can use your finger, pen, or mouse on a tablet, touchscreen, etc., to draw your own signature on this SignaturePad widget.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
---
|
||||
layout: post
|
||||
title: Trackball in Flutter Spark Charts widget | Syncfusion
|
||||
description: Learn here all about the trackball feature of Syncfusion Spark Charts widget, its features, and more.
|
||||
platform: flutter
|
||||
control: Sparkline
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
## Trackball in Flutter Spark Charts
|
||||
|
||||
Trackball feature displays the tooltip for the data points that are closer to the point where you touch on the chart area. This feature, especially can be used instead of data label feature when you cannot show data labels for all data points due to space constraint. This feature can be enabled using enable property of [`trackball`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/trackball.html). Trackball will be activated using [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartTrackball/activationMode.html) property. Once it is activated, it will appear in the UI and move based on your touch movement until you stop touching on the chart.
|
||||
|
||||
You can use the following properties to customize the appearance:
|
||||
|
||||
* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartTrackball/borderWidth.html) - Represent the border width.
|
||||
* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartTrackball/borderColor.html) - Represent the border color.
|
||||
* [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartTrackball/backgroundColor.html) - Represent the background color for trackball.
|
||||
* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartTrackball/width.html) - Represent the width of trackball line.
|
||||
* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartTrackball/color.html) - Represent the color of trackball line.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfSparkLineChart(
|
||||
axisLineWidth: 0,
|
||||
trackball: SparkChartTrackball(
|
||||
backgroundColor: Colors.red.withOpacity(0.8),
|
||||
borderColor: Colors.red.withOpacity(0.8),
|
||||
borderWidth: 2,
|
||||
color: Colors.red,
|
||||
labelStyle: TextStyle(color: Colors.black),
|
||||
activationMode: SparkChartActivationMode.tap
|
||||
),
|
||||
marker: SparkChartMarker(
|
||||
displayMode: SparkChartMarkerDisplayMode.all),
|
||||
data: <double>[
|
||||
5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8
|
||||
],
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
### Activation mode
|
||||
|
||||
The [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartTrackball/activationMode.html) property is used to restrict the visibility of trackball based on the touch actions. The default value of this property is [`ActivationMode.tap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartActivationMode-class.html).
|
||||
|
||||
* [`longPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartActivationMode-class.html) - Activates trackball only when performing the long press action.
|
||||
* [`tap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartActivationMode-class.html) - Activates trackball only when performing tap action.
|
||||
* [`doubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartActivationMode-class.html) - Activates trackball only when performing double tap action.
|
||||
|
||||
{% highlight dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SfSparkAreaChart(
|
||||
trackball: SparkChartTrackball(
|
||||
activationMode: SparkChartActivationMode.doubleTap
|
||||
),
|
||||
data: <double>[
|
||||
5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8
|
||||
],
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 12 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 13 KiB |
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче