Latest source merged from Syncfusion
This commit is contained in:
pipeline
Родитель
2113c7fa4d
Коммит
e2bb0bcd48
|
|
@ -0,0 +1,174 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility in Flutter DataGrid | DataTable | Syncfusion
|
||||
description: Learn here all about the accessibility of the Syncfusion Flutter DataGrid (SfDataGrid) widget and more.
|
||||
platform: flutter
|
||||
control: SfDataGrid
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Accessibility in Flutter DataGrid (SfDataGrid)
|
||||
|
||||
## Screen reader support
|
||||
|
||||
The `SfDataGrid` can be accessed easily by the screen readers in the following ways in Android and iOS platforms:
|
||||
|
||||
* Cell contents can be read by tapping the required cell.
|
||||
* Read the adjacent cell's content by swiping right or left.
|
||||
* Scroll the datagrid vertically and horizontally by dragging two fingers.
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
The `SfDataGrid` provides the sufficient color contrast to make the cell content easier. Use the following properties to customize the appearance of the datagrid elements.
|
||||
|
||||
* [currentCellStyle](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/currentCellStyle.html)
|
||||
* [frozenPaneElevation](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/frozenPaneElevation.html)
|
||||
* [frozenPaneLineColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/frozenPaneLineColor.html)
|
||||
* [gridLineColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/gridLineColor.html)
|
||||
* [headerColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/headerColor.html)
|
||||
* [headerHoverColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/headerHoverColor.html)
|
||||
* [selectionColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/selectionColor.html)
|
||||
* [sortIconColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/sortIconColor.html)
|
||||
|
||||
## Large fonts
|
||||
|
||||
As `SfDataGrid` gets the widget from user end for each cell, the font size in that widget will be automatically changed based on OS settings in Android and iOS platforms. To clearly view the cell content, the row heights in the datagrid will be automatically adjusted based on `MediaQueryData.textScaleFactor`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MediaQuery(
|
||||
data: MediaQueryData(textScaleFactor: 1.5),
|
||||
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: '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 %}
|
||||
|
||||
## Keyboard navigation
|
||||
|
||||
The `SfDataGrid` provides the keyboard navigation support when the [selectionMode](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/selectionMode.html) and [navigationMode](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/navigationMode.html) are enabled. Refer this [link](https://help.syncfusion.com/flutter/datagrid/selection#keyboard-behavior) for supported keys and their purpose.
|
||||
|
||||
## Visual density
|
||||
|
||||
The row heights in `SfDataGrid` will be automatically adjusted based on the [visualDensity](https://api.flutter.dev/flutter/material/ThemeData/visualDensity.html).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Theme(
|
||||
data: ThemeData(visualDensity: VisualDensity.compact),
|
||||
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: '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 %}
|
||||
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
---
|
||||
layout: post
|
||||
title: RTL support in Flutter DataGrid | DataTable | Syncfusion
|
||||
description: Learn here about the right to left (RTL) support in Syncfusion Flutter DataGrid (SfDataGrid) widget and more.
|
||||
platform: flutter
|
||||
control: SfDataGrid
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
## Right to Left (RTL) in Flutter DataGrid (SfDataGrid)
|
||||
|
||||
SfDataGrid supports right-to-left rendering. The columns will be rendered based on LTR and RTL direction.
|
||||
|
||||
## RTL rendering ways
|
||||
|
||||
Right to left rendering can be switched in the following ways:
|
||||
|
||||
### Wrapping the SfDataGrid with Directionality widget
|
||||
|
||||
To change the rendering direction from right to left, wrap the [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-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).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Directionality(
|
||||
textDirection: TextDirection.rtl,
|
||||
child: SfDataGrid(
|
||||
source: employeeDataSource,
|
||||
columnWidthMode: ColumnWidthMode.fill,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.all(16.0),
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
'ID',
|
||||
))),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
alignment: Alignment.center,
|
||||
child: Text('Name'))),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
alignment: Alignment.center,
|
||||
child: Text('Salary'))),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Changing the locale to RTL languages
|
||||
|
||||
To change the datagrid rendering direction from right to left, 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.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
|
||||
import 'package:flutter_localizations/flutter_localizations.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: SfDataGrid(
|
||||
source: employeeDataSource,
|
||||
columnWidthMode: ColumnWidthMode.fill,
|
||||
columns: <GridColumn>[
|
||||
GridTextColumn(
|
||||
columnName: 'id',
|
||||
label: Container(
|
||||
padding: EdgeInsets.all(16.0),
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
'ID',
|
||||
))),
|
||||
GridTextColumn(
|
||||
columnName: 'name',
|
||||
label: Container(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
alignment: Alignment.center,
|
||||
child: Text('Name'))),
|
||||
GridTextColumn(
|
||||
columnName: 'designation',
|
||||
label: Container(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
'Designation',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
GridTextColumn(
|
||||
columnName: 'salary',
|
||||
label: Container(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
alignment: Alignment.center,
|
||||
child: Text('Salary'))),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
---
|
||||
layout: post
|
||||
title: Text selection in Flutter PDF Viewer widget | Syncfusion
|
||||
description: Learn here all about text selection feature of Syncfusion Flutter PDF Viewer (SfPdfViewer) widget and more.
|
||||
platform: Flutter
|
||||
control: SfPdfViewer
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Text selection in Flutter PDF Viewer (SfPdfViewer)
|
||||
|
||||
On a touch device, the [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) allows you to select a text in the PDF page by long pressing on it, which in turn displays the selection handles or bubbles at the top-left and bottom-right corners of its bounds. Then, you can use the left handle to select the text at the left and top, and the right handle to select the text at the right and bottom directions.
|
||||
|
||||
And on a desktop web browser, the text selection can also be performed using mouse dragging with the [`selection`](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfInteractionMode-class.html) interaction mode enabled.
|
||||
|
||||
N> The images in the document will not be selected and, the multiple-page text selection is not supported for now.
|
||||
|
||||
## Enable or disable text selection
|
||||
|
||||
You can enable or disable the text selection in the PDF page using the [enableTextSelection](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/enableTextSelection.html) property. The following code example explains the same.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Container(
|
||||
child: SfPdfViewer.network(
|
||||
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
|
||||
enableTextSelection: false)));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
N> On a desktop web browser, this `enableTextSelection` property will have no effect on the [`pan`](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfInteractionMode-class.html) interaction mode.
|
||||
|
||||
## Customize the text selection and its handle color
|
||||
|
||||
The [SfPdfViewer](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer-class.html) allows you to customize the color used for text selection and its handle based on your requirements. The properties [selectionColor](https://api.flutter.dev/flutter/material/TextSelectionThemeData/selectionColor.html) and [selectionHandleColor](https://api.flutter.dev/flutter/material/TextSelectionThemeData/selectionHandleColor.html) of the [TextSelectionThemeData](https://api.flutter.dev/flutter/material/TextSelectionThemeData-class.html) class can be used to customize them. The following code example explains the same.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
void main() => runApp(MaterialApp(
|
||||
title: 'Syncfusion PDF Viewer Demo',
|
||||
theme: ThemeData(
|
||||
textSelectionTheme: TextSelectionThemeData(
|
||||
selectionColor: Colors.red, selectionHandleColor: Colors.blue),
|
||||
),
|
||||
home: HomePage(),
|
||||
));
|
||||
|
||||
/// Represents Homepage for Navigation
|
||||
class HomePage extends StatefulWidget {
|
||||
@override
|
||||
_HomePageState createState() => _HomePageState();
|
||||
}
|
||||
|
||||
class _HomePageState extends State<HomePage> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Syncfusion Flutter PDF Viewer'),
|
||||
),
|
||||
body: Container(
|
||||
child: SfPdfViewer.network(
|
||||
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
|
||||
)));
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Callbacks
|
||||
|
||||
The `SfPdfViewer` text selection supports the [PdfTextSelectionChangedCallback](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSelectionChangedCallback.html) to notify the text selection changes.
|
||||
|
||||
### Text selection changed callback
|
||||
|
||||
The [onTextSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onTextSelectionChanged.html) callback triggers when the text is selected or deselected in the SfPdfViewer. The [PdfTextSelectionChangedDetails](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSelectionChangedDetails-class.html) will hold the [globalSelectedRegion](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSelectionChangedDetails/globalSelectedRegion.html) representing the global bounds information of the selected text region and the [selectedText](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfTextSelectionChangedDetails/selectedText.html) representing the selected text value. The following code example explains the same.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Syncfusion Flutter PDF Viewer'),
|
||||
),
|
||||
body: Container(
|
||||
child: SfPdfViewer.network(
|
||||
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
|
||||
onTextSelectionChanged: (PdfTextSelectionChangedDetails details) {
|
||||
if (details.selectedText != null) {
|
||||
print(details.selectedText);
|
||||
}
|
||||
},
|
||||
)));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## How to create and display a customized text selection context menu with a Copy option to retrieve the selected text?
|
||||
|
||||
With the options available in the `SfPdfViewer` text selection, you can easily create and display a customized text selection context menu with the **Copy** option and perform an operation for the same. The following code example explains the same.
|
||||
|
||||
In this example, we have used the [OverlayEntry](https://api.flutter.dev/flutter/widgets/OverlayEntry-class.html) widget to create the customized context menu and have added a simple button (for the Copy option) as a child to it. Whenever this Copy option is pressed, the selected text will be copied to the clipboard and the selection will be cleared. The selected text value is retrieved from the [onTextSelectionChanged](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/SfPdfViewer/onTextSelectionChanged.html) callback details and we have called the context menu displaying method within this callback implementation. The text selection gets cleared after the Copy operation by calling the [clearSelection](https://pub.dev/documentation/syncfusion_flutter_pdfviewer/latest/pdfviewer/PdfViewerController/clearSelection.html) controller method.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';
|
||||
|
||||
void main() => runApp(MaterialApp(
|
||||
title: 'Syncfusion PDF Viewer Demo',
|
||||
home: HomePage(),
|
||||
));
|
||||
|
||||
/// Represents Homepage for Navigation
|
||||
class HomePage extends StatefulWidget {
|
||||
@override
|
||||
_HomePageState createState() => _HomePageState();
|
||||
}
|
||||
|
||||
class _HomePageState extends State<HomePage> {
|
||||
late PdfViewerController _pdfViewerController;
|
||||
OverlayEntry? _overlayEntry;
|
||||
@override
|
||||
void initState() {
|
||||
_pdfViewerController = PdfViewerController();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
void _showContextMenu(
|
||||
BuildContext context, PdfTextSelectionChangedDetails details) {
|
||||
final OverlayState _overlayState = Overlay.of(context)!;
|
||||
_overlayEntry = OverlayEntry(
|
||||
builder: (context) => Positioned(
|
||||
top: details.globalSelectedRegion!.center.dy - 55,
|
||||
left: details.globalSelectedRegion!.bottomLeft.dx,
|
||||
child: RaisedButton(
|
||||
onPressed: () {
|
||||
Clipboard.setData(ClipboardData(text: details.selectedText));
|
||||
print(
|
||||
'Text copied to clipboard: ' + details.selectedText.toString());
|
||||
_pdfViewerController.clearSelection();
|
||||
},
|
||||
color: Colors.white,
|
||||
elevation: 10,
|
||||
child: Text('Copy', style: TextStyle(fontSize: 17)),
|
||||
),
|
||||
),
|
||||
);
|
||||
_overlayState.insert(_overlayEntry!);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Syncfusion Flutter PDF Viewer'),
|
||||
),
|
||||
body: Container(
|
||||
child: SfPdfViewer.network(
|
||||
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
|
||||
onTextSelectionChanged: (PdfTextSelectionChangedDetails details) {
|
||||
if (details.selectedText == null && _overlayEntry != null) {
|
||||
_overlayEntry!.remove();
|
||||
_overlayEntry = null;
|
||||
} else if (details.selectedText != null && _overlayEntry == null) {
|
||||
_showContextMenu(context, details);
|
||||
}
|
||||
},
|
||||
controller: _pdfViewerController,
|
||||
)));
|
||||
}
|
||||
}
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -188,6 +188,8 @@
|
|||
<li><a href="/Flutter/datagrid/row-height-customization">Row Height Customization</a></li>
|
||||
<li><a href="/Flutter/datagrid/scrolling">Scrolling</a></li>
|
||||
<li><a href="/Flutter/datagrid/localization">Localization</a></li>
|
||||
<li><a href="/Flutter/datagrid/rtl-support">Right to Left (RTL)</a></li>
|
||||
<li><a href="/Flutter/datagrid/accessibility">Accessibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче