This repository contains the Syncfusion Flutter UI widgets examples and the guide to use them.

Last update: Jan 4, 2023

Overview

Syncfusion Flutter examples

This repository contains awesome demos of Syncfusion Flutter UI widgets. This is the best place to check our widgets to get more insight into the usage of APIs. You can also check our widgets by installing the complete Flutter sample browser from Google Play Store or App Store, in which you can browse the demo for all the widgets and view the source code of each sample within the app itself.

Requirements to run the demo
Repository Structure
Widgets Catalog
License
Using the examples
Support and Feedback

Requirements to run the demo

IDE tools are Visual Studio code and Android studio.
Flutter SDK

Channel Version

Stable 2.0.2

Beta 2.0.2
Dart and Flutter add-ons for Visual Studio Code (available via the Visual studio code extension) in Android Studio it available in plugin preference.

Channel	Version
Stable	2.0.2
Beta	2.0.2

Repository Structure

The lib/samples directory contains the Flutter widget examples for each widget such as Charts, DataGrid, etc. All the examples can be deployed in Android, iOS, and web platforms.

Widgets Catalog

Widgets	Repository
Barcode Generator	Link
Calendar	Link
Charts	Link
DataGrid	Link
Date Range Picker	Link
Linear Gauge	Link
Maps	Link
PDF	Link
PDF Viewer	Link
Progress Bar	Link
Radial Gauge	Link
Range Selector	Link
Range Slider	Link
Slider	Link
Spark Charts	Link
Signature Pad	Link
Treemap	Link
XlsIO	Link

License

Syncfusion has no liability for any damage or consequence that may arise by the use or viewing of the examples. The examples are for demonstrative purposes and if you choose to use or access the examples you agree to not hold Syncfusion liable, in any form, for any damage that is related to use, accessing or otherwise viewing the examples. By accessing, viewing, or otherwise seeing the examples you acknowledge and agree Syncfusion’s examples will not allow you to seek injunctive relief in any form for any claim related to the sample. If you do not agree to this, do not view, access, utilize or otherwise do anything with Syncfusion’s examples.

Using the examples

Step 1

Unzip the downloaded flutter example archive.

Note: If you clone this repository ignore this step.

Step 2

Open the flutter example folder in an IDE.

Step 3

Run the following command to get the required packages.

$ flutter pub get

Step 4

Run your application either using F5 or Run > Start Debugging.

Get the demo application

Explore the full capabilities of our Flutter widgets on your device by installing our sample browser applications from the below app stores, and view samples code in GitHub.

Useful links

Take a look at the following to learn more about Syncfusion Flutter widgets:

Support and feedback

For any other queries, reach our Syncfusion support team or post the queries through the Community forums and submit a feature request or a bug through our Feedback portal.
To renew the subscription, click renew or contact our sales team at [email protected] | Toll Free: 1-888-9 DOTNET.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 20,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today we provide 1,000+ controls and frameworks for web (ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Blazor, mobile (Xamarin, Flutter, UWP, and JavaScript), and desktop development (WinForms, WPF, and UWP and WinUI). We provide ready-to deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

Comments

Unable to build on Flutter 1.20.0 (current dev)

Hello,

I would like to ask if the next release will include fix for this problem?

../../.pub-cache/hosted/pub.dartlang.org/syncfusion_flutter_core-18.1.59/lib/src/theme/barcodes_theme.dart:45:31: Error: Type 'DiagnosticableMixin' not found.
class SfBarcodeThemeData with DiagnosticableMixin {
                              ^^^^^^^^^^^^^^^^^^^
../../.pub-cache/hosted/pub.dartlang.org/syncfusion_flutter_core-18.1.59/lib/src/theme/calendar_theme.dart:45:32: Error: Type 'DiagnosticableMixin' not found.
class SfCalendarThemeData with DiagnosticableMixin {
                               ^^^^^^^^^^^^^^^^^^^

I've seen at other libraries dropping DiagnosticableMixin usage so I believe it may be done here too.

Thank you.

opened by jans-y 15

Initial trackball line position

Is it possible to set initial trackball line position? I need a line to be visible when chart renders for the first time. Currently, it is visible only when touching the chart. Ideally, I would love to set the trackball line position using index.

opened by anisalibegic 15
In Flutter 1.15.3-pre.37 : Upon Importing SyncFusion Charts Flutter build process throws error in _painter._calculateLocation(const Offset(null, null));
Flutter Version Info:

Flutter 1.15.3-pre.37 • channel master • https://github.com/flutter/flutter.git Framework • revision 6dc3bfaa98 (3 days ago) • 2020-02-07 18:28:02 -0800 Engine • revision 6158f03ef5 Tools • Dart 2.8.0 (build 2.8.0-dev.8.0 514a8d4c84)

Error Message :

Compiler message: /C:/Users/Sagar/AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/syncfusion_flutter_charts-17.4.46/lib/src/common/user_interaction/tooltip.dart:345:52: Error: Constant evaluation error: void hide() => _painter._calculateLocation(const Offset(null, null)); ^ org-dartlang-sdk:///flutter/lib/ui/geometry.dart:15:9: Context: This assertion failed. const OffsetBase(double dx, double dy) ^ Target kernel_snapshot failed: Exception: Errors during snapshot creation: null build failed.

FAILURE: Build failed with an exception.

Where: Script 'C:\src\flutter\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 817

What went wrong: Execution failed for task ':app:compileFlutterBuildDebug'.

Process 'command 'C:\src\flutter\flutter\bin\flutter.bat'' finished with non-zero exit value
opened by cygnus-glx 13
How to change the text for startRangeSelection

How to change the text for startRangeSelection, startRangeSelection default text is some date,but i expective it is a string what i can customize eg: string "start"

opened by chesongsong 12

Vertical and horizontal misalignment for rotated labels in column chart

Hi,

I noticed that when I use a column chart and rotate my labels by 90 degrees (in order to align them with the columns), not all of them are rendered correctly.

For some there is a horizontal offset (see data points 2 and 11 in the screenshot) and for others the vertical position seems to be not correct. In this example, despite using ChartDataLabelAlignment.outer, some labels start at the bottom or somewhere else along the respective column of the chart.

class _TestGraphState extends State<TestGraph> {
  @override
  Widget build(BuildContext context) {
    final List<DisplayedData> columnSeriesData = [
      DisplayedData('Sleeping', 8.7),
      DisplayedData('Personal Care', 0.8),
      DisplayedData('Eating and drinking', 1.2),
      DisplayedData('Housework', 1.9),
      DisplayedData('Other', 1.3),
      DisplayedData('Childcare / care for others', 0.7),
      DisplayedData('Working', 3.8),
      DisplayedData('Education', 0.5),
      DisplayedData('Socialization', 0.7),
      DisplayedData('Watching television', 2.7),
      DisplayedData('Exercise / recreation', 0.3),
      DisplayedData('Leisure', 1.4),
    ];
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.symmetric(
          vertical: 20,
          horizontal: 0,
        ),
        child: Column(
          children: <Widget>[
            Text(
              'Graph title',
              style: TextStyle(
                fontSize: 20,
              ),
            ),
            SizedBox(
              height: 15,
            ),
            Expanded(
              child: SfCartesianChart(
                primaryXAxis: CategoryAxis(
                  isVisible: false,
                ),
                series: <ChartSeries>[
                  ColumnSeries<DisplayedData, String>(
                    dataSource: columnSeriesData,
                    xValueMapper: (DisplayedData data, _) => data.xValueMapper,
                    yValueMapper: (DisplayedData data, _) => data.yValueMapper,
                    dataLabelSettings: DataLabelSettings(
                      labelAlignment: ChartDataLabelAlignment.outer,
                      isVisible: true,
                      angle: 90,
                    ),
                    dataLabelMapper: (DisplayedData data, _) =>
                        '${data.yValueMapper} (${data.xValueMapper})',
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Best regards, Henning

opened by hnnngwdlch 12

Error when generating an image in Flutter web.

Hi, I use your example project. This works fine on mobile. But in the flutter web, This error below was shown when I pressed the 'To Image' button. Error: Assertion failed: org-dartlang-sdk:///flutter_web_sdk/lib/_engine/engine/html/scene_builder.dart:94:16 matrix4[0] == window.devicePixelRatio && matrix4[5] == window.devicePixelRatio is not true at Object.throw_ [as throw] (http://localhost:49319/dart_sdk.js:5391:11) at Object.assertFailed (http://localhost:49319/dart_sdk.js:5313:15) at _engine.SurfaceSceneBuilder.new.pushTransform (http://localhost:49319/dart_sdk.js:178150:133) at layer$.OffsetLayer.new.toImage (http://localhost:49319/packages/flutter/src/rendering/layer.dart.lib.js:1505:17) at toImage.next (<anonymous>) at runBody (http://localhost:49319/dart_sdk.js:43013:34) at Object._async [as async] (http://localhost:49319/dart_sdk.js:43044:7) at layer$.OffsetLayer.new.toImage (http://localhost:49319/packages/flutter/src/rendering/layer.dart.lib.js:1499:20) at proxy_box.RenderRepaintBoundary.new.toImage (http://localhost:49319/packages/flutter/src/rendering/proxy_box.dart.lib.js:3674:26) at main._MyHomePageState.new._handleSaveButtonPressed (http://localhost:49319/packages/kt_eclaim/main.dart.lib.js:602:70) at _handleSaveButtonPressed.next (<anonymous>) at runBody (http://localhost:49319/dart_sdk.js:43013:34) at Object._async [as async] (http://localhost:49319/dart_sdk.js:43044:7) at main._MyHomePageState.new.[_handleSaveButtonPressed] (http://localhost:49319/packages/kt_eclaim/main.dart.lib.js:599:20) at ink_well._InkResponseState.new.[_handleTap] (http://localhost:49319/packages/flutter/src/material/icon_button.dart.lib.js:43171:31) at tap.TapGestureRecognizer.new.invokeCallback (http://localhost:49319/packages/flutter/src/gestures/recognizer.dart.lib.js:201:18) at tap.TapGestureRecognizer.new.handleTapUp (http://localhost:49319/packages/flutter/src/gestures/tap.dart.lib.js:427:40) at tap.TapGestureRecognizer.new.[_checkUp] (http://localhost:49319/packages/flutter/src/gestures/tap.dart.lib.js:229:12) at tap.TapGestureRecognizer.new.handlePrimaryPointer (http://localhost:49319/packages/flutter/src/gestures/tap.dart.lib.js:175:23) at tap.TapGestureRecognizer.new.handleEvent (http://localhost:49319/packages/flutter/src/gestures/recognizer.dart.lib.js:454:16) at pointer_router.PointerRouter.new.[_dispatch] (http://localhost:49319/packages/flutter/src/gestures/pointer_router.dart.lib.js:94:9) at http://localhost:49319/packages/flutter/src/gestures/pointer_router.dart.lib.js:125:26 at LinkedMap.new.forEach (http://localhost:49319/dart_sdk.js:29123:11) at pointer_router.PointerRouter.new.[_dispatchEventToRoutes] (http://localhost:49319/packages/flutter/src/gestures/pointer_router.dart.lib.js:122:29) at pointer_router.PointerRouter.new.route (http://localhost:49319/packages/flutter/src/gestures/pointer_router.dart.lib.js:114:37) at binding$5.WidgetsFlutterBinding.new.handleEvent (http://localhost:49319/packages/flutter/src/gestures/binding.dart.lib.js:394:26) at binding$5.WidgetsFlutterBinding.new.dispatchEvent (http://localhost:49319/packages/flutter/src/gestures/binding.dart.lib.js:380:24) at binding$5.WidgetsFlutterBinding.new.dispatchEvent (http://localhost:49319/packages/flutter/src/rendering/layer.dart.lib.js:5808:13) at binding$5.WidgetsFlutterBinding.new.[_handlePointerEventImmediately] (http://localhost:49319/packages/flutter/src/gestures/binding.dart.lib.js:353:14) at binding$5.WidgetsFlutterBinding.new.handlePointerEvent (http://localhost:49319/packages/flutter/src/gestures/binding.dart.lib.js:326:43) at binding$5.WidgetsFlutterBinding.new.[_flushPointerEventQueue] (http://localhost:49319/packages/flutter/src/gestures/binding.dart.lib.js:315:14) at binding$5.WidgetsFlutterBinding.new.[_handlePointerDataPacket] (http://localhost:49319/packages/flutter/src/gestures/binding.dart.lib.js:305:65) at Object.invoke1 (http://localhost:49319/dart_sdk.js:203779:7) at _engine.EnginePlatformDispatcher.__.invokeOnPointerDataPacket (http://localhost:49319/dart_sdk.js:182659:15) at _engine.PointerBinding.__.[_onPointerData] (http://localhost:49319/dart_sdk.js:183585:49) at http://localhost:49319/dart_sdk.js:184068:28 at http://localhost:49319/dart_sdk.js:184021:16 at loggedHandler (http://localhost:49319/dart_sdk.js:183695:11)

opened by SittiphanSittisak 11

Example is not working

I cloned the code, then ran 'flutter packages get':


C:\flutter-examples>flutter packages get
Because every version of syncfusion_flutter_signaturepad from git depends on syncfusion_flutter_core from git {url: https://buildautomation:[email protected]/essential-studio/flutter-core, ref:
release/19.1.0.1, path: syncfusion_flutter_core} and every version of syncfusion_flutter_maps from git depends on syncfusion_flutter_core from git {url: https://buildautomation:[email protected]
/essential-studio/flutter-core, ref: development, path: syncfusion_flutter_core}, syncfusion_flutter_signaturepad from git is incompatible with syncfusion_flutter_maps from git.
So, because flutter_examples depends on both syncfusion_flutter_maps from git and syncfusion_flutter_signaturepad from git, version solving failed.
Running "flutter pub get" in flutter-examples...
pub get failed (1; So, because flutter_examples depends on both syncfusion_flutter_maps from git and syncfusion_flutter_signaturepad from git, version solving failed.)

opened by ronytesler 11

Low speed Chart

Your chart performs extremely poorly on 500 candlesticks please see this video

https://vimeo.com/user108517719/review/509174535/faff05e7f8

My phone is Samsung S10 plus

opened by m2faridi 11
[CALENDAR] - Jump to today's date doesn't work in week/workweek mode
I got a Button "Today" which leads the view to DateTime.now().

I am setting:

selectedDate and

displayDate

to that value and it works on Day and Month View, but when I press that button on week or workweek mode, it does nothing.

Is that intended to be so, or is that a missing feature?

Thanks.
opened by Ahmadre 11
QR code yellow background

I tried multiple government pan card PDF and most of pdf QR code is showed with yellow background. Also some PDF not opened and generate exception with message "Null check operator used on a null value".

current version used: syncfusion_flutter_pdf: ^19.3.46-beta

This pdf file not opened. 15112000 INSTANT (1).pdf password - 15112000

PDF show QR Code with yellow background.(We also tried remove password at the same time, may be issue occured from that) 24071988_UTI_(1).pdf

opened by vishwajit76 10

SfDataGrid : The stylization of alternating lines is lost when sorting.

I used your example for alternating line styling:

  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());
  }

When sorting, the stylization of rows ceases to work, since the rows in the list do not change places from sorting!

Before sorting: 1_1

After sorting: 1_2

opened by mikrul85 10

The first appoinment duplicate for all day event
Environment:

Flutter 3.3.10

iOS 16.2

syncfusion_flutter_calendar 20.4.42

If I add some all day events, it always show the first appointment to the last, also just get it if you not expand arrow icon (arrow icon on attached)

Can you check it?
opened by thuydtshop 0
Set selectionShape is not working when use cellBuilder in SfDateRangePicker

I want to set circle to selectionShape, meanwhile I use cellbuilder to custom the cell.But the selectionShape was not circle, it is still rectangle.What should I do ?

opened by 2e2ee95304418f96 0

Update to timezone 0.9.1

Hi,

The timezone package has been updated, please upgrade your dependency in flutter_calendar:

Because syncfusion_flutter_calendar >=20.3.48 depends on timezone 0.9.0 and syncfusion_flutter_calendar >=19.3.43+1 <20.3.48 depends on timezone 0.8.0, syncfusion_flutter_calendar >=19.3.43+1 requires timezone 0.8.0 or 0.9.0.
So, because easyhour_app depends on both timezone ^0.9.1 and syncfusion_flutter_calendar ^20.3.47, version solving failed.
pub finished with exit code 1

I think you should allow minor version fixes by using timezone: ^0.9.1 (with the caret symbol).

opened by mauriziopinotti 0

A Pointer with border?

Hello, thanks for this awesome flutter graphics pack. I searched, but did not find a way to determine a pointer with a border, as shown below in the image. Is there a way to get to this design?

opened by sostenesgomes 0

Releases(v19.1.0.54)

v19.1.0.54(Mar 30, 2021)
Calendar

Bug fixes

Now, the localization is working properly for the spanned appointment count text in Flutter event calendar.

Features

Provided the LoadMore support for the event calendar.

Provided the negative values support for BYSETPOS in recurrence to display the appointment in the last and second last week of a month.

Provided the support for the header date format in the Flutter event calendar.

Provided the support for getting appointments between the start and end date range by using the getVisibleAppointments method in the Flutter event calendar.

Provided the current time indicator support for timeslot views.

Provided the support for enabling and disabling the swiping interaction in the Flutter event calendar.

Provided the support for the selected date changed callback in the Flutter event calendar.

Improved the timeslot views disabled slots appearance in the Flutter event calendar.

Breaking changes

The startTime and endTime properties of the Appointment class are now marked as required.

The startTime property of the RecurrenceProperties class is now marked as required.

The startTime and endTime properties of the TimeRegion class are now marked as required.

Chart

Bug fixes

The annotation will not flicker on zooming or panning and will get positioned properly in the plot area of the chart. Features

#309715 - Provided on-demand data loading support to load more data lazily.

#271236 – Provided auto-scrolling support to display a fixed number of data points in the visible range and can view the remaining data by panning.

#275707 - Implemented a new x-axis type named DateTimeCategory axis, which is a mixture of date-time and category axis.

#245176 - Provided support to fill the circular charts with gradient and image shader.

Provided support to switch the circular charts rendering mode as gradient instead of solid colors.

Now, the trackball tooltip can be rendered along with markers alike the series tooltip.

The swiping gesture has been added to the chart to achieve pagination functionality.

Provided support to change the trackball/crosshair position even after the touch interaction leaves the chart area.

Breaking Changes

onAxisLabelRender callback has been deprecated, instead use labelFormatter callback to customize the axis labels.

Hereafter initialize the chart behaviors in the initState method instead of build method.

Now, the marker will be displayed in the trackball tooltip by default.

DataGrid (Beta)

Bug fixes

Now, in Flutter 2.0, text can be typed in TextField widget when you load it in cells in web platform.

Features

Provided the support to refresh the data when the datagrid is pulled down.

Provided the support to swipe a row “right to left” or “left to right” for custom actions such as deleting, editing, and so on. When the user swipes a row, the row will be moved, and swipe view will be shown for custom actions.

Provided the support to scroll to a specific row, column, or cell. Also, users can scroll a row or column based on offset values.

Breaking Changes

We have documented all the API breaking details in this document.

Date Range Picker (Beta)

Features

Implemented the free scroll support in the date range picker.

Implemented action buttons to confirm and cancel the selection in the date range picker.

Provided the support for enabling and disable the swiping interaction in the date range picker.

Breaking changes

Now, the header text will align to the left instead of center when the multiview is enabled in the date range picker.

LinearGauge (Beta)

The Flutter Linear Gauge is a data visualization widget that can be used to display data on a linear scale in either horizontal or vertical orientation.

Key Features

Orientation - The Linear Gauge can be set to vertical or horizontal orientation.

Axis - The Linear Gauge axis is a scale where a set of values can be plotted. An axis can be customized by changing the thickness and edge styles. Users can also inverse the axis.

Labels and Ticks -The Linear Gauge 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 visualize where a range falls on the axis track quickly. Multiple ranges with different styles can be added to a linear gauge.

Pointers - A pointer is used to indicate a specific value on an axis. The widget has three types of pointers: shape marker, widget marker, and bar. All the pointers can be customized as needed and multiple pointers can added to a linear gauge.

Animation - All linear gauge elements can be animated in a visually appealing way. It is possible to animate the gauge elements when they are loading or when their values change.

Pointer interaction - The shape and widget marker pointers in a Linear Gauge can be moved from one value to another with swipe or drag gestures.

Maps (Beta)

Features

Inverted circle - Support has been provided for applying color to the inverted circle with the inner circle being transparent and the outer portion covered by an overlay color.

Inverted polygon - Support has been provided for applying color to the inverted polygon with the inner polygon being transparent and the outer portion covered by an overlay color.

The legend title support has been provided.

Double tap zooming support has been provided in the shape layer and tile layer.

Breaking changes

The title property has been removed from SfMaps.

PDF (Beta)

Bug fixes

#313708 - The unhandled exception when adding the watermarks to the PDF document is resolved now.

#311654 - The bookmark Unicode text preservation issue is resolved now.

#160361 – The Wrong header row index retrieved from the PDF grid begin cell callback has been resolved now.

The text rendering issue while using the PdfTextElement is resolved now.

The Page size is not updated properly when adding margins issue resolved now.

Breaking Changes

The property flatten has been removed from the PdfAnnotation and PdfAnnotationCollection. And added a new method called flatten and flattenAllAnnotations instead.

Features

#305280 - Provided the support to add image position in the PDF grid cell.

#161224 - Provided the support to set clip using the path data on the PDF graphics.

Provided the support to add encryption options when protecting the PDF files.

Provided the support to create, read, modify, fill, and flatten PDF form fields.

Provided the support to digitally sign the PDF document.

PDF Viewer (Beta)

Breaking changes

Now, the text selection color and handle color can be customized using selectionColor and selectionHandleColor properties of TextSelectionTheme respectively.

Features

The Web platform support has been provided.

Support to view the rotated PDF documents in the iOS platform has been provided.

Now, the computeDryLayout has been implemented and SfPdfViewer widget will be compatible in all channels of Flutter SDK.

Now, the highlighted search instance in the zoomed document will be navigated properly.

RadialGauge

Features

Provided support to use any custom widget as a pointer.

Provided elevation support for pointers.

Provided overlay support for marker pointer.

Breaking changes

If dragging is enabled and while touching the marker pointer in mobile and on hovering/clicking the marker pointer in web, the overlay will be displayed in the marker’s color by default with reduced opacity.

Range Selector (Beta)

Enhancements

Accessibility has been improved further to easily use thumbs and control the value changes using volume buttons.

Breaking changes

Now, the SfRangeSelectorSemanticFormatterCallback typedef has been changed into RangeSelectorSemanticFormatterCallback and the parameter has been changed from SfRangeValues to value which denotes the value of the current thumb. A new parameter named SfThumb has also been added to indicate which thumb is changed currently.

Range Slider

Features

Support has been provided for vertical orientation.

Enhancements

Accessibility has been improved further to easily use thumbs and control the value changes using volume buttons.

Breaking changes

Now, the SfRangeSliderSemanticFormatterCallback typedef has been changed into RangeSliderSemanticFormatterCallback and the parameter has been changed from SfRangeValues to value which denotes the value of the current thumb. A new parameter named SfThumb has also been added to indicate which thumb is changed currently.

Slider

Features

Support has been provided for vertical orientation.

Treemap (Beta)

Features

The Treemap is a data visualization widget that provides an effective way to visualize flat and hierarchical data as rectangles that are sized and colored based on quantitative variables.

Labels - Add any type of widgets (like text widget) to improve the readability of the individual tiles by providing brief descriptions on labels.

Layouts - Use different layouts based on the algorithms such as squarified, slice, and dice to represent flat and hierarchically structured data.

Hierarchical support - Along with the flat level, treemap supports hierarchical structure too. Each tile of the treemap is a rectangle which is filled with smaller rectangles representing sub-data.

Colors - Categorize the tiles on the treemap by customizing their color based on the levels. It is possible to set the tile color for a specific value or for a range of values.

Tooltip - Display additional information about the tile using a completely customizable tooltip on the treemap.

Legend - Use different legend styles to provide information on the treemap data clearly.

Selection - Allows you to select the tiles to highlight it and do any specific functionalities like showing pop-up or navigate to a different page.

Custom background widgets - Add any type of custom widgets such as image widget as a background of the tiles to enrich the UI and easily visualize the type of data that a particular tile shows.

Source code(tar.gz)
Source code(zip)
v18.4.0.30(Dec 17, 2020)
Common

Features

A new Spark Charts widget has been added.

Calendar

Features

The custom builder support is provided for the time region and the appointment views in the calendar.

Provided the interaction support for the resource header.

Support is provided to the right end padding for the cell touch region when the cell has an appointment in the calendar.

Enhancements

The animation for view switching, selection ripple effect, and header picker pop-up animation is improved.

Breaking changes

Now, the display date that does not contain an appointment, will show the text as 'No events' in schedule view.

Chart

Bug fixes

#159199 - The trackball is showing properly with public methods.

Now, the zooming will reset properly on the zoom out.

The tooltip builder will not throw any exceptions in Circular charts.

The selection is working properly with initialSelectedDataIndexes property.

The trackball tooltip will not throw an exception when the tooltip is hidden using the onTrackballPositionChanging event.

Features

#298637 - Support for defining the maximum width of the axis labels is provided.

#274008, #293025 - Provided template support for the trackball.

#281645 - Support for converting a logical pixel value to a chart data point and vice versa has been provided.

Now, you can get the viewportPointIndex from onDataLabelTapped, onSelectionChanged and other applicable events.

Provided maximumZoomLevel support for pinch-zooming in the Cartesian chart.

DataGrid Preview

Features

#285683 -Provided the support to show stacked headers i.e. unbound header rows. Unbound header rows span stacked header columns across multiple rows and columns.

Provided the support to display an interactive view when the grid reaches its maximum offset while scrolling down. Tapping the interactive view triggers a callback to add more data from the data source of the grid at run time.

Provided the support to highlight the header cells on mouse hover.

Provided the callbacks support in SfDataPager to listen when page navigation is started and ended.

Provided the support to set grid lines for header and stacked header cells.

Provided the support to improve the compactness of the datagrid based on the visual density.

Breaking Changes

All the properties in GridTextColumn, GridNumericColumn, GridDateTimeColumn and GridWidgetColumn classes are marked as final. So, these classes are immutable.

Date Range Picker

Features

Hijri date picker support is provided.

The custom builder support is provided for the month cells and year cells in the date range picker.

#287657 - Vertical date picker support provided.

Maps Preview

Features

#297066, #297225, Shape sublayer - Provides option to add a shape sublayer with GeoJSON data in another shape layer or tile layer to show more details about a particular region.

Load JSON from different sources - Load GeoJSON data in the shape layer from different sources such as files in network, assets, and data in memory.

Tooltip for markers - Provides support to add a tooltip for both the built-in markers and custom markers to show additional information about them.

Bar legend with gradient support - In addition to the existing legend style, you can use a bar-style legend. You can render this bar legend with a gradient background.

Vector shapes - Add shapes such as polylines, lines, polygons, circles, and arcs as a sublayer in the shape and tile layers.

Animation improvements - Animation is included for zooming and panning functionalities for both shape and tile layers during toolbar interactions and property changes.

Diagnostics support - Provided Diagnostics support in the SfMaps, SfSlider, SfRangeSlider, and SfRangeSelector widgets to identify the current state of the widget while debugging.

Breaking changes

The palette property has been removed from MapShapeLayer.

The enableShapeTooltip property has been removed and the tooltip can be enabled by setting the shapeTooltipBuilder property.

The shapeTooltipTextMapper property has been removed and the same behavior can be achieved by returning a custom widget from the shapeTooltipBuilder property.

The showBubbles property has been removed and the same behavior can be achieved by setting the bubbleSizeMapper property.

The enableBubbleTooltip property has been removed and the tooltip can be enabled by setting the bubbleTooltipBuilder property.

The bubbleTooltipTextMapper property has been removed and the same behavior can be achieved by returning a custom widget from the bubbleTooltipBuilder property.

The enableSelection property has been removed and the same behavior can be achieved by setting the onSelectionChanged property.

The initialSelectedIndex property has been changed to selectedIndex. To observe the changes in the UI, the user must call setState().

The delegate property has been changed to source property and the type of the delegate property MapShapeLayerDelegate has been changed into MapShapeSource with named constructors such as MapShapeSource.asset, MapShapeSource.network, and MapShapeSource.memory to load json data from various sources.

The legendSettings property has been renamed as legend and the MapLegendSettings has been renamed as the MapLegend.

The legendSource property has been renamed as source and is now moved to the MapLegend.

The MapLegend.none enum has been removed and the same behavior can be achieved by setting the legend property as null

The showIcon property has been removed and the same behavior can be achieved by setting iconSize property of the MapLegend class as Size.empty.

The opacity property has been removed from MapBubbleSettings and MapSelectionSettings classes and the same behavior can be achieved by setting opacity value in color property of the MapBubbleSettings and MapSelectionSettings.

The MapIconType.square enum has been changed to MapIconType.rectangle.

The MapLabelOverflowMode has been renamed as the MapLabelOverflow. The MapLabelOverflowMode.trim and MapLabelOverflowMode.none enum values have been renamed to MapLabelOverflow.ellipsis and MapLabelOverflow.visible respectively. The MapLabelOverflow enum values are visible, ellipsis, and hide.

The textStyle and tooltipTextStyle property has been removed from MapTooltipSettings and SfMapsThemeData classes respectively since the built-in tooltip shape is removed.

PDF Preview

Breaking Changes

The method extractTextWithLine has been removed and add new method extractTextLines instead.

Features

Support provided to encrypt or decrypt a PDF document.

Support provided to create, read, and edit layers in a PDF documents.

Support provided to create PDF conformance document.

Support provided to extract text with layout.

Support provided to draw image with pagination.

Support provided to add attachment to the PDF document.

Support provided to add document information in a PDF document.

Bugs

#301560 - The bookmark parsing issue has been resolved now.

PDF Viewer Preview

Features

Text Search - Support for searching text in a PDF document has been provided. All occurrences of the searched text can be navigated.

Text Selection - Support to select the text presented in a PDF document has been provided. The selection can be changed by dragging the selection handler.

Document Link Annotation - Document link annotation in the TOC (Table Of Content) of a PDF document will now navigate to its respective positions.

#I299691 - The Page storage support has been provided, which preserves the scroll offset and zoom level.

#F159581 - Support to adjust the space between the pages has been provided.

Provided the initialScrollOffset and initialZoomLevel properties to display the PDF document loaded with the specified scroll offset and zoom level respectively.

Range Selector Preview

Breaking changes

The showTooltip property has been changed into enableTooltip property.

Range Slider

Breaking changes

The showTooltip property has been changed into enableTooltip property.

Slider

Breaking changes

The showTooltip property has been changed into enableTooltip property.

Spark Charts Preview

Spark charts (micro charts) are lightweight charts that fit in a very small area. They display the trend of the data and convey quick information to the user.

Features

Provided support for Line, Area, Column, and Win-loss chart types.

Provided support for Numeric, Category, and Date-time axis types.

Provided marker and data label supports.

Provided trackball support to display additional information about the data points.

Provided plot band support to highlight a particular vertical range.

XlsIO Preview

Breaking Changes

The property showGridLines in the Worksheet class is replace with a new property showGridlines.

The method saveStream in the Workbook class is replaced with a new method saveAsStream.

save method is removed from the Workbook class.

addFile method is removed from the PicturesCollection class.

Features

Provided the support to add hyperlinks to texts and images.

Provided the support to insert and delete rows/columns.

Provided the support to autofit rows and columns.

Provided the support to create Excel documents with logical functions, string functions, and nested formulas.

Provided the support to add chart types: Area, AreaStacked, AreaStacked100, ColumnStacked100, BarStacked100, LineStacked100.

Provided the support to protect Excel workbooks and worksheets.

Source code(tar.gz)
Source code(zip)
v18.3.38(Oct 8, 2020)
Chart

Bug fixes

Now the spline area series will animate properly on adding new data points dynamically.

Source code(tar.gz)
Source code(zip)