Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SEO 181936- On-Page SEO for Flutter widgets #841

Open
wants to merge 4 commits into
base: hotfix/hotfix-v25.1.35
Choose a base branch
from
Open

SEO 181936- On-Page SEO for Flutter widgets #841

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d49b81b
On-Page SEO for Flutter widgets
Apr 10, 2024
8424bb5
Updated Changes
Apr 15, 2024
1f315e9
Updated Changes
Apr 15, 2024
aa899d1
Updated Changes
Apr 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions Flutter/datagrid/columns-sizing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Columns sizing in Flutter DataGrid | Syncfusion | DataTable
title: Columns sizing in Flutter DataGrid | Data Table | Syncfusion
description: Learn here all about how to set the width for columns in Syncfusion Flutter DataGrid (SfDataGrid) widget and more.
platform: flutter
control: SfDataGrid
Expand Down Expand Up @@ -89,7 +89,7 @@ Widget build(BuildContext context) {
> **NOTE**
The `GridColumn.columnWidthMode` takes higher priority than the `SfDataGrid.columnWidthMode`.

![columns filled based on view port size in flutter datagrid](images/autofit-columns/flutter-datagrid-fill-columns.png)
![columns filled based on view port size in Flutter DataGrid](images/autofit-columns/flutter-datagrid-fill-columns.png)

## Consider all the rows to calculate the autofit size

Expand Down Expand Up @@ -241,7 +241,7 @@ class EmployeeDataSource extends DataGridSource {
{% endhighlight %}
{% endtabs %}

![flutter datagrid shows customization of padding in autofit calculation](images/autofit-columns/flutter-datagrid-autofitpadding-customization.png)
![Flutter DataGrid shows customization of padding in autofit calculation](images/autofit-columns/flutter-datagrid-autofitpadding-customization.png)

## Autofit calculation based on different TextStyle

Expand Down Expand Up @@ -362,7 +362,7 @@ class CustomColumnSizer extends ColumnSizer {
**NOTE**
Download the demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-fit-the-column-based-on-the-different-text-style-in-Flutter-DataTable-sfdatagrid).

![flutter datagrid shows autofit the columns based on different text style](images/autofit-columns/flutter-datagrid-textstyle-customization.png)
![Flutter DataGrid shows autofit the columns based on different text style](images/autofit-columns/flutter-datagrid-textstyle-customization.png)

## Autofit calculation based on the formatted value

Expand Down Expand Up @@ -482,7 +482,7 @@ class CustomColumnSizer extends ColumnSizer {
**NOTE**
Download the demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-fit-the-columns-based-on-the-formatted-value-in-Flutter-datatable-sfdatagrid).

![flutter datagrid shows autofit the columns based on formatted cell value](images/autofit-columns/flutter-datagrid-formatted-cellvalue.png)
![Flutter DataGrid shows autofit the columns based on formatted cell value](images/autofit-columns/flutter-datagrid-formatted-cellvalue.png)

## Fill the remaining width for any column

Expand Down Expand Up @@ -540,7 +540,7 @@ Widget build(BuildContext context) {
{% endhighlight %}
{% endtabs %}

![The last column is filled in view in flutter datagrid](images/autofit-columns/flutter-datagrid-fill-lastcolumn.png)
![The last column is filled in view in Flutter DataGrid](images/autofit-columns/flutter-datagrid-fill-lastcolumn.png)

The below example shows Name column is set as `lastColumnFill` mode.

Expand Down Expand Up @@ -596,7 +596,7 @@ Widget build(BuildContext context) {
{% endhighlight %}
{% endtabs %}

![Name column is filled with remaining available space in flutter datagrid](images/autofit-columns/flutter-datagrid-fill-anycolumn.png)
![Name column is filled with remaining available space in Flutter DataGrid](images/autofit-columns/flutter-datagrid-fill-anycolumn.png)

## Recalculating column widths when datasource is changed

Expand Down
6 changes: 3 additions & 3 deletions Flutter/datagrid/editing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ class EmployeeDataSource extends DataGridSource {
{% endhighlight %}
{% endtabs %}

![flutter datagrid editing](images/editing/datagrid_editing.gif)
![Flutter DataGrid editing](images/editing/datagrid_editing.gif)

>**NOTE**
Download demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-perform-editing-in-flutter-datatable-sfdatagrid).
Expand Down Expand Up @@ -239,7 +239,7 @@ Widget build(BuildContext context) {
{% endhighlight %}
{% endtabs %}

![flutter datagrid disable the editing for specific column](images/editing/disable_editing.gif)
![Flutter DataGrid disable the editing for specific column](images/editing/disable_editing.gif)

## Entering edit mode

Expand Down Expand Up @@ -499,7 +499,7 @@ Widget build(BuildContext context) {
{% endhighlight %}
{% endtabs %}

![flutter datagrid begin edit](images/editing/begin_editing.gif)
![Flutter DataGrid begin edit](images/editing/begin_editing.gif)

### EndEdit

Expand Down
18 changes: 9 additions & 9 deletions Flutter/datagrid/styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Styling feature in Flutter DataGrid | DataTable | Syncfusion
description: Learn here all about how to customize the appearance of DataGrid in Syncfusion Flutter DataGrid (SfDataGrid) widget and more.
description: Learn here all about how to customize the appearance of Syncfusion Flutter Datagrid (SfDataGrid) widget and more.
This conversation was marked as resolved.
Show resolved Hide resolved
platform: flutter
control: SfDataGrid
documentation: ug
---

# Styling in Flutter DataGrid (SfDataGrid)
# Styling in Flutter Datagrid (SfDataGrid)
This conversation was marked as resolved.
Show resolved Hide resolved

The DataGrid supports to change the appearance of the grid by using the [SfDataGridThemeData](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData-class.html) in [SfDataGridTheme](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridTheme-class.html). The DataGrid should be wrapped inside the `SfDataGridTheme`.

Expand Down Expand Up @@ -74,7 +74,7 @@ Widget build(BuildContext context) {
{% endhighlight %}
{% endtabs %}

![flutter datagrid header background color](images/styles/flutter-datagrid-column-header-styling.png)
![Flutter DataGrid header background color](images/styles/flutter-datagrid-column-header-styling.png)

## Change the header hover color

Expand Down Expand Up @@ -131,7 +131,7 @@ Widget build(BuildContext context) {
{% endhighlight %}
{% endtabs %}

![flutter datagrid header hovering](images/styles/flutter-datagrid-header-highlight.gif)
![Flutter DataGrid header hovering](images/styles/flutter-datagrid-header-highlight.gif)

## Change the row background color

Expand Down Expand Up @@ -182,7 +182,7 @@ class EmployeeDataSource extends DataGridSource {
{% endhighlight %}
{% endtabs %}

![flutter datagrid row background color](images/styles/flutter-datagrid-rows-styling.png)
![Flutter DataGrid row background color](images/styles/flutter-datagrid-rows-styling.png)

## Styling grid lines

Expand Down Expand Up @@ -240,7 +240,7 @@ Widget build(BuildContext context) {
{% endhighlight %}
{% endtabs %}

![flutter datagrid shows customizing the grid lines](images/styles/flutter-datagrid-gridline-customization.png)
![Flutter DataGrid shows customizing the grid lines](images/styles/flutter-datagrid-gridline-customization.png)

## Show vertical and horizontal grid lines

Expand Down Expand Up @@ -312,7 +312,7 @@ Widget build(BuildContext context) {
{% endhighlight %}
{% endtabs %}

![flutter datagrid shows both grid lines](images/styles/flutter-datagrid-gridlines.png)
![Flutter DataGrid shows both grid lines](images/styles/flutter-datagrid-gridlines.png)

## Disable the row highlighting

Expand Down Expand Up @@ -415,7 +415,7 @@ Widget build(BuildContext context) {
{% endhighlight %}
{% endtabs %}

![flutter datagrid highlight rows](images/styles/flutter-datagrid-highlight-rows.gif)
![Flutter DataGrid highlight rows](images/styles/flutter-datagrid-highlight-rows.gif)

## Change the cell value color

Expand Down Expand Up @@ -471,4 +471,4 @@ class EmployeeDataSource extends DataGridSource {
{% endhighlight %}
{% endtabs %}

![flutter datagrid cell value color](images/styles/flutter-datagrid-cell-value-styling.png)
![Flutter DataGrid cell value color](images/styles/flutter-datagrid-cell-value-styling.png)